CSS佈局中必須瞭解的屬性

CSS 佈局主要有兩種方式：

1. 傳統佈局方式：基於盒模型，依賴 display、position、float 屬性。
2. 現代佈局方式：Flex 佈局和 Grid 佈局。

本文主要講解傳統的佈局方式，直接分析經常使用的屬性。

但願你已經掌握 CSS 基礎知識，也瞭解文檔流、盒模型這些核心概念。

直接開始吧！

1. box-sizing 屬性

box-sizing屬性規定了盒模型寬高的計算方式。

content-box

默認值，即標準盒模型，元素的 width/height 值等於內容的寬高。

border-box

表示 IE 盒模型，元素的 width/height 值等於內容的寬高+boder+padding。

box-sizing是比較新的屬性，須要添加-webkit- 和 -moz- 前綴。支持IE8+。

* {
  -webkit-box-sizing: border-box;     
  -moz-box-sizing: border-box;         
  box-sizing: border-box; 
}
複製代碼

2. display 屬性

display屬性有兩個做用：①定義元素的類型。②控制其子元素的的佈局。

display 屬性是 CSS 佈局中的核心，對於不一樣元素，它的默認值有時是不同。

none

display: none表示在不刪除元素的狀況下，隱藏元素，而且不會佔據原來的空間。

和visibility: hidden不同，它佔據原來的空間。

一些特殊元素，默認的 display 值是它，例如<script></script> 。

block

表示塊級元素，好比<div></div>。

inline

表示行內元素，好比<span></span>。

inline-block

表示行內塊級元素，元素兼具 block 和 inline 的特色。

flex

表示採用 Flex 佈局的元素。

Flex 是 Flexible Box 的縮寫，意爲「彈性佈局」，任何一個元素均可以指定爲 Flex 佈局。

Flex 佈局的相關屬性能夠分紅兩撥，一波做用在父元素（Flex 容器），一波做用在子元素（Flex 子項）。

父元素	子元素
flex-direction	order
flex-wrap	flex-grow
flex-flow	flex-shrink
justify-content	flex-basis
align-items	flex
align-content	align-self

瞭解更多 Flex 佈局，點擊連接。

grid

表示採用 Grid 網格佈局的元素。

網格佈局和 Flex 佈局有必定類似，但也存在重大區別。

瞭解更多網格佈局，點擊連接。

另外 display 屬性的取值，遠不止這些，這裏總結經常使用的取值。

3. position 屬性

position屬性規定元素的定位方式。

元素設置了position 屬性，經常和 top/right/bottom/left 屬性一塊兒使用。

static

默認值，表示元素天然放在文檔流中，沒有特殊的地方。

具體表現爲 top/right/bottom/left 屬性對元素無效。

相反的，當position屬性值不是static時，那麼就稱元素爲 positioned 元素，也能夠理解爲元素被 positioned。

除了static，positon屬性值還有如下幾種：

relative

表示相對定位元素。

經過設置 top/right/bottom/left 屬性，元素會偏離原來的位置，但不會影響到其餘元素。

經過一個簡單的例子，你就明白了。

圖中三個 div 色塊本來正常擺放，如今對綠色 div 添加如下屬性。

.div2 {
  position: relative;
  top: 20px;
  left: 20px;
}
複製代碼

能夠發現，綠色 div 偏離了原來的位置，而它周圍的元素沒有變化。

absolute & fixed

absolute 和 fixed 放在一塊兒理解，都表示絕對定位元素。

絕對定位元素會脫離文檔流，原來的位置會空出來，給其餘元素。

其中，fixed相對瀏覽器窗口固定，無論頁面怎麼滑動，位置都不會變。

請看下面的例子。

綠色色塊添加了如下屬性。

.green {
  position: fixed;
  top: 20px;
  left: 20px;
}
複製代碼

須要注意，移動端對 fixed 的支持不好，請儘可能避免。這裏有相應的案例。

