盒模型
盒模型是网页的基石，在使用CSS进行网页布局时，我们一定离不开的一个东西————盒模型，一个盒子由外到内可以分成四个部分：margin（外边距）、border（边框）、padding（内边距）、content（内容）。会发现margin、border、padding是CSS属性，因此可以通过这三个属性来控制盒子的这三个部分。而content则是HTML元素的内容。
盒子模型对应的CSS属性为:width，height，padding，border，margin。
盒样式--border
border:宽度 风格 颜色;
border也可以同时设置四个边框的宽度：border：1px 2px 3px 4px
有4个值时为上 右 下 左
有3个值时为上 左右 下
有2个值时为上下 左右
有1个值时为四周边框
边框宽度：border-width
边框颜色：border-color
边框样式：border-style:sold(实线)/dashed(虚线)/dotted(点状)/double(双线)
可单独设置一边：border-left/right/bottom/top
例子：用css实现三角形
<style>
div{
0px;
height: 0px;
border-left: 10px solid transparent;
border-top: 10px solid blue;
border-right: 10px solid transparent;
}
</style>
<body>
<div> </div>
</body>
盒子样式-padding
1）padding长在盒子的外面，会把盒子撑大
2）作用：控制子元素在父元素中的位置
3）如果想让盒子保持原有的大小：在宽高基础上减掉。如果元素没有设置宽高，则不需要减
4）给单一方向添加padding：padding-top/bottom/left/right
5）padding的设置特点：
padding:30px; 四周
padding:10px 30px; 上下 左右
padding:10px 30px 50px 上 左右 下
padding:10px 30px 50px 100px 上右下左
6）注意：padding不会对背景图的位置造成影响。
padding不能设置负值
不会对背景图造成影响
盒子样式-margin
1）margin长在元素之外，不会撑大元素的大小
2）margin控制的是同级元素之间的位置关系
3）给单一方向添加margin语法：margin-top/right/bottom/left
4) margin设置方法：
margin:30px; 四周
margin:10px 30px; 上下 左右
margin:10px 30px 50px 上 左右 下
margin:10px 30px 50px 100px 上右下左
5）margin：0 auto；让当前元素在父元素左右居中
6）margin常出现的bug：
a：两个相邻元素的上下margin值不会叠加，按照较大值显示，左右不会出现这种情况
b：如果父元素和第一个子元素没有浮动的情况下，给第一个子元素添加margin-top；会错误地放在父元素上面，父元素也会向下滑动，通常用padding值设置
盒子的宽高
盒子的宽度 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
盒子的高度 = height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom