盒模型box model

不太嚴(yán)謹(jǐn)?shù)刂v，css實(shí)現(xiàn)布局，就是把一個(gè)個(gè)盒子按照設(shè)定好的位置排列放好。這些盒子，里面的內(nèi)容物，就是一個(gè)html標(biāo)簽包裹起來的內(nèi)容。那么，每個(gè)元素在網(wǎng)頁這個(gè)“畫布”上，有自己的坐標(biāo)位置以及空間大小。

元素的空間大小，可以通過盒模型來理解。

盒模型

想象一個(gè)放在矩形空間內(nèi)的紙箱。

從上往下看，從墻壁（空間邊緣）到紙箱外層，是margin，紙箱本身的厚度是border，紙箱內(nèi)塞了抗震的緩沖物，然后最里面才是內(nèi)容物（元素），紙箱內(nèi)層到內(nèi)容物之間距離，就是padding。

以上，就是box model。

margin和padding都有四個(gè)方向上的距離，包括top right bottom和left。指定margin和padding時(shí)，也依照從top開始，按順時(shí)針的方向，即上右下左的順序。

h1 {margin : 10px 0px 15px 5px;} 中，按照上右下左的指定順序，就知道m(xù)argin-top=10px；margin-right=0px；margin-left=5px；margin-bottom=15px。

box-sizing

既然有內(nèi)容物、padding、border、margin，當(dāng)我們說一個(gè)元素的寬高（width、height）時(shí)，到底是指哪些范圍呢？

在W3C標(biāo)準(zhǔn)中，width和height指的是內(nèi)容物的寬高，padding、border、margin都是在內(nèi)容外、向外層繪制出來的。例如，當(dāng)賦予一個(gè)元素width為350px時(shí)，如果設(shè)置{border：10px solid black;}，則在瀏覽器中，展示出來的空間大小為10+350+10=370px。

CSS3之前，盒模型都是按照上述的準(zhǔn)則進(jìn)行配置的。但是在CSS3中，新增了box-sizing屬性，可以調(diào)整寬高的計(jì)量方式。

box-sizing的默認(rèn)值為content-box，也就是W3C標(biāo)準(zhǔn)一直采用的寬高計(jì)量方法。

但是當(dāng)設(shè)置{box-sizing: border-box;}時(shí)，則是將 “內(nèi)容物+padding+border” 的寬高作為width和height。要計(jì)算內(nèi)容物的寬高，則需要在width和height基礎(chǔ)上，減去padding和border的大小。或者說，內(nèi)容物是在padding、border基礎(chǔ)上向內(nèi)層繪制出來的。

總結(jié)

{box-sizing: content-box;}時(shí)：
width = width of the content
height = height of the content

{box-sizing: border-box;}時(shí)：
width = border + padding + width of the content
height = border + padding + height of the content