盒模型包括哪些属性
- content:width和height表示内容的宽高
- padding:内边距
- border:边框
-
margin:外边距
具体参照图片:
盒模型.JPG
另外早期IE6、IE7版本以及在怪异模式下，IE也使用“IE盒模型”:
IE盒模型.JPG
两者的区别是:
W3C标准盒模型中padding、border所占的空间不在width、height范围内而IE的盒模型width包括content尺寸＋padding＋border
padding和margin的主要写法:
padding-bottom: 50px;
/*下内边距为50px*/
padding: 20px;
/*上下左右内边距都为20px*/
margin: 5px 10px;
/*上下外边距为5px,左右外边距为10px*/
margin: 1px 2px 3px 4px;
/*外边距上1px右2px下3px左4px*/
知识点margin:0 auto;可以使盒子在浏览器中显示居中效果
