盒子模型总结

概念：一个标签配合6大属性（margin，border,padding，widht，height，background）即构成一个盒子。

由于标签分男女，6大属性对男标签都有用；但对于女标签，width 和height无效；padding和margin仅在水平方向上起作用。

6大属性：

1. margin:盒子与盒子之间的距离 分上，下，左，右四个方向的margin（1个值：四位相同。2个值：第一个值表上下，第二个值表左右。3个值：第一个表上，第二个表左右，第三个表下。四个值：表四位）。  
2. border:设置盒子的边框。border: 1px solid red; ( 其格式为border:宽度 线形 颜色)同时，也可以单独设置属性（ border-width, border-top-width, border-style 等等 ）用法同margin相同。border在页面上是占空间的，他有一个经典用法就是生成一个小三角 （ border: 5px solid transparent;border-top:5px solid red; ）
3. padding:称作内边距，补白。 是内容与border之间的距离； 分上，下，左，右四个方向的padding(1个值 2个值 3个值 4个值 用法与margin相似） 应用：调整内容与border之间的间隙 padding在页面是占空间。 
   
4. width: 内容的宽度，男标签可以设置宽度，女标签不可以；女标签的宽度取决于内容的多少，高度则取决于字体的大小（ font-size ）。其值可以是100%，是指父元素的100%。
5. height:内容的高度，其用法与width相同。
6. background: 此属性由background-color和background-image构成。