旨在打造詳盡的前端布局代碼學(xué)習(xí)庫(kù)（自從用了框架開發(fā)，CSS生疏了不少，所以開這個(gè)庫(kù)練練手）
SF不能正確解析含有中文的網(wǎng)址，所以某些預(yù)覽鏈接無(wú)法跳轉(zhuǎn)，請(qǐng)?jiān)L問我的博客閱讀此文

子元素為行內(nèi)元素還是塊狀元素，寬度一定還是寬度未定，采取的布局方案不同。

方案選擇基本思路：
子元素為

行內(nèi)元素：對(duì)父元素設(shè)置text-align:center;

定寬塊狀元素: 設(shè)置左右margin值為auto;

不定寬塊狀元素: 設(shè)置子元素為display:inline,然后在父元素上設(shè)置text-align:center;

通用方案: flex布局，對(duì)父元素設(shè)置display:flex;justify-content:center;

常用方法舉例：

NOTE:為了統(tǒng)一展示效果，在以下實(shí)例代碼中對(duì)父子元素設(shè)置了固定寬高，實(shí)際可以不設(shè)置，由子元素內(nèi)容來(lái)控制其寬度
方法一：text-align + inline-block

設(shè)置：對(duì)父元素設(shè)置text-align:center(將會(huì)對(duì)行內(nèi)元素起作用)，子元素設(shè)置display:inline-block（兼容IE6、7 時(shí)，替換為display:inline;zoom:1;）;

優(yōu)點(diǎn)：兼容性良好

缺點(diǎn)： 需要額外代碼修復(fù)因繼承父元素的text-align:center對(duì)子元素內(nèi)容排列造成的影響，如需要添加.child{text-align:left}

方法二：table + margiin

設(shè)置：對(duì)子元素設(shè)置display:table(此元素會(huì)作為塊級(jí)表格來(lái)顯示，元素表現(xiàn)類似block，但是寬度跟隨內(nèi)容寬度)（兼容IE6、7 時(shí)，替換div結(jié)構(gòu)為table結(jié)構(gòu)即可）;

優(yōu)點(diǎn)： 只需要對(duì)子元素進(jìn)行設(shè)置

缺點(diǎn)： 向下兼容IE6、7時(shí)，需要更改html結(jié)構(gòu)

方法三：absolute + transform

設(shè)置：對(duì)父元素設(shè)置position:realatve(使其作為參照物)，對(duì)子元素設(shè)置position:absolute;left:50%(絕對(duì)定位元素的寬度也隨內(nèi)容而定)，然后對(duì)子元素設(shè)置transform:translateX(-50%)（兼容IE6、7 時(shí)，替換div結(jié)構(gòu)為table結(jié)構(gòu)即可）;

優(yōu)點(diǎn)： 居中元素不會(huì)對(duì)其他元素造成影響

缺點(diǎn)：transform不兼容低版本IE

方法四：flex + justify-content

設(shè)置：對(duì)父元素設(shè)置display:flex;justify-content:center(這樣其內(nèi)部的元素會(huì)變?yōu)?b>align-items)，align-items的寬度默認(rèn)為auto，所以跟隨內(nèi)容寬度變化，繼而justify-content:center屬性會(huì)使子元素居中

優(yōu)點(diǎn)：只需要對(duì)父元素進(jìn)行設(shè)置

缺點(diǎn)：flex不兼容低版本IE

垂直居中對(duì)于子元素是單行內(nèi)聯(lián)文本、多行內(nèi)聯(lián)文本以及塊狀元素采用的方案是不同的。

父元素一定，子元素為單行內(nèi)聯(lián)文本：設(shè)置父元素的height等于行高line-height

父元素一定，子元素為多行內(nèi)聯(lián)文本：設(shè)置父元素的display:table-cell或inline-block，再設(shè)置vertical-align:middle;

塊狀元素:設(shè)置子元素position:absolute 并設(shè)置top、bottom為0，父元素要設(shè)置定位為static以外的值，margin:auto;

通用方案: flex布局，給父元素設(shè)置{display:flex; align-items:center;}

方法一：table-cell + vertical-align

