一，背景(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盒模型简介
网友评论