2022-12-11 分類: 網(wǎng)站建設
此文由創(chuàng)新互聯(lián)小編撰寫,轉載請注明出處。有需要成都網(wǎng)站建設,高端網(wǎng)站建設,營銷型網(wǎng)站建設,企業(yè)網(wǎng)站建設,品牌網(wǎng)站建設,以及平面廣告設計服務的,請聯(lián)系創(chuàng)新互聯(lián)成都網(wǎng)站建設公司。
對于Display布局想必大家都有所了解,這個屬性用于定義建立布局時元素生成的顯示框類型。對于 HTML 等文檔類型,如果使用 display 不謹慎會很危險,因為可能違反 HTML 中已經(jīng)定義的顯示層次結構。對于 XML,由于 XML 沒有內置的這種層次結構,所有 display 是絕對必要的。今天我們給大家分享一下網(wǎng)站建設中的Display簡單快速布局:
在以往的大多數(shù)網(wǎng)頁布局中,經(jīng)常要用到浮動或定位、居中,為了實現(xiàn)這些效果,我們通常會用到CSS中 display屬性 + position屬性 + float屬性來完成,但對于某些布局非常不方便,往往花費不必要的時間而達不到想要的效果,CSS3中新特性display: flex的出現(xiàn),使我們能節(jié)省時間和優(yōu)化代碼,并實現(xiàn)各種頁面簡單快速布局。Flex是Flexible Box的縮寫,意為"彈性布局",它的強大之處在為盒狀模型提供大的靈活性。而且display: flex兼容大多數(shù)主流瀏覽器,有些瀏覽器使用時需要加上前綴,比如Webkit內核的瀏覽器,必須加上-webkit前綴。
在使用display: flex布局父元素容器為指定彈性盒子時,只需在父元素中設置:display:flex;而父元素中所包含的子元素的屬性float、clear和vertical-align是沒有效果的;而行內元素容器彈性盒子設置為display:inline-flex;彈性盒子有兩條軸,水平的主軸(橫軸)和垂直的交叉軸(縱軸)。默認橫軸為主軸,默認自左向右;縱軸為輔軸,默認自上而下。
在設置了display: flex的父元素上,常常會用到的有關彈性布局的屬性主要有 flex-direction , flex-wrap , justify-content , align-items , align-content ,這幾個屬性分別從主軸的方向、是否換行、子元素在主軸上的對齊方式、子元素在交叉軸上的對齊方式、子元素在多根軸線上的對齊方式來規(guī)定了子元素在父元素中的彈性,從而來達到所想實現(xiàn)的效果。
在定義了父元素為彈性盒子后子元素所擁有的屬性都有:order,flex-grow,flex-shrink,flex-basis,align-self。order規(guī)定了子元素出現(xiàn)的排列循序,值越小,排列越靠前,默認為0;flex-grow定義了子元素的放大比例,默認為0,表示即使父元素還有剩余空間也不放大該子元素。設父元素的寬度為500px,三個子元素寬度分別為100px,如果所有子元素的flex-grow的值為1,則如果父元素有剩余空間,子元素會等比例放大,即剩余出來的200/3分給三個子元素;如果是一個子元素flex-grow為1,一個為2,第三個為3,則三個子元素分別多分到,200*(1/6),200*(2/6),200*(3/6);flex-shrink定義了子元素的縮小比例,默認為1,當父元素空間不足時,如果各個條目的flex-shrink值均為1,則表明等比例縮小,如果為0,則表示不縮小。
此文由創(chuàng)新互聯(lián)小編撰寫,轉載請注明出處。有需要成都網(wǎng)站建設,高端網(wǎng)站建設,營銷型網(wǎng)站建設,企業(yè)網(wǎng)站建設,品牌網(wǎng)站建設,以及平面廣告設計服務的,請聯(lián)系創(chuàng)新互聯(lián)公司。
名稱欄目:網(wǎng)站建設中的Display簡單快速布局
分享鏈接:http://www.rwnh.cn/news33/221433.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供手機網(wǎng)站建設、Google、網(wǎng)站制作、網(wǎng)站導航、面包屑導航、網(wǎng)站排名
聲明:本網(wǎng)站發(fā)布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經(jīng)允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內容