設(shè)置：子容器高度不固定，對(duì)父元素設(shè)置display:table-cell(parent變?yōu)閱卧瘢?，繼續(xù)設(shè)置vertical-align:center（使inline元素垂直居中）;

優(yōu)點(diǎn)：兼容性好（支持 IE 8）

缺點(diǎn)：IE 8 以下版本需要調(diào)整頁(yè)面結(jié)構(gòu)至 table

方法二：absolute + transform

設(shè)置：對(duì)父元素設(shè)置position:realatve(使其作為參照物)，對(duì)子元素設(shè)置position:absolute;left:50%(絕對(duì)定位元素的寬度也隨內(nèi)容而定)，然后對(duì)子元素設(shè)置transform:translateY(-50%)（兼容IE6、7 時(shí)，替換div結(jié)構(gòu)為table結(jié)構(gòu)即可）;

優(yōu)點(diǎn)： 居中元素不會(huì)對(duì)其他元素造成影響

缺點(diǎn)：transform不兼容低版本IE

方法三：flex + align-items

設(shè)置：對(duì)父元素設(shè)置display:flex(align-items默認(rèn)屬性為stretch),繼而設(shè)置align-items:center即可;

優(yōu)點(diǎn)： 只需要對(duì)父元素進(jìn)行設(shè)置

缺點(diǎn)：flex align-items不兼容低版本IE

結(jié)合以上介紹到的水平和垂直居中方法進(jìn)行設(shè)置

方法一：text-align + inline-block + table-cell + vertical-align

方法二：absolute + transform

方法三：flex + justify-content + align-items

1.一列定寬，一列自適應(yīng)寬度（float+margin）

預(yù)覽 源碼

2.一列定寬，一列自適應(yīng)寬度（float+margin）fix 改良版

預(yù)覽 源碼

NOTE：此方法不會(huì)存在 IE 6 中3像素的 BUG，但 .left 不可選擇， 需要設(shè)置 .left {position: relative} 來(lái)提高層級(jí)。 此方法可以適用于多版本瀏覽器（包括 IE6）。缺點(diǎn)是多余的 HTML 文本結(jié)構(gòu)。

3.一列定寬，一列自適應(yīng)寬度( float + overflow )

預(yù)覽 源碼

4.一列定寬，一列自適應(yīng)寬度( table + table-cell )

預(yù)覽 源碼

5.一列定寬，一列自適應(yīng)寬度( flex )

預(yù)覽 源碼

基于上面對(duì)于一列定寬一列自適應(yīng)的需求實(shí)現(xiàn)，多列定寬只需要在原有一列定寬的基礎(chǔ)上添加新的列即可，最后的列依然會(huì)自適應(yīng)剩余寬度。

以 flex 的實(shí)現(xiàn)為基礎(chǔ)可以作如下改造：

   

       

           
.left
           
左側(cè)定寬
       
       
       

           
.center
           
第二列定寬
       
       
       

           
.content
           
flex：1 充滿剩余空間，形成自適應(yīng)效果，不設(shè)置的話默認(rèn)為內(nèi)容寬度
       
   

   

基于以上一列定寬一列自適應(yīng)的實(shí)現(xiàn)，進(jìn)行改造，左側(cè)不定寬區(qū)域的寬度任意（也可以由內(nèi)部的內(nèi)容來(lái)決定寬度就可以實(shí)現(xiàn)不定寬且自適應(yīng)），繼續(xù)增加一列即可變?yōu)槎嗔校己芊奖銓?shí)現(xiàn)

1.多列等分布局（float）

預(yù)覽 源碼

2.多列等分布局（table）

預(yù)覽 源碼

3.多列等分布局（flex）

預(yù)覽 源碼

1.多列等高布局（table）

預(yù)覽 源碼

2.多列等高布局（flex）

預(yù)覽 源碼

1.彈性全屏布局（position）

預(yù)覽 源碼

2.彈性全屏布局（flex）

預(yù)覽 源碼

3.百分比布局，以上寬度設(shè)置更改為百分比即可

4.根據(jù)內(nèi)容完全自適應(yīng)，position有限制無(wú)法滿足，flex可以做到