CSS常见样式2

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

text-align: center作用在块级元素上，可以让元素内文本以及 display 为 inline 和 inline-block 的子元素在元素内水平居中。

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

• W3C盒模型：

  
  
  

  W3C模型

• IE盒模型

  
  
  

  IE盒模型

• 区别：W3C盒模型中padding、border所占的空间不在width和height范围内，而IE盒模型种padding、border所占的空间包含在width和height范围内。

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

box-sizing是CSS3中定义的新样式，它有两个属性 border-box 和 content-box，分别代表使用IE盒模型与W3C标准盒模型。
box-sizing: border-box; 设置使用IE盒模型。

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

• ine-height: 2是指元素行高为自身的2倍，指的是相对自身大小的倍数。
• line-height: 200%是指元素行高为父元素大小的2倍，相对于父元素大小变化而变化，浏览器会计算出一个具体的值作用于元素上。

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

• inline-block同时具有块级元素和行内元素的一些特性。既可以像行内元素一样不用独占一行，又可以像块级元素一样可以设置宽高。
• 去除缝隙的方法有三种：
  1. 在代码中两个元素之间不使用换行，直接连写。
  2. 可以给需要消除缝隙的元素设置一个父元素，在父元素中使用font-size:0;然后再在元素中使用font-size设置元素原本的大小。
  3. 父元素设置dispaly:flex，Flex是Flexible Box的缩写，意为"弹性布局"。注意：设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
• 为元素设置vertical-align:top;属性。

6. CSS sprite 是什么?

CSS sprite是指精灵图或者雪碧图。就是把页面上的多个图片集合在一张图片上，然后使用背景图片时利用background-position属性，定位所需要的图片在精灵图上的位置即可。这样一个网页的背景图不需要向服务器发送多次请求，图片数量也会变少，加载网页时速度会变快。

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

有四种方式：

1. 设置透明度，使用opacity:0;使元素完全透明。
2. 隐藏元素，使用visibility:hidden;用户不可见。
3. 使元素在页面消失，使用dispaly:none;元素不会占用位置。
4. background-color: rgba(0，0，0，0) 只是背景色透明。

8. 代码

1. 使用 CSSsrpite 实现如下效果
2. 使用字体图标实现代码1中的效果

  
 
  


