CSS常见样式2

问答

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

text-align CSS属性定义行内内容（例如文字）如何相对它的块父元素对齐，text-align并不控制块元素自己的对齐，只控制它的行内内容的对齐。

• text-align:center的意思是块级元素中的行内内容居中。
• 作用在block-level元素上(包括了block和inline-block);
• 能让block-level的元素中的行内元素、替换元素和inline-block元素居中。

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

• w3c标准盒模型设置的width，height为content的宽度和高度，不包含padding和border的宽度和高度
• IE盒模型设置的width，height为content+padding+border的总的高度和宽度

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

• “*” 应用于所有元素
• box-sizing: border-box 相关宽高的规定采用IE盒模型

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

• line-height: 2 指行高为本身字体高度的2倍，
• line-height: 200%： 元素的父容器文字高度的200%，
• line-height: 2 在元素的继承关系中始终以字体高度的2倍进行继承
• line-height: 200%： 在元素的继承关系中会先换算成具体的高度，子元素继承的是经过换算的高度的具体值

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

• inline-block有什么特性
  既呈现inline特性 （不占据一整行，宽度有内容宽度决定）
  又呈现block特性 （可设置宽高、内外边距等）
• 如何去除缝隙？
  对需去除缝隙的行内元素的父容器设置font-size: 0；再对相关的子元素单独设置字体大小
• 高度不一样的inline-block元素如何顶端对齐?
  通过设置 vertical-align: top来实现顶端对齐，类似的还有 vertical-align: middle 和 vertical-align: bottom。

6. CSS sprite 是什么?

CSS sprite指CSS精灵图，系指在页面需要多个icon作为背景时，将所有icon合成一张图片，并通过调整background-position的方式来调整所需要显示的icon，以达到减少请求、减轻服务器压力、加快网页响应速度的目的

7. 让一个元素"看不见"有几种方式？有什么区别?

opacity：0；整体透明度为零
visibility：hidden：和opacity类似
display：none；消失，不占用位置
background-color：rgba（0，0，0，0）；设置背景色透明

代码

任务1
任务2