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元素的缝隙问题，如下图；

inline-block元素的缝隙问题

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办法

• 相对单位中的倍数与百分比的区别，例如(line-height: 2;与line-height: 200%的区别)
  答：两者之间主要是在继承的计算方式上的不同
  line-height: 2;被继承的是这个倍数，而 line-height: 200%;被继承的是计算后的到的px值；
  区别可见下图：

百分比继承的是父元素字体的200%行高

倍数继承的是倍数，然后通过倍数计算子元素的字体大小所得出来的px值

四，IE盒模型与W3C盒模型的区别

可见我的这篇文章CSS盒模型简介