4.1认识盒子模型
width /*盒子模型的宽度*/
height /*盒子模型的高度*/
border /*盒子模型的边框*/
background /*盒子模型的背景*/
padding /*盒子模型的内边距*/
margin /*盒子模型的外边距*/
虽然盒子模型拥有 高度，宽度，边框，背景，内边距，外边距这些属性，但是并不要求每一个元素都定义这些属性
4.2盒子模型的相关属性
4.2.1边框属性
1。设置边框样式
none 默认时 也就是没有边框
solid 边框单实线
dashed 虚线
dotted 电线
double 双实线
可以对盒子的单边设置也可以综合设置
border-top-style 上边框样式
border-right-style 有边框样式
border-bottom-style 下边框样式
border-left-style 做边框样式
border-style 上 右 下 左 边框
上 左右 下 边框
上下 左右 边框
上下左右 边框
2 设置边框宽度
border-top-width 上边框宽度
border-ringht 右边框宽度
略
注意：设置边框宽度时同样必须设置边框样式，如果未设置样式，，或设置为none，则其他的边框属性无效
边框宽度也可以 单个设置 也可以综合设置
3.设置边框颜色
border-top-color 上边框颜色
border-right-color 右边框颜色
边框颜色也是可以单个设置 也可以综合一起设置
注意：设置边框颜色时同样必须设置边框样式，如果未设置样式，，或设置为none，则其他的边框属性无效
4 综合设置边框
border-top ：上边框宽度 样式 颜色
border-right： 右边框宽度 样式 颜色
上面的设置方式中 宽度 样式 颜色 顺序没有要求 不分先后 只需要设置需要设置的就可以 不需要设置的可以的 不用写 为默认值
4.2.2内边距属性
padding 属性用于设置内边框 与边框属性border一样 也是复合属性
padding-top 上内边距
padding-right 右内边距
padding 上内边距 右内边距 下内边距 左内边距
4.2.3外边距属性
margin 属性用于设置内边框 与边框属性border一样 也是复合属性
margin-top 上外边距属性
margin-right 右外边距属性
margin； 上外边距 右外边距 下外边距 左外边距
4.2.4背景属性
1.设置背景颜色
background-color red
2.设置背景图片
body{
background-color:red; /*设置网页的背景颜色*/
background-image；url(img/jianbian.jpg); /*设置网页的背景图片*/
}
3.设置背景图片平铺
repeat: 沿水平和垂直两个方向平铺 也是 默认值
no-repeat:不平铺（图像位于元素的左上角 只显示一次）
repeat-x：只沿着水平方向平铺
repeat-y 只沿着垂直方向平铺
4.设置背景图片的位置
body{
background-position；right bottom;
}
5设置背景图像固定
scroll:图像随元素页面一起滚动（默认值）
fixed:图像固定在屏幕上，不随页面元素滚动
6综合设置元素的背景
盒子的宽与高
符合css规范的盒子模型的总宽度与总高度的计算原则如下
盒子的总宽度=“width”+左右内边距之和+左右边框宽度之和+左右外边距之和
盒子的总高度=height+上下内边距这和+上下边框款难度之和+上下外边距之和
宽度属性width和高度属性height仅适用于块级元素，对行内元素无效（标记和除外）
计算盒子模型的总高度时，还行考虑上下两个盒子垂直外边距合并的情况
