盒子模型的属性
-
width&height
width用来设置盒子内容的宽度，height用来设置盒子内容的高度。块级标签可以设置宽度和高度，行内标签的宽度由内容决定，高度由font-size决定。width和height可以设置百分比，值为父元素的百分比。
-
padding
盒子的内边框，也就是盒子内容与盒子边框的距离，按照上左下右的顺序分为padding-top,padding-right,padding-bottom,padding-left，padding不允许使用负值
示例:
`padding:10px 5px 15px 20px;`
表示上边距10px，右边距5px，下边距15px，左边距20px。
`padding:10px 5px 15px`
如果只设置3个值，则按照上右下的顺序赋值，左边距会自动复制右边距的值
-
margin
盒子的外边框，控制盒子边框与外界之间的距离，和padding一样分为上右下左，赋值顺序也与padding的赋值顺序相同。 对于行内标签来说，margin只在水平方向上起作用，对于块级标签，margin在上右下左四个方向上都起作用。 margin重叠（塌陷） 对于块级标签，在垂直方向上会出现塌陷的现象，在兄弟元素之间，上面盒子的下margin和下面盒子的上margin重叠，两元素之间的margin值取二者之间较大的值。要解决兄弟元素之间的重叠，有两种常用的方法，第一种是把元素变为既不是行内也不是块级，第二种是给元素设置浮动，浮动的元素是不会塌陷的。父子元素之间也会出现一种塌陷，父元素的margin-top和它的第一个子元素的margin-top会重叠，解决方法：1.给父元素设置border-top，如果不想显示边框，可以用borders-style：transparent将边框设置为透明。2.给父元素设置padding-top。3.把块级标签变为非块级非行内标签。
-
border
盒子的边框，同样分为上右下左4个部分，每个部分都能单独设置不同的属性值。在css中，边框最重要的属性就是样式，如果没有样式，我们就不能看到边框，css中提供了10个不同的非inherit样式，我们可以通过border-style来设置属性值。我们可以为一个边框定义多个样式，比如：
p.aside {border-style: solid dotted dashed double;}这段代码定义了四种边框样式：实线上边框、点线右边框、虚线下边框和一个双线左边框。
我们也可以分别设置四个边框的样式
-
border-top-style
-
border-right-style
-
border-bottom-style
-
border-left-style
- background
盒子的背景，默认情况下背景会填充内容和padding。 背景同样有一些不同的属性，backfround-color用来设置元素的背景颜色；background-image用来给一个元素设置背景图像。 background-repeat属性值有两个：repeat-x和repeat-y，分别用来设置背景图像在x轴上平铺还是在y轴上平铺。 利用background-position属性，我们还可以改变图像在背景中的位置。属性值有center，top，bottom，right，left等，也能用百分数值来表示，也能用px像素值来表示，偏移点是元素的左上角。在默认情况下，背景会随着文档滚动，利用background-attachment属性可以防止这种滚动。
- 计算盒子的大小
一个盒子在页面上占据的宽度应该包括margin-left+padding-left+width+padding-right+margin-right，占据的高度应该包括margin-top+padding-top+height+padding-bottom+margin-bottom。
