Css中的盒模型及盒模型寬度計算

       CSS假定所有的HTML文檔元素都生成了一個描述該元素在HTML文檔布局中所占空間的矩形元素(element box），可以形象地將其看作是一個盒子。CSS圍繞這些盒子產(chǎn)生了一種“盒子模型”概念。

      盒模型，實際上就是把某些標(biāo)簽元素看成為一個箱子。箱子與其他箱子之間的距離，是箱子的最外圍，它不是一條邊線而是添加在邊框外面的空間。這個外邊距使元素盒子之間不必緊湊地連接在一起，是CSS布局的一個重要手段。用margin(外邊距)屬性來表示，margin-top，margin-right，margin-bottom，margin-left可以理解成箱子距離外面箱子的四個方向的距離。箱子自身的邊框厚度，就用border屬性來表示,一般可以設(shè)置其顏色，寬度，虛線實線等；箱子里裝的物體，就是content,本身有寬度(weight)，高度(height)；物體和箱子會有一定的距離，這個距離就是padding(內(nèi)邊距)，有padding-top,padding-left,padding-right,padding-bottom.這就是我簡單理解的盒模型。

   在調(diào)試時，根據(jù)顏色就很好看出這幾部分到底是多少，到底位置在哪？用谷歌下的調(diào)試舉例：橘***的部分就是這個元素所設(shè)置的margin屬性值；如圖：這個圖就是：margin：20px auto;的結(jié)果：

***的部分就是這個元素所設(shè)置的Border屬性值如圖：

荷葉綠的部分就是這個元素的padding值，上下15px,左右25px如圖：

藍(lán)色代表就是物體本身的寬高。Weight:300px; height:300px;

     相應(yīng)的盒模型的寬度就等于margin-left+margin-right+border-left+border-right+padding-left+padding-right+width;高度也是對應(yīng)的加上內(nèi)外邊距與border。

  在新的css3中提出了box-sizing屬性。在使用box-sizing屬性值時，可以更好更方便的選擇在指定用width屬性，height屬性來分別指定寬度值，與高度值時，是否包含元素的內(nèi)外邊距及邊框的寬度高度?？偟膩碚f，使用box-sizing屬性值，是為了用來控制元素的總寬高度。

這個屬性包含：

content-box，border-box；

 默認(rèn)為content-box，寬度和高度分別應(yīng)用到元素的內(nèi)容框。在寬度和高度之外繪制元素的內(nèi)邊距和邊框。盒模型的寬度，高度計算方法與上面一樣，

但是在設(shè)置為border-box時，元素設(shè)定的寬度和高度決定了元素的邊框盒。這個盒子的內(nèi)外邊距邊框都不會增加它的寬度。就是說，為元素指定的任何內(nèi)邊距和邊框都將在已設(shè)定的寬度和高度內(nèi)進(jìn)行繪制。