（3）CSS样式——盒子模型

盒子模型概述

盒子模型的内容范围包括：margin、border、padding、content

内边距padding

1.在content外，边框内部
2.内边距属性

padding	设置所有边距
padding-bottom	设置底边距
padding-left	设置左边距
padding-right	设置右边距
padding-top	设置上边距

边框border

1.CSS边框
可以用于任何元素
2.边框的样式
border-style:定义10个不同的非继承样式，包括none
3.边框的单边样式
border-top-style
border-left-style
border-right-style
border-bottom-style
4.边框的宽度
border-width
5.边框单边宽度
border-top-width
border-left-width
border-right-width
border-bottom-width
6.边框的颜色
border-color
7.边框的单边颜色
border-top-color
border-left-color
border-right-color
border-bottom-color
8.CSS3边框
border-radius:圆角边框
box-shadow:边框阴影
border-image:边框图片

box-shadow: 10px 10px 5px #FF0000 

后面四个参数的意思是：向右10px，向下10px，阴影清晰度是5px，颜色为红色

外边距margin

围绕在内容边框的区域，外边距默认为透明区域，结束任何长度单位、百分数值

属性	描述
margin	设置所有边距
margin-bottom	设置底边距
margin-left	设置左边距
margin-right	设置右边距
margin-top	设置底边距

外边距合并

合并就是叠加的概念
两个相邻的外边距会叠加在一起，并且两个距离为值多的一方，比如两个相邻的元素margin都是100px，那么这两个元素之间的距离不是200px，而是100px