盒子模型總結

什麼是盒子模型？

• 網頁設計中常聽的屬性名：內容(content)、內邊距(padding)、邊框(border)、外邊距(margin)， CSS盒子模式都具有這些屬性。這些屬性咱們能夠用平常生活中的常見事物——盒子做一個比喻來理解，因此叫它盒子模式。CSS盒子模型就是在網頁設計中常常用到的CSS技術所使用的一種思惟模型。
• 分別是margin，border,padding，widht，height，backgruong-color這六大屬性。
• 標籤分爲塊級元素和行內元素，咱們能夠形象比喻其爲男女元素。常見的男（塊級）元素有div、p、h1~h6、ul、ol、dl、li、dd、table、hr等。常見的女（行內）元素有span、lable、input、big、textarea、select等等。
• 對於男盒子來講，6大屬性均可以設置並起到做用。對於女盒子來講，widht，height是不起做用的。

如何計算盒子模型在網頁上佔據的大小？

• 在網頁上佔據的寬度：左右的margin+左右的border+左右的padding+width。
• 在網頁上佔據的高度：上下的margin+上下的border+上下的padding+height。

  

• 若是一個div沒有設置widht，那麼它會佔據父元素的100%。若是它的父元素的寬度是1 000px，那麼這個div的寬度也是1000px。
• 可是須要注意的是div的這個1000是指div所在頁面上佔據的寬度而不是它真實的寬度。 這裏的1000px = 左右的margin+左右的border+左右的padding+真實的width 若是我把這個div又加了一個20px的邊框。那麼這個div的內容寬度width = 1000px-20px = 980px。
• 固然盒子模型也有很差的地方若是一個男盒子沒有設置寬度，它的寬度是父元素的100% ，這裏的100%是指這個盒子所佔頁面寬度。若是又增長了這個盒子的margin,padding,bo rder的值，那麼這個盒子的內容寬度必定會減少，若是margin,padding,border不斷地增 加，盒子的內容寬度不斷地被壓縮，若是壓縮到極限，瀏覽器會強迫元素的寬度增長。