盒模型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
