一，背景(background)
-
background的常用样式有： 1.
background-color：设置背景颜色； 2.background-image：添加背景图片； 3.background-position：设置背景图片的位置； 4.background-repeat：设置背景图片的重复值； 5.background-size：设置背景图片的大小尺寸； 6.background-attachment：设置背景是否随元素的滚动而产生的动态；（用的很少） -
常用样式的常用值 1.
background-color：① 英文名：red；② 十六位进制颜色：#000；③rgba（0，0，0，0）； 2.background-image：url(图片地址或路径)； 3.background-position：① 数值偏移量（px为单位）：x y；② 百分比偏移量：x% y%； ③ 横坐标和纵坐标的固定值：[top | center | botom] [left | center | right]； 4.background-repeat：① 不重复：no-repeat；② X轴重复：repeat-x；③ Y轴重复：repeat-y； ④ X和Y轴都重复：repeat； 5.background-size： ① 直接写宽高：20px 20px； ②contain：调整背景图片的宽度或高度（较大者），使背景图片完全包含在元素中； ③cover：调整背景图片的宽度或高度（较小者），以铺满整个元素； PS：contain和cover都会保持当前背景图片的宽高比； -
background样式缩写，例子如下图：
- contain与cover的区别
PS：可以用背景图片的方式引入雪碧图，关于雪碧图可见我的这篇文章CSS雪碧图现学现做
二，关于inline-block的一些特性
- 特性 1.呈现inline元素的特性（不占据一整行，宽度由内容宽度决定）； 2.同时呈现block元素的特性（可以对其设置宽高以及上下padding和margin）； 3.多个并排显示时存在inline元素的缝隙问题，如下图；
4.多个不同高的inline-block元素并排显示时上下对齐的基线是文本内容的底线；
- 缝隙问题产生的原因和解决方案 1.产生的原因：因为HTML标签的写法，换行后上行与下行产生的间距被视作空格，而浏览器会渲染多个空格为一个空格，而这个空格也被当做是一个字符，所以产生缝隙； 2.解决方案一：HTML标签连写，如下图可见连写HTML标签后缝隙消失，没有连写的还是存在缝隙：
3.解决方案二：设置父容器font-size: 0;，然后再重新设置inline-nlock的元素的font-size：
4.解决方案三：设置浮动，有可能导致父容器高度坍塌：
5.解决方案四：设置负margin挤掉空格，但是这种方法会导致元素溢出父容器：
- 不同高中间的inline-block元素的顶部或底部对齐方法，设置
vertical-align: top | bottom1.顶部对齐：
2.底部对齐：
三，行高line-height
-
首先说说行高的特性 1.有继承性； 2.行高使用的单位：① 固定单位:px；② 相对单位(倍数):2；③ 相对单位百分比:200%；
-
单行文字在元素中垂直居中的line-height办法 设置line-height与这个文字的容器的高度相同，如下图：
- 相对单位中的倍数与百分比的区别，例如(
line-height: 2;与line-height: 200%的区别) 答：两者之间主要是在继承的计算方式上的不同 line-height: 2;被继承的是这个倍数，而 line-height: 200%;被继承的是计算后的到的px值； 区别可见下图：
四，IE盒模型与W3C盒模型的区别
可见我的这篇文章CSS盒模型简介
