盒模型包括哪些屬性
- content:width和height表示內(nèi)容的寬高
- padding:內(nèi)邊距
- border:邊框
-
margin:外邊距
具體參照圖片:
盒模型.JPG
另外早期IE6、IE7版本以及在怪異模式下，IE也使用“IE盒模型”:
IE盒模型.JPG
兩者的區(qū)別是:
W3C標準盒模型中padding齐蔽、border所占的空間不在width、height范圍內(nèi)而IE的盒模型width包括content尺寸＋padding＋border
padding和margin的主要寫法:
padding-bottom: 50px;
/*下內(nèi)邊距為50px*/
padding: 20px;
/*上下左右內(nèi)邊距都為20px*/
margin: 5px 10px;
/*上下外邊距為5px,左右外邊距為10px*/
margin: 1px 2px 3px 4px;
/*外邊距上1px右2px下3px左4px*/
知識點margin:0 auto;可以使盒子在瀏覽器中顯示居中效果
