盒模型

1. 爲什麼存在兩種盒模型

第一種是w3c的標準模型，另一種是IE的傳統模型。

2. 區別

 IE的content部分把 border 和 padding計算了進去

 

1. 通過哪個CSS屬性可以設置width的基準

box-sizing屬性，能夠事先定義盒模型的尺寸解析方式，其語法規則如下

box-sizing: content-box | border-box | inherit

1. 盒模型主要有哪些屬性

這張3D圖網上看到的感覺比較好理解盒模型就放這裏了

margin	用來設置內容與內容之間的距離
padding	用來設置內容與邊框的距離
border	內容邊框線，用來設置內容的邊框
content	放置內容的部分

 

1. 這些屬性對塊級元素和行內元素分別有什麼效果

塊級元素會獨佔一行,默認情況下,其寬度自動填滿其父元素寬度.

行內元素不會獨佔一行,相鄰的行內元素會排列在同一行裏,直到一行排不下,纔會換行,其寬度隨元素的內容而變化

 

1. 塊級元素可以設置width,height屬性.
2. 行內元素設置width,height屬性無效，它的長度高度主要根據內容決定.
3. 塊級元素即使設置了寬度,仍然是獨佔一行.
4. 塊級元素可以設置margin和padding屬性.
5. 行內元素的margin和padding屬性,水平方向的padding-left,padding-right,margin-left,margin- right都產生邊距效果,但豎直方向的padding-top,padding-bottom,margin-top,margin-bottom卻不 會產生邊距效果.
6. 塊級元素對應於display:block.
7. 行內元素對應於display:inline.