大家好，我是IT修真院北京分院25期的學(xué)員，一枚正直純潔善良的web前端程序員
今天給大家分享一下，修真院官網(wǎng)css任務(wù)13，深度思考中的知識點(diǎn)——移動端有哪些常見的布局方式？
1.背景介紹
當(dāng)IE8發(fā)布時，它將支持很多新的CSS display屬性值，包括與表格相關(guān)的屬性值：table、table-row和table-cell，（ie6.7不支持） 。它標(biāo)志著復(fù)雜CSS布局技術(shù)的結(jié)束，同時也給了HTML表格布局致命一擊。最終，使用CSS布局來制作出類似于table布局的柵格將會變得十分迅速和簡單。
2.知識剖析
給HTML元素指定與表格相關(guān)的display屬性值，使得它們像表格元素那樣渲染。以下是這些可用的display屬性值：
table
使該元素按table樣式渲染
table-row
使該元素按tr樣式渲染
table-cell
使該元素按td樣式渲染
table-row-group
使該元素按tbody樣式渲染
table-header-group
使該元素按thead樣式渲染
table-footer-group
使該元素按tfoot樣式渲染
table-caption
使該元素按caption樣式渲染
table-column
使該元素按col樣式渲染
table-column-group
使該元素按colgroup樣式渲染
table-cell特性
對寬度高度敏感
響應(yīng)padding屬性
內(nèi)容溢出時會自動撐開父元素
3.常見問題
1.大小不固定元素的垂直居中
2.兩列自適應(yīng)布局
3.等高布局
4.和inline-block組合使用
5.列表布局
4.解決方案
1.大小不固定元素的垂直居中
display：table-cell 加上 vertical-align：middle 使高度不同的 元素都垂直居中，其中div的display：inline-block使幾個div在同一行顯示。
2.兩列自適應(yīng)布局
display:table-cell 元素生成的匿名table默認(rèn)table-layout:auto。寬度將 基于單元格內(nèi)容自動調(diào)整。當(dāng)內(nèi)容足夠多將寬度完全撐開時，再讓某個元素（例如關(guān)閉按鈕）右側(cè) 定位就會有問題。所以設(shè)置width:3000px的用途是盡可能的寬的意思。
3.等高布局
4.和inline-block組合使用
A和B的父元素均設(shè)置了display：table-cell屬性，所以 它們均勻占據(jù)設(shè)置了display：table的div元素。而A和B元素設(shè)置display：inline-block是為了讓它們相應(yīng)text-align的屬性設(shè)置。
5.列表布局
這類布局常用浮動布局（給每個li加上float：left屬性）實(shí)現(xiàn)，但這樣做有明顯不足：
需要清除浮動
不支持不定高列表的浮動
display：table-cell可以代替浮動布局，但是其不是最好的方法。其他方法有待進(jìn)一步學(xué)習(xí)！
5.編碼實(shí)戰(zhàn)
6.擴(kuò)展思考
table布局有什么缺點(diǎn)，為什么漸漸被淘汰？
Table會阻擋瀏覽器渲染引擎的渲染順序。(會延遲頁面的生成速度，讓用戶等待更久的時間。)
Table里顯示圖片時需要你把單個、有邏輯性的圖片切成多個圖。(增加設(shè)計的復(fù)雜度，增加頁面加載時間，增加HTTP會話數(shù)。)
在某些瀏覽器中Table里的文字的拷貝會出現(xiàn)問題
Table會影響其內(nèi)部的某些布局屬性的生效(比如里的元素的height:100%)
Table對對于頁面布局來說，從語義上看是不正確的。
table一旦設(shè)計完成就變成死的，很難通過CSS讓它展現(xiàn)新的面貌。
7.參考文獻(xiàn)
我所知道的幾種display:table-cell的應(yīng)用
8.更多討論
視頻:密碼: nwn3
技能樹.IT修真院
“我們相信人人都可以成為一個工程師，現(xiàn)在開始，找個師兄，帶你入門，掌控自己學(xué)習(xí)的節(jié)奏，學(xué)習(xí)的路上不再迷?！?。
這里是技能樹.IT修真院，成千上萬的師兄在這里找到了自己的學(xué)習(xí)路線，學(xué)習(xí)透明化，成長可見化，師兄1對1免費(fèi)指導(dǎo)?？靵砼c我一起學(xué)習(xí)吧?！
