CSS个人问题总结

一、CSS中关于background的使用场景和总结

背景背景，一定要把它理解成为某个盒子的背景，也就是盒子里面随意写东西，写的东西层级永远比背景的z-index高
适用场景：【一张很大的图片需要展示并且图上面还有相应的元素】【兼容IE8】【雪碧图】等

在background中有5个属性

分别是：【color】【image】【position】【repeat】【attachment】
在CSS3中多了一个背景透明度【rgba】

在实际开发中，用的最多的肯定是复合写法，不可能一行一行的去写
它跟font的复合写法不同的是，这5个属性没有固定的先后顺序之分，但是实际中一般把 position的值写在最后，
例子：

background：url（“”） no-repeat  center center   fixed

值得注意的是，关于【position】要多说两句，一般用背景图都是要用到它，还有处理兼容IE8的时候
比如一张大背景图片 让他水平居中 就可以设置 center top （这个值只要不是具体的数字就不分先后，反之分先后）
它的值center top啊这些相对的都是这个盒子的左边和上边【类似于定位的left top】

background—attachment：scroll || fixed 两个参数 默认是scroll 如果写成fixed 那么背景图就固定在那个位置了
【这种效果一般可以做 鼠标滚轮滚动 图片固定的效果
如果想好看一点，还可以加一层mask 然后mask滚走了，图片显示】

二、关于line-hight问题的bug

写了这么久的css代码，才发现一个很基础的问题没有去细想过，为什么line-height = 盒子的高度以后，盒子里面的文字就自动垂直居中了？

要弄清楚这个问题，必须要深刻理解 行间距的定义：说简单点，就是行与行之间的距离
在实际开发中要准确量取行高的话，【只要从上一行文字的脚底量到下一行文字的脚底，直接OK】
这也就是网上说的 基线与基线之间的距离 扯了这么久好像还没有入正题，莫急！来了

这里有个公式： line-height = 上间距 + 下间距 + 文本本身的高度【默认都是16px除非自己设置】
那么问题来了 我如果直接给一个盒子高度设置为40px 然后 line-height也等于 40px
那么 40-16 这多出来的24px就会直接均分给 上间距 和下间距 上下12px 那文本他不就自己乖乖地被挤在中间而垂直居中了吗？
是不是这个道理，不信你可以把行高设置成45px 文本肯定在偏下的位置 35px的话肯定在偏上的位置

说穿了【行高改变的只是上下间距的高度，你文本该有好高就好高】
只有把这个问题搞清楚了，那我下面说的问题才有意义

上周合项目，遇到一个非常尴尬的问题，我把一个盒子高度设置80px，我看原图它里面的文本貌似是垂直居中的，然后我非常开心地line-height = 80px先写起哦，

但是由于这个盒子我写了个固定宽度，另外一边的同事在给这个盒子填充数据的时候，字数比原先图纸上的多了几个，然后他又说不写单行文本省略控制，尴尬的事情发生了：
多出来的那几个字，它跑下面去了，而且距离有点眼熟，？？？？
这种事情我能忍？ 在打开调试器检查了一下后，我发现，真的是行高引起的

于是我想出了两种办法以解决下次再遇到相似的情况：
【1】不设置行高 直接同padding-top 把文字顶下来一点
【2】行高设置小一点 这样上下间距就小一点，文字在盒子高度固定的情况下，勉勉强强还是能在一行的哈哈比较low见谅