CSS

盒子模型

實際上網頁中的每一個標籤都可以看成一個盒子模型，而這個盒子模型從內到外有以下這幾個元素組成

• content 內容區域

• padding 內邊距

• border 邊框

• margin 外邊距

並且margin, border, padding分別有上下左右4個值

如上圖所示，可以很容易的得出盒子的大小，也就是對應標籤真正大小。
所謂的寬高不是width和height,而是盒子的寬度和高度。

這個種寫法會導致 margin-left:20px失效。
 

在使用盒子模型進行佈局的時候要格外注意的一個問題是： margin塌陷。

上述程式碼實際效果如下圖所示

肉色部分是Chrome瀏覽器檢查div.d2屬性的margin邊距，很明顯它的top是30px,也就是說margin距離是距離上下左右容器border的距離，所以造成了div.d1的20px的margin-bottom塌陷在div.d2的margin-top裡了。


在計算盒子之間的距離時需要考慮margin，但margin也有一個很好用的方法使塊劇中：

再說行內元素的盒模型與塊級元素的盒模型之間的差異：

• 行內元素不能設定寬和高。行內元素的寬高是由其內容決定的；而塊級元素可以設定寬和高。

• 塊級元素會獨佔一行。而行內元素卻部能夠獨佔一行，只能和其他的行內元素共用一行。

• 如果塊級元素不設定寬度，那麼塊級元素會自動的沾滿父元素的全部寬度。

可以通過設定dispaly屬性將元素在行內和塊之間轉換，其引數包括：

• inline

• block

• inline-block

標準文件流

標準文件流實際上是一個不太好的翻譯，一開始不是很理解，查了一下發現，標準中說的是 normal flow 翻譯為普通流或者常規流更好。

當瀏覽器解析網頁的時候，遵循從上往下，從左到右的順序。
一旦元素脫離了標準文件流的時候，行內元素和塊元素的特性將消失。

標準文件流的常見現象：

1. 空白摺疊現象。

2. 高矮不齊，底邊對齊。

3. 自動換行，一行寫不完，自動換行。

4. 單詞沒寫完不換行。

浮動

float: left / right;

浮動的特點：

1. 脫離標準文件流，元素一旦脫離標準文件流(脫標)，後面的元素會佔據浮動元素原本的位置，而且元素就不再遵守文件流中塊級元素和行內元素的特性。

2. 元素浮動會脫離文件流但是不會脫離文字流，所以會產生字圍效果。

3. 相互貼靠。

浮動會帶來的影響：

• 能讓浮動後的元素佈局混亂

• 子元素浮動會對父元素產生影響

HTML程式碼：

此時效果如下圖：

如何清除浮動帶來的影響：

1.首先可以通過為父元素設定高度來消除浮動：

最後：“相信有很多想學前端的小夥伴，今年年初我花了一個月整理了一份最適合2018年學習的web前端乾貨，從最基礎的HTML+CSS+JS到移動端HTML5等都有整理，送給每一位前端小夥伴，53763，1707這裡是小白聚集地，歡迎初學和進階中的小夥伴。”

祝大家早日學有所成，拿到滿意offer，快速升職加薪，走上人生巔峰。