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