absolute稍稍棘手一些，它相對於最近的 positioned 父元素固定，也就是說，會隨頁面滾動。

若是沒有找到 positioned 父元素，就相對於 body 元素。

請看下面的例子。

父元素下有兩個子元素，本來規規矩矩排列着。

如今咱們將父元素設置成 positioned 元素，就 relative 吧！

而後給綠色的子元素添加如下屬性。

.green {
  position: absolute;
  bottom: 20px;
  right: 20px;
}
複製代碼

能夠看到，綠色出軌了，它相對於父元素右邊和底部的距離是 20px。

同時，原來的位置被紅色元素佔領了。

sticky

sticky 表示「粘性」，是 relative和 fixed 的結合。

最初，元素表現爲 relative，相對於原來的位置進行偏移；滾動出屏幕後，由表現爲 fixed 定位，相對於瀏覽器定位。

不過，IE 瀏覽器不支持，並且 Chrome 曾經也放棄過。

4. float 屬性

表示浮動屬性，設計初衷是爲了實現文字環繞。

可能你以前據說，float 屬性會使元素脫離文檔流。

但我不建議你這麼理解，這是爲了和前面的 absolute 或 fixed 做區分。

由於，在文字環繞圖片的例子中，雖然圖片設置了左浮動，但文字仍是繞着圖片走，說明浮動元素還以某種方式影響着原來的佈局。

left & right

left 和 right 相似，下面就以 left 爲例。

請看下面的例子。

圖中父元素高度自適應，三個子元素把父元素給撐開了。

如今，給三個子元素添加float: left屬性後，父元素的高度消失了。

這也是浮動元素帶來的一個影響，會使父元素高度塌陷。

這個很好理解，子元素都浮起來了，沒有東西把父元素撐開，天然就癟了。

那麼，怎麼把父元素的高度變回來呢？

常見的作法有兩種：

1. 給父元素添加overflow: hidden屬性。
2. 使用clear: both屬性。

clear 屬性，即清除浮動。通常使用clear:both。

由於clear:left與clear:right均可以用clear:both實現。

上面的例子中，能夠在子元素後面添加一個 div 元素，屬性設置爲style="clear: both"。

clear 屬性還有一些重要的點，你可經過連接瞭解；本文主要講 CSS 佈局，就不展開討論。

none

默認值，表示不浮動。

5. 其餘

margin 屬性

當塊級元素設置了margin: 0 auto，該元素就實現水平方向居中。這種方式的兼容性是極好的。

不過，你須要爲元素設置寬度，防止它撐滿整個容器。

左右外邊距爲auto，迫使元素將剩餘的寬度一分爲二成爲左右外邊距。

須要注意，當瀏覽器窗口比元素的寬度還要窄時，瀏覽器會出現一個水平滾動條。

此時，能夠用 max-width 替代 width。表示，元素寬度最大能夠這麼多了，但若是父元素不夠的話，小點也不要緊。

inline-block VS float

當咱們要實現這樣的水平列表時，有兩種方式能夠實現：

1. display: inline-blick
2. float: left

先說結論，儘可能使用inline-block，緣由以下。

• float 有高度塌陷的問題，須要清除浮動。
• 當列表元素的有不一樣高度時，float 會出現幾個元素擠在同一行，致使混亂。

使用 inline-block有一下注意事項。

• 同一行的 inline-block 元素，底部對齊，能夠添加vertical-align: top來改變。

• 須要對 IE6/7 作兼容處理：zoom: 1。

5. 總結

最後，總結一下 CSS 佈局相關概念。

概念	屬性
盒模型	box-sizing: border-box
浮動	flood: left | right
相對定位	position: relative
絕對定位	position: absolute | fixed
Flex 佈局	display: flex
網格佈局	display: grid

• 此外還有display: table-cell，應用場景很少，就不展開了。

---

參考連接：

學習CSS佈局

準確理解CSS clear:left/right的含義及實際用途

CSS佈局--float篇

使用float形成容器高度塌陷的原理與解決方法