css3基础知识（3）

盒子模型

1.盒子模型的结构

1.边框：围绕在内边距和内容外的边框
2.外边距：位于边框外的区域，即边框外面周围的距离
3.内边距：边框的区域，是内容与边框之间的距离
4.实际内容：盒子的内容 用于显示文本或图像

边框

1.边框样式（border-style）：
soild：定义实线边框
dashed：虚线边框
dotted：点线边框
double：定义两个边框
2.边框宽度（border-width）：
可以是像素值也可以是关键字：thick（粗） medium（粗 默认值） thin（细）
3.边框颜色（border-color）
4.复合属性
border：宽度 样式 颜色；

外边距

margin-top：设置元素的上外边距
margin-rigth：设置元素的右外边距
margin-bottom：设置元素的下外边距
margin-left：设置元素的左外边距
auto 当左右边外边距设置为auto 块级元素则会居中显示

内边距

padding-top：设置元素的上内边距。
padding-right：设置元素的右内边距
padding-bottom：设置元素的下内边距
padding-left：设置元素的左内边距
padding：复合属性 一个值为四个边 两个值为上下/左右 3个值为上/左右/下 4个值为上/右/下/左

盒子模型的尺寸

盒子的总宽度=width+左右内边距之和+左右边框宽度之和
盒子的总高度=height+上下内边距之和+上下边框高度之和
语法：
box-sizing：content-box|border-box|inherit；

圆角边框

border-radius：length{1,4}；
实现圆角效果
border-radius：（数值）；
制作圆形

盒子阴影

box-shadow：h-shadow v-shadow blur spread color inset；
属性：
h-shadow：必需 水平的阴影位置
v-shadow：必需 垂直的阴影位置
blur：模糊距离
spread ：阴影大小
color ：阴影的颜色
inset：从外层阴影改变内侧阴影