正常的默認(rèn)文檔流方式布局就不說(shuō)了。主要說(shuō)以下幾種布局：
- table布局
- float布局
- position定位布局
- flex布局
- grid布局
- column多列布局
- 移動(dòng)端布局
css 布局的幾種方式
1. table布局
兩種方式實(shí)現(xiàn)表格布局：HTML Table標(biāo)簽 和 CSS display:table 相關(guān)屬性。
HTML Table是指使用原生的<table>標(biāo)簽，而CSS Table是指用CSS屬性模仿HTML 表格的模型。對(duì)應(yīng)表:
css table 與HTML table 對(duì)應(yīng)表
應(yīng)用:
- 動(dòng)態(tài)垂直居中對(duì)齊,用display:table實(shí)現(xiàn)居中對(duì)齊
- 動(dòng)態(tài)水平居中對(duì)齊,CSS布局：動(dòng)態(tài)水平居中對(duì)齊
-
使用display:table實(shí)現(xiàn)的圣杯布局
缺點(diǎn): - table比其它html標(biāo)記占更多的字節(jié)。(造成下載時(shí)間延遲,占用服務(wù)器更多流量資源)
- table會(huì)阻擋瀏覽器渲染引擎的渲染順序。(會(huì)延遲頁(yè)面的生成速度,讓用戶等待更久的時(shí)間)
- table里顯示圖片時(shí)需要你把單個(gè)、有邏輯性的圖片切成多個(gè)圖。(增加設(shè)計(jì)的復(fù)雜度,增加頁(yè)面加載時(shí)間,增加http會(huì)話數(shù))
- 在某些瀏覽器中,table里的文字的拷貝會(huì)出現(xiàn)問(wèn)題。(會(huì)讓用戶不悅)
- table會(huì)影響其內(nèi)部的某些布局屬性的生效(比如<td>里的元素的height:100%) (限制頁(yè)面設(shè)計(jì)的自由性)
- 一旦學(xué)了CSS的知識(shí),你會(huì)發(fā)現(xiàn)使用table做頁(yè)面布局會(huì)變得更麻煩。(先花時(shí)間學(xué)一些CSS知識(shí),會(huì)省去你以后大量的時(shí)間)
- ‘table對(duì)’對(duì)于頁(yè)面布局來(lái)說(shuō),從語(yǔ)義上看是不正確的。(它描述的是表現(xiàn),而不是內(nèi)容)
- table代碼會(huì)讓閱讀者抓狂。(不但無(wú)法利用CSS,而且會(huì)不知所云,尤其在進(jìn)行頁(yè)面改版或內(nèi)容抽取的時(shí)候)
- table一旦設(shè)計(jì)完成就變成死的,很難通過(guò)CSS讓它展現(xiàn)新的面貌。
- 對(duì) seo 不友好
- 嵌套復(fù)雜，閱讀性變差
參考鏈接：
https://www.cnblogs.com/guoyong-feng/p/6076058.html
https://blog.csdn.net/screener/article/details/80895863
我的理解：除了本身就是表格內(nèi)容的，還是不要用table布局。
2. float布局
水很深，坑很多，很復(fù)雜，用的也多。
特性:
- 元素‘浮動(dòng)’，脫離文檔流，但不脫離文本流
- 對(duì)自身影響，形成“塊”（BFC），位置盡量靠上，位置盡量靠左(右)
- 對(duì)兄弟元素的影響，上面貼非float元素（一般float元素上面貼的都是非float元素），旁邊貼float元素（靠左，或者靠右的時(shí)候貼float元素），不影響其它塊級(jí)元素位置，影響其它塊級(jí)元素內(nèi)部文本（后面兩點(diǎn)就是特性一說(shuō)的脫離文檔流，不脫離文本流）
- 對(duì)父級(jí)元素的影響，從布局上“消失”（相當(dāng)于從父級(jí)的空間里面消失了，消失了意味著父級(jí)不會(huì)再管他的寬高），高度塌陷（因?yàn)樵诟讣?jí)的空間里消失了，所以父級(jí)對(duì)高度有可能會(huì)塌陷，防止塌陷的辦法就是清除浮動(dòng)）
應(yīng)用：
- 兩欄布局(定位，flex,grid也可以實(shí)現(xiàn))
- 三欄布局 、雙飛翼布局、圣杯布局 (定位，flex,grid也可以實(shí)現(xiàn))
清除浮動(dòng)的方法:
http://www.itdecent.cn/p/1ff30625c250
3. position定位布局
https://www.runoob.com/cssref/pr-class-position.html
position屬性
4. flex布局
5. grid布局
阮一峰-grid布局
grid是二維布局，很靈活，適合整體構(gòu)架，而flex是一維布局，適合處理局部細(xì)節(jié)。
6. column多列布局
多列屬性
7. 移動(dòng)端布局
- meta標(biāo)簽
<meta name="viewport" content="width=device-width, initial-scale=1">
image.png
移動(dòng)前端開(kāi)發(fā)之viewport的深入理解
其中，width = device-width 這一句的意思是讓頁(yè)面的寬度等于屏幕的寬度。 - 使用 rem 單位
- media query
菜鳥(niǎo)教程- @media 查詢(xún)
菜鳥(niǎo)教程- 多媒體查詢(xún)
