CSS的一些常见样式(二)——背景，inline block，行高，两种盒模型及元素不可见

一，背景(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 | bottom 1.顶部对齐：

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盒模型简介