CSS盒模型

盒模型包括哪些属性

• 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;可以使盒子在浏览器中显示居中效果