輕輕鬆鬆學CSS:盒子模型(Box Model)
所有HTML元素都可以看成盒子，在CSS中，”box model”這一術語是用來設計和布局的。
盒子模型包括：
1、margin，外邊距
2、border，邊框
3、padding，內邊距
4、content，內容
標準盒模型是大多數瀏覽器採用的W3C標準模型
box-sizing:content-box;
width僅僅包含內容區域的寬度，
height僅僅包含內容區域的高度
內盒(不考慮外邊距)的寬度=width+padding(左右內邊距的寬度）+border(左右邊框的寬度)
內盒(不考慮外邊距)的高度=height+padding(左右內邊距的高度）+border(左右邊框的高度)
就像洋蔥一樣層層扒皮，每層都要算
怪異盒模型是IE中採用Microsoft自己的標準
box-sizing:border-box;
width不僅包含內容區域的寬度，還包括padding(左右)、border(左右)，說白了就是內盒的寬度
height不僅包含內容區域的高度，還包括padding(左右)、border(左右),說白了就是內盒的高度
內盒(不考慮外邊距)的寬度=width
內盒(不考慮外邊距)的高度=height
它不像洋蔥那樣層層扒皮，而是content、padding、border作為一個整體
標準模型和怪異模型可以應用在網頁布局中
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>test</title> 6 <style> 7 .wrap{ 8 width:1090px; 9 margin:0 auto; 10 } 11 .div1{ 12 width:1050px; 13 height:200px; 14 padding:30px 20px; 15 background-color:lightblue; 16 box-sizing:content-box;<!--標準盒模型 這是默認值--> 17 } 18 .div2{ 19 box-sizing:border-box;<!--怪異盒模型，在特殊情況下也有應用--> 20 width:1090px; 21 padding:30px 20px; 22 background-color:lightgreen; 23 border:5px solid red; 24 } 25 </style> 26 </head> 27 <body> 28 <div class="wrap"> 29 <div class="div1">content寬度是1050px，padding-left=padding-right=20px，1050+20+20=1090px，正好和父元素的寬度相等，此時的box-sizing:content- box(大多數瀏覽器的默認值)</div> 30 <div class="div2">width=1090px,它包含border 5px*2，padding 20px*2，所以內容區域的寬度是1090-5X2-20X2=1040px</div> 31 </div> 32 </body> 33 </html>
View Code
