css 布局的幾種方式
一、總結
一句話總結：
布局比較常用的是浮動布局和彈性布局和層布局（定位），還有另一個維度的響應式的布局
1、響應式布局的幾種方式？
1、meta 標簽：meta name="viewport" content="width=device-width, initial-scale=1"
2、rem：rem 指的是 html 元素的 font-size，html 元素的 font-size 默認是 16px，所以 1 rem = 16px；然后根據 rem 來計算各個元素的寬高，然后配合 media query 就可以實現自適應。
3、media query（媒體查詢）：@media screen and (max-width: 360px)
二、css 布局的幾種方式
轉自或參考：css 布局的幾種方式_zhang6223284的博客-CSDN博客
https://blog.csdn.net/zhang6223284/article/details/81909600
CSS 的布局應該是 CSS 體系中的重中之重了，主要的布局方式有 table 表格布局（早期），float 浮動布局和 flex 布局，還有針對於移動端的響應式布局，不論是工作還是面試都是非常重要的知識。
1 table 布局（現在用得少）
table 布局是最簡單的布局方式了，下面我們來看一個簡單的例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 布局</title>
</head>
<style> .container{ height:200px; width: 200px; } .left{ background-color: red } .right{ background-color: green } </style>
<body>
<table class=container>
<tbody>
<tr>
<td class=left> 左 </td>
<td class=right> 右 </td>
</tr>
</tbody>
</table>
</body>
</html>效果如下
table 的特性決定了它非常適合用來做布局，並且表格中的內容可以自動居中，這是之前用的特別多的一種布局方式
而且也加入了 display：table;dispaly:table-cell 來支持 teble 布局。用法如下
<style> .table{ display: table } .left{ display: table-cell; } .right{ display: table-cell } </style>
<div class=table>
<div class=left></div>
<div class=right></div>
</div>
但是它也有自身的局限性，比如 table 比其它 html 標記占更多的字節（造成下載時間延遲,占用服務器更多流量資源），table 會阻擋瀏覽器渲染引擎的渲染順序。(會延遲頁面的生成速度,讓用戶等待更久的時間)，但是某些情況下，當采用其他方式不能很好的達到自己的效果時，采用 table 布局能適應當前場景。
2 flex 布局
2.1 盒模型
在介紹 flex 布局之前，我們先了解一下盒模型的概念，這個是 css 最基礎的概念，首先，我們引用一張圖來解釋
這是百度百科里面盒模型的一張圖。首先最中間的是 content 區域，即我們常說的內容區。我們通常設置的 height 和 width 就是設置的這部分的長度。內容區外部是 padding 區域，這部分指的是內容區到邊框的區域，即我們常說的內邊距。然后就是 border 區，border 區本身也是占據空間的。邊框外面是 margin 區，這部分指的是當前元素與其他元素的距離，即常說的外邊距。
首先要明白我們平常說的寬度和高度指的是內容區的寬度和高度。
然后計算一個盒子占用的空間是 content + padding + border + margin
2.2 display / poistion
這里還要介紹兩個屬性，display 和 poistion
display 有如下幾個值
- block（元素表現為塊級元素，有固定寬高，獨占一行）
- inline（元素表現為行內元素，不能設置寬高）
- inline-block （對外表現為行內元素，對內表現為塊級元素）3
position 有如下幾個值
- static（默認情況，存在文檔流當中）
- relative（根據元素本身原來所應該處的位置偏移，不會改變布局的計算）
- absolute（絕對定位，脫離文檔流，不會對別的元素造成影響，相對的是父級最近的 relative 或者 absolute 定位元素）
- fixed（絕對定位，脫離文檔流，相對於的是屏幕，就是那些浮動的廣告那樣，怎么拉都固定在同一個位置，而 absolute 元素離開屏幕就看不見了）
position 的層疊是按順序層疊的，不過可以通過設置 z-index 來改變層疊順序，只有 relative，absolute，fixed 可以設置 z-index。
2.3 flexbox 布局
flexbox 布局即彈性盒子布局，它的特點是盒子本來就是並列的，只需要指定寬度，來看一個經典的三欄布局的例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 布局</title>
</head>
<style> .container{ height:200px; width: 200px; display: flex } .left{ background-color: red; flex: 1; } .middle{ background-color: yellow; flex: 1; } .right{ background-color: green; flex: 1; } </style>
<body>
<div class=container>
<div class=left></div>
<div class=middle></div>
<div class=right></div>
</div>
</body>
</html>效果如下
有時我們可能需要兩邊定寬，中間自適應，那么可以這樣寫
.left{ background-color: red; width: 20px; }
.middle{ background-color: yellow; flex: 1; }
.right{ background-color: green; width: 20px; }效果如下
如果想深入了解可以看阮一峰老師的文章
但是 flexbox 布局方式瀏覽器的支持不是太好，有一些兼容性的問題，但是是未來布局的趨勢。
3 float 布局
float 布局應該是目前各大網站用的最多的一種布局方式了，但是也特別復雜，這里詳細講一下
首先，什么是浮動？
浮動元素是脫離文檔流的，但不脫離文本流，這是什么意思呢，用過 word 的應該知道有一種圖片環繞的方式是文字環繞吧，就是這種效果。
那么它有什么特點呢
- 對自身的影響
- float 元素可以形成塊，如 span 元素。可以讓行內元素也擁有寬和高，因為塊級元素具有寬高
- 浮動元素的位置盡量靠上
- 盡量靠左（float:left）或右（float:right），如果那一行滿足不了浮動元素的寬度要求，則元素會往下掉
- 對兄弟元素的影響
- 不影響其他塊級元素的位置
- 影響其他塊級元素的文本
- 上面貼非 float 元素
- 旁邊貼 float 元素或者邊框
- 對父級元素的影響
- 從布局上 “消失”
- 高度塌陷
3.1 高度塌陷
什么是高度塌陷，舉個例子吧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 布局</title>
</head>
<style> *{ margin: 0; padding: 0; } .container{ width: 200px; background-color:red; } .left{ background-color: yellow; float: left; height: 50px; width:50px; } .right{ background-color: yellow; float: right; height: 50px; width:50px; } </style>
<body>
<div class=container>
<span class=left>float</span>
<span>我是字</span>
<span class=right>float</span>
</div>
<div class="container" style="height: 200px;background: blue">
</div>
</body>
</html>效果如下
從圖中可以看出，兩個 float 元素雖然包含在第一個 container 中，但是卻超出了第一個 container 的范圍，在文檔流中，父元素的高度默認是被子元素撐開的，也就是子元素多高，父元素就多高。
但是當為子元素設置浮動以后，子元素會完全脫離文檔流，此時將會導致子元素無法撐起父元素的高度，導致父元素的高度塌陷。
解決辦法有下面幾種
-
父元素設置 overflow: auto 或者 overflow: hidden
效果如下
-
給父元素加一個 after 偽類
.container::after{ content:''; clear:both; display:block; visibility:hidden; height:0; }效果如下
這也是目前各大網站比較主流的清除浮動的方式，還有一些其他方式這里就不詳細講了，畢竟這是一篇講布局的文章。
3.2 兩欄布局
首先我們要明白為什么可以用 float 實現布局。其實上面的例子我們大概就可以看出來了，黃紅黃這不就是一個標准的三欄布局嗎。其實並沒有，我們看看下面的例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 布局</title>
</head>
<style> *{ margin: 0; padding: 0; } .container{ width: 400px; height: 200px; } .left{ background-color: yellow; float: left; height: 100%; width:100px; } .right{ background-color: red; margin-left: 100px; height:100%; } .container::after{ content: ''; display: block; visibility: hidden; clear: both } </style>
<body>
<div class=container>
<div class=left></div>
<div class=right></div>
</div>
</body>
</html>效果如下
上面代碼中最重要的是 margin-left: 100px;，這一句將浮動元素的位置空了出來，所以右邊欄里面的元素不會影響到浮動的 div。
這就是浮動布局的基本思想。
3.3 三欄布局
講完兩欄布局再講一下三欄布局，思路主要是左邊一個浮動元素，右邊一個浮動元素。這里有個小問題，中間的元素要寫在最后，因為中間元素假設有塊級元素的話，會影響右邊浮動元素的定位，這里演示一下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 布局</title>
</head>
<style> *{ margin: 0; padding: 0; } .container{ width: 400px; height: 200px; } .left{ background-color: yellow; float: left; height: 100%; width:100px; } .right{ background-color: green; float: right; height: 100%; width:100px; } .middle{ background-color: red; margin-left: 100px; margin-right: 100px; height:100%; } .container::after{ content: ''; display: block; visibility: hidden; clear: both } </style>
<body>
<div class=container>
<div class=left></div>
<div class="middle"></div>
<div class=right></div>
</div>
</body>
</html>
因為浮動元素會把塊級元素的位置空出來，所以這里右邊的浮動元素把上面的位置空了下來，所以正確的寫法應該是
<div class=container>
<div class=left></div>
<div class=right></div>
<div class="middle"></div>
</div>效果如下
這樣我們就實現了最基本的三欄布局
4 響應式布局
4.1 meta 標簽
最簡單的處理方式是加上一個 meta 標簽
<meta name="viewport" content="width=device-width, initial-scale=1">其中，width = device-width 這一句的意思是讓頁面的寬度等於屏幕的寬度。
4.2 使用 rem
rem 指的是 html 元素的 font-size，html 元素的 font-size 默認是 16px，所以 1 rem = 16px；然后根據 rem 來計算各個元素的寬高，然后配合 media query 就可以實現自適應。
4.3 media query
css2 允許用戶根據特定的 media 類型定制樣式，基本語法如下
@media screen and (max-width: 360px) {
html { font-size: 12px; }
}意思就是： 當屏幕的寬度小於等於 360 px 的時候 html 的字體大小為 12 px。
有一個需要注意的點是范圍大的要放在上面，范圍小的放在下面。假設有兩個樣式，一個適應 360px 以下，一個適應 640px 以下，如果 360px 的放在上面，但是小於 360px 同樣滿足小於 640px，這就不是我們想要的結果了，所以范圍大的需要放在上面。
5 總結
這里只是簡單的介紹了一下 css 的各種布局，如果想深入了解的話建議多看看相關的文章，比如浮動布局還包括聖杯布局，雙飛翼布局等，本文只是 css 布局的基本入門，並不能真正滿足一些需求，所以如果想深入了解的話還是需要多看看相關的文章、