網(wǎng)站建設(shè)中的Display簡(jiǎn)單快速布局

此文由創(chuàng)新互聯(lián)小編撰寫(xiě)，轉(zhuǎn)載請(qǐng)注明出處。有需要成都網(wǎng)站建設(shè)，高端網(wǎng)站建設(shè)，營(yíng)銷(xiāo)型網(wǎng)站建設(shè)，企業(yè)網(wǎng)站建設(shè)，品牌網(wǎng)站建設(shè)，以及平面廣告設(shè)計(jì)服務(wù)的，請(qǐng)聯(lián)系創(chuàng)新互聯(lián)成都網(wǎng)站建設(shè)公司。

對(duì)于Display布局想必大家都有所了解，這個(gè)屬性用于定義建立布局時(shí)元素生成的顯示框類(lèi)型。對(duì)于 HTML 等文檔類(lèi)型，如果使用 display 不謹(jǐn)慎會(huì)很危險(xiǎn)，因?yàn)榭赡苓`反 HTML 中已經(jīng)定義的顯示層次結(jié)構(gòu)。對(duì)于 XML，由于 XML 沒(méi)有內(nèi)置的這種層次結(jié)構(gòu)，所有 display 是絕對(duì)必要的。今天創(chuàng)新互聯(lián)給大家分享一下網(wǎng)站建設(shè)中的Display簡(jiǎn)單快速布局：

在以往的大多數(shù)網(wǎng)頁(yè)布局中，經(jīng)常要用到浮動(dòng)或定位、居中，為了實(shí)現(xiàn)這些效果，我們通常會(huì)用到CSS中 display屬性 + position屬性 + float屬性來(lái)完成，但對(duì)于某些布局非常不方便，往往花費(fèi)不必要的時(shí)間而達(dá)不到想要的效果，CSS3中新特性display: flex的出現(xiàn)，使我們能節(jié)省時(shí)間和優(yōu)化代碼，并實(shí)現(xiàn)各種頁(yè)面簡(jiǎn)單快速布局。Flex是Flexible Box的縮寫(xiě)，意為"彈性布局"，它的強(qiáng)大之處在為盒狀模型提供大的靈活性。而且display: flex兼容大多數(shù)主流瀏覽器，有些瀏覽器使用時(shí)需要加上前綴，比如Webkit內(nèi)核的瀏覽器，必須加上-webkit前綴。

在使用display: flex布局父元素容器為指定彈性盒子時(shí)，只需在父元素中設(shè)置：display：flex；而父元素中所包含的子元素的屬性float、clear和vertical-align是沒(méi)有效果的；而行內(nèi)元素容器彈性盒子設(shè)置為display：inline-flex；彈性盒子有兩條軸，水平的主軸（橫軸）和垂直的交叉軸（縱軸）。默認(rèn)橫軸為主軸，默認(rèn)自左向右；縱軸為輔軸，默認(rèn)自上而下。

在設(shè)置了display: flex的父元素上，常常會(huì)用到的有關(guān)彈性布局的屬性主要有 flex-direction , flex-wrap , justify-content , align-items , align-content ，這幾個(gè)屬性分別從主軸的方向、是否換行、子元素在主軸上的對(duì)齊方式、子元素在交叉軸上的對(duì)齊方式、子元素在多根軸線上的對(duì)齊方式來(lái)規(guī)定了子元素在父元素中的彈性，從而來(lái)達(dá)到所想實(shí)現(xiàn)的效果。

在定義了父元素為彈性盒子后子元素所擁有的屬性都有：order，flex-grow，flex-shrink，flex-basis，align-self。order規(guī)定了子元素出現(xiàn)的排列循序，值越小，排列越靠前，默認(rèn)為0；flex-grow定義了子元素的放大比例，默認(rèn)為0，表示即使父元素還有剩余空間也不放大該子元素。設(shè)父元素的寬度為500px，三個(gè)子元素寬度分別為100px，如果所有子元素的flex-grow的值為1，則如果父元素有剩余空間，子元素會(huì)等比例放大，即剩余出來(lái)的200/3分給三個(gè)子元素；如果是一個(gè)子元素flex-grow為1，一個(gè)為2，第三個(gè)為3，則三個(gè)子元素分別多分到，200*（1/6），200*（2/6），200*（3/6）；flex-shrink定義了子元素的縮小比例，默認(rèn)為1，當(dāng)父元素空間不足時(shí)，如果各個(gè)條目的flex-shrink值均為1，則表明等比例縮小，如果為0，則表示不縮小。

此文由創(chuàng)新互聯(lián)小編撰寫(xiě)，轉(zhuǎn)載請(qǐng)注明出處。有需要成都網(wǎng)站建設(shè)，高端網(wǎng)站建設(shè)，營(yíng)銷(xiāo)型網(wǎng)站建設(shè)，企業(yè)網(wǎng)站建設(shè)，品牌網(wǎng)站建設(shè)，以及平面廣告設(shè)計(jì)服務(wù)的，請(qǐng)聯(lián)系創(chuàng)新互聯(lián)公司。

網(wǎng)站欄目：網(wǎng)站建設(shè)中的Display簡(jiǎn)單快速布局
網(wǎng)站地址：http://www.bm7419.com/news/13916.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專(zhuān)注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營(yíng)銷(xiāo)seo公司；服務(wù)項(xiàng)目有網(wǎng)站建設(shè)等

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)