正常的默認(rèn)文檔流方式布局就不說了糠排。主要說以下幾種布局：
- 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ì)延遲頁面的生成速度,讓用戶等待更久的時(shí)間)
- table里顯示圖片時(shí)需要你把單個(gè)、有邏輯性的圖片切成多個(gè)圖稚照。(增加設(shè)計(jì)的復(fù)雜度,增加頁面加載時(shí)間,增加http會(huì)話數(shù))
- 在某些瀏覽器中,table里的文字的拷貝會(huì)出現(xiàn)問題蹂空。(會(huì)讓用戶不悅)
- table會(huì)影響其內(nèi)部的某些布局屬性的生效(比如<td>里的元素的height:100%) (限制頁面設(shè)計(jì)的自由性)
- 一旦學(xué)了CSS的知識(shí),你會(huì)發(fā)現(xiàn)使用table做頁面布局會(huì)變得更麻煩。(先花時(shí)間學(xué)一些CSS知識(shí),會(huì)省去你以后大量的時(shí)間)
- ‘table對(duì)’對(duì)于頁面布局來說,從語義上看是不正確的锐锣。(它描述的是表現(xiàn),而不是內(nèi)容)
- table代碼會(huì)讓閱讀者抓狂腌闯。(不但無法利用CSS,而且會(huì)不知所云,尤其在進(jìn)行頁面改版或內(nèi)容抽取的時(shí)候)
- table一旦設(shè)計(jì)完成就變成死的,很難通過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)就是特性一說的脫離文檔流，不脫離文本流）
- 對(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.reibang.com/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)前端開發(fā)之viewport的深入理解
其中，width = device-width 這一句的意思是讓頁面的寬度等于屏幕的寬度句灌。 - 使用 rem 單位
- media query
菜鳥教程- @media 查詢
菜鳥教程- 多媒體查詢
