5、 边框样式
5.1简写方式
border:width style color;
5.2单边定义
border-left/right/top/bottom:width style color;
5.3单边宽度border-width
border-left/right/top/bottom-width;
5.4单边样式border-style
border-left/right/top/bottom-style;
5.5单边颜色border-color
border-left/right/top/bottom-color;
5.6案例
input.btn{height:30px; width:80px; color:black; background:#f0f0f0;
border-left:2px solid #fff; border-top:2px solid #fff;
border-right:2px solid #6a6a6a; border-bottom:2px solid #6a6a6a;
background:#c0c0c0; }
6、 框模型
框模型（box modal）定义了元素边框、内容、其他元素之间的内边距和外边距的问题。
6.1 框模型图
6.2 width和height
指定内容域的宽度和高度。
6.3边框、内外边距对元素尺寸的影响
增加内边距、边框和外边距不会影响内容域的尺寸，但是会增加元素框的总尺寸。
6.4案例
#box{ width:70px;margin:10px;padding:5px }
u 注意事项：注意元素所占面积的变化。
6.5内边距
和内容元素之间的距离。
1）语法：padding:30px;
2）单边设置：padding-left/top/right/bottom:30px;
3）简写方式：①padding:10px 20px; 上下 左右
②padding:10px 20px 30px 40px; 顺时针，上右下左
6.6外边距
与下一个元素之间的空间量。
1）语法：margin:30px;
2）单边设置：margin-left/top/right/bottom:30px;
3）简写方式：①margin:10px 20px; 上下 左右
②margin:10px 20px 30px 40px; 顺时针，上右下左
4）特殊写法：margin:0px auto; 对matgin而言，margin可取值为auto，使某个框居中显示；屏幕宽度减去元素宽度，除以2，左右平分
7、背景样式
7.1背景色
background-color:颜色;
7.2背景图像
background-image:url(a.jpg);/*注意，url里没有双引号*/
7.3背景平铺
background-repeat:repeat（默认的）/no-repeat/repeat-x/repeat-y;
7.4背景固定
background-attachment:scroll/fixed;/*scroll:背景和内容一起滚动;fixed:背景固定，类似于水印的效果，走到哪跟到哪*/
7.5背景定位
background-position:left top;/*可写px、%、center单词*/
7.6组合设置
background:background-color || background-image || background-repeat
|| background-attachment || background-position;
7.7案例
background:#9dcdfe url(a.jpg) no-repeat fixed left top;
u 注意事项：
v 如使用组合属性定义其单个参数，则其他参数的默认值将无条件覆盖各自对应的单个属性设置。比如设置background:white等价于设置
background:white none repeat scroll 0% 0%
如果在此之前设置background-image属性，则其设置将被background-image
的默认值none覆盖。
v <img style="background-image:url(images/logo.png);border:1px solid red;" />
错误，img没有占一定的面积、空间，所以不能设置背景。