CSS常见样式2

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

• text-align:center规定行内内容相对父元素居中对齐，样式写在父元素上，作用在行内内容上。
• 行内内容包括行内元素、行内块元素和行内文本；父元素一般为块级元素。

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

W3C 盒模型的 width 和 height 只是指内容区的宽和高，而 IE 盒模型的 width 和 height 包含了内容区、border、padding 的宽高。

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

box-sizing: border-box; 设置使用IE盒模型，盒模型的 width 和 height 包含了内容区、border、padding 的宽高。
另外，默认情况下，box-sizing: content-box; 设置使用w3c盒模型，盒模型的 width 和 height 只是指内容区的宽和高。

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

line-height: 2; 是将行高设置为元素字体高度的2倍，是相对值；
line-height: 200%; 是将行高设置为父元素字体高度的2倍，是固定值。

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

• inline-block是一个块状行盒，表现为一个行内元素，它既拥有了块状元素可以设置width和height的特性，又保留了行内元素不换行的特点。
• 有缝隙的原因：inline-block水平呈现的元素间，标签段之间换行显示或空格分隔的情况下会有间距，这是符合规范的应有表现。
• 解决缝隙的方法：
  方法1、去掉HTML中标签段之间的空格或用注释代替空格
  方法2、设置margin值为负
  方法3、去掉inline-block元素的闭合标签
  方法4、设置父元素letter-space值为负值
• 顶端对齐：使用vertical-align: top

6、CSS sprite 是什么?

• CCS Sprite指的是把页面要用的所有小图标集合到一张图里面。
• 雪碧图被运用在众多使用了很多小图标的网站上。相对于把每张小图标以.png格式文件的形式引用到页面上，使用雪碧图只需要引用一张图片，减少了网络请求，对内存和带宽更加友好。

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

• display: none 元素消失，不占用位置
• visibility: hidden 隐藏，但对浏览器来说还在，占用位置
• opacity: 0 元素透明，看不见但还是占用位置
• background-color: rgba(0, 0, 0, 0) 背景透明，只针对背景

8、实现代码效果

• 8-1代码预览
• 8-2代码预览