css—盒子模型理解

一、盒子模型做用：
盒子模型就是一個盒子，封裝周圍的html元素。容許咱們在其餘元素和周圍元素邊框的空間放置元素。
二、組成：
外邊距（margin）：相鄰的兩個盒子margin，會發生摺疊，可爲負數
邊框（border）：
內邊距（padding）：
實際內容（content）：百分比相對於父容器的content box 的寬度，只有包含塊的高度不依賴該元素時，百分比寬度才生效

*IE盒模型和W3C盒模型在計算總寬度中存在一些差別

W3C盒模型：width=content.width；heigth=content.heigth
IE盒模型：width =content.width+border +margin；height=content.height+margin+border

CSS3引入box-sizing屬性，可容許改變默認的css盒模型對元素寬高的計算方式

content-box: 瀏覽器定義元素的屏幕寬度和高度的默認方法, 會將border寬度和padding厚度與width和height屬性值相加,來肯定該標籤的屏幕高度和寬度
padding-box-: 當你在一個樣式中設置了width和hight屬性時,它應該包含padding做爲該值的一部分
border-box: 包含了border寬度和padding厚度,將它們做爲width和height的一部分.