task 9 CSS常见样式2

1.text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中

使文本水平对齐，针对行内元素

2.IE 盒模型和W3C盒模型有什么区别?

3.*{ box-sizing: border-box;}的作用是什么？

实际所占宽高度 = 设置的高度（height）/ 设置的宽度（width）+ 外边距（margin）
可以简化计算，更有利于排版

4.line-height: 2和line-height: 200%有什么区别?

line-height: 2 本身行高的两倍
line-height: 200% 父级元素行高的两倍

在不继承的情况下效果一样。
在继承的情况下：

父元素设置属性：font- size:10px,子元素设置：font-size:20px;

line-height:2
父元素：line-height = 10px * 2= 20px
子元素：line-height = 20px * 2 = 40px。

line-height:200%
父元素：line-height = 10px * 200% = 20px
子元素行高= 父元素行高=20px。

5.inline-block有什么特性？如何去除缝隙？高度不一样的inline-block元素如何顶端对齐?

特征

既呈现 inline 特性(不占据一整行，宽度由内容宽度决定)
又呈现 block 特性 (可设置宽高，内外边距)

缝隙问题

直接删除两个span标签中间的空格

 <span>aa</span><span>bb</span>

或者用div盒子将多个span装进去,设置div的font-size: 0，再设置span的 font-size: 16px

 <style>
        div{
            font-size: 0;
        }
        span{
            border: 1px solid black;
            width: 40px;
            height: 20px;
            display: inline-block;
            font-size: 16px
        }
 </style>
<body>
 <div class="no-gap">
     <span class="aa">aa</span>
     <span class="bb">bb</span>
 </div>   
</body>

顶端对齐

vertical-align:top;

没有设置时是默认文字底部基线对齐。
vertical-align:middle;中部对齐
vertical-align:bottom;底部对齐









#####6.CSS sprite 是什么?
CSS Sprites俗称精灵图。是把网页中一些背景图片整合到一张图片中
“background-image”，“background- repeat”，“background-position”属性用来背景定位。 
- 优点

>- 减少网页的http请求，提高性能
- 减少图片大小：多张图片拼成1张图片
- 减少了命名困扰：只需对一张集合的图片命名，不需要对每一个小元素进行命名提高制作效率；

- 缺点

>- 图片合成比较麻烦；
- 背景设置时，需要得到每一个背景单元的精确位置，；
- 宽屏，高分辨率的屏幕下的自适应页面，图片如果不够宽，很容易出现背景断裂； 
- 维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片，无需改的地方最好不要动，这样避免改动更多的css，如果在原来的地方放不下，又只能（最好）往下加图片，这样图片的字节就增加了，还要改动css。 


#####7.让一个元素"看不见"有几种方式？有什么区别?
 
display：none   不占用位置，浏览器不加载
rgba(0, 0, 0, 0)；背景色透明
visibility:hidden；  看不见，但占用位置，等同于opacity：0
opacity：0 ；透明度为0
>加一个对比
background-color：transparent
只是将背景设成透明的，上面的文字还是可以看见的
opacity：0
整个层都透明了，包括背景和里面的所有内容

[background实现logo变色](http://js.jirengu.com/nopenacupa/1/edit)
[icon-font实现logo变色](http://js.jirengu.com/narafiqela/1/edit?html,css,output)