盒子模型。

1.什么是盒子模型

边框：围绕在内边距和内容外的边框
外边距：位于边框外的区域，边框外面周围的家里
内边距：边框内部的区域，是内容与边框之间的距离
实际内容：盒子的内容,用于显示文本或图像。

1.2边框
边框样式:常见的属性

solid:实线边框。
dashed：虚线边框
dotted：点线边框
double：两个边框。两个边框的宽度和border-width的值相同。

1.2.1边框宽度

thick,medium(默认值)和thin

1.2.2边框颜色

name：指定颜色的名称：如“red”
RGB：指定RGB值，如“rgb（255,0，0）”
Hex：指定十六进制值，如“#ff0000”。

1.2.3边框的复合属性

可以把宽度，样式，颜色写在一起。

1.3外边距

margin-top:元素的上外边距。
margin-right：设置元素的右外边距
margin-bottom：设置元素的下外边距
margin-left：设置元素的左外边距
margin：复合属性，在一个声明中设置所有外边距属性。

1.4内边框距

padding-top:元素的上内边距
padding-right:元素的右内边距
padding-bottom:元素的下内边距
padding-left：元素的下内边距
padding：复合属性,在一个声明中设置所有内边距属性

1.5盒子模型的尺寸

网页是由多个盒子排列而成的,每个盒子都有固定的大小.
盒子的总宽度=width+左右内边距之和左右边框宽度之和。
盒子的总高度=height+上下内边距之和上下边框之和上下边框高度之和。

1.6box-sizing属性
box-sizing常见的属性

content-box
border-box
inherit

box-sizing语法：box-sizing:content-box|border-box|inherit;

2.圆角边框
border-radius
语法：
border-radius:length(1,4);
使用border-radius制作特殊图形
元素的宽,高必须相同
圆角的半径为元素宽度的一半或50%

3box-shadow属性的语法及浏览器兼容性
语法：
box-shadow：h-shadow v-shadow blur sparead inset；

h-shadow 必须的.。水平阴影的位置。允许负数
v-shsdow 必须的。垂直阴影的位置。允许负数
blur 模糊距离
spread 阴影的大小
color 阴影的颜色
inset 从外层的阴影改变内侧阴影