一、简介：
css处理网页时，它认为每个元素都包含在一个不可见的合资里。因为如果把左右元素都想象成盒子，那么我们对网页的布局就相当于摆放盒子，我们只需要将相应的盒子摆放到网页中相应的位置即可完成网页的布局。
元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。
提示：背景应用于由内容和内边距、边框组成的区域。
二、边框 border
width：用来设置边框内容区的宽度；
height：用来设置边框内容的敢赌。
width和height只是用来设置盒子内容区的而不是盒子整个的大小，盒子的可见大小由盒子的内容区、内边距、边框共同决定。
边框的样式：为元素设置边框必须指定三个样式：
border-width：边框的宽度
border-color：边框的颜色
border-style：边框的样式
1、border-width：可以同时指定四个边框的宽度，顺序为顺时针指定
border-width：10px 20px 30px 40px
若指定3个值，则分别设置给 上 左右 下
若指定2个值，则分别设置给 上下 左右
若指定1个值，则四个边框都是这个值
也可以使用指定的 指定的设置边框的样式
border-bottom-width:下边框宽度
border-left-width：左边框宽度
border-right-width：右边框宽度
border-top-width：上边框宽度
2、border-color：同border-width，该样式也可以分别指定四个边框的颜色，并且提供四个方向的样式分别指定边框的颜色
3、border-style：边框样式，同宽度和颜色
可选值：
none：默认样式，没有边框
solid：定义实线。
dotted：定义点状边框。在大多数浏览器中呈现为实线
dashed：定义虚线。在大多数浏览器中呈现为实线
double：定义双线。双线的宽度等于 border-width 的值。
4、大部分浏览器中边框的宽度和颜色都有默认值，而边框的style的默认值为none，所以当只设置border-style时，颜色和宽度都会有鲜果，而不设置border-style时则边框不会有效果。
简写样式：border
它可以同时设置四个边框的宽度、颜色、样式，而且没有任何顺序要求。border一指定就会同时指定四个边，不能不分开
border:red 10px solid
border也有四个方向的特定指定：
border-top/right/left/bottom
三、内边距：padding，指的是盒子的内容区与盒子边框之前的距离，一共有四个方向的内边距：
padding-top
padding-right
padding-bottom
padding-left
内边距会影响盒子的可见框的大小，元素的背景会延伸到内边距
盒子可见框的宽度：border-left-width+padding-left+width+padding-right+border-right-width
盒子可见框的高度：border-top-height+padding-top+height+padding-bottom+border-bottom-heigth
使用padding可以同时设置4个边框的样式，规则和border-width一致
四、外边距：margin，指的是当前盒子与其他盒子之间的距离，他不会影响到盒子可见框的大小，而是会影响到盒子的位置。
盒子有四个方向的外边距：
margin-top：
margin-right：
marg-bottom：
marg-left：
由于页面的中的元素都是靠左靠上摆放的，所以注意当我们设置上和左外边距时，会导致盒子的自身位置发生改变，而设置右和下外边距的时候则会改变其他盒子的位置。
外边距也可以指定为一个负值，如果设置为负值则元素会想反方向移动。
margin还可以设置为auto，auto一般只是设置给水平方向的margin，如果只指定左外边距或有外边距中的一个margin为auto，则会将会将左或右外边距设为最大值，垂直方向外边距如果设置为auto，则外边距默认就是0。
如果将left和right同时设置为auto，则会将两侧外边距设置为相同值，这样可以让元素在父元素中水平居中。
外边距同样可以使用简写属性margin，可以同时设置4个方向的外边距，规则和padding一样。
margin：0 auto；
垂直外边距的重叠：在网页中相邻的垂直方向的外边距会发生外边距重叠
构成要素：1.垂直的 2.相邻的
外边距重叠指的是兄弟元素之间的相邻外边距会取最大值而不是取和
如果父子元素的垂直外边距相邻了，则子元素的外边距会设置给父元素
水平方向的外边距不会重叠，而是求和
注：浏览器为了在页面中没有样式时，也可以有一个比较好的显示效果，所以为很多元素设置了一些默认样式（margin和padding），而这些默认样式正常情况下我们是不需要使用的。所以我们在编写样式之前需要将这些默认样式清楚。
方式1：*{
margin：0；
padding：0；
}
五、内联元素的盒子：
1、内联元素不能设置width和height
2、内联元素的内边距
支持水平方向的内边距，页面会正常显示，也可以设置垂直方向的内边距，但是不会改变页面布局
3、内联元素的边框：
支持水平方向的边框，页面会正常显示，也可以设置垂直方向的边框，但是不会改变页面布局
4、外边距：
支持水平方向的外边距，不支持垂直方向的外边距