CSS常见样式2

问答：

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

• text-align: center的作用是让行内元素(inline)和行内块元素(inline-block)水平居中，应该写在要居中的元素的块级父元素上。

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

• IE盒模型的宽高是content+padding+border，而W3C盒模型的宽高是content。

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

• 让所有的块级元素使用ie盒模型，也就是宽高=content+padding+border

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

• 父元素设置line-height: 200%;属性时，其所有子元素的行高都是一个具体的值，即他们父元素字体大小的200%。
• 父元素设置line-height: 2;属性时，其所有子元素的行高都是自身字体大小的2倍。

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

• inline-block即有内联元素的特性和其他元素占一行，又有块级元素的特性拥有盒模型。
• 只要HTML文件中内联元素之间有代码，浏览器就会产生解析时这两个元素之间就会产生缝隙，将它们父元素font-size设置为0，再将它们字体设置还原则可以去掉缝隙。
• inline-block元素顶端对齐：设置vertical-align: top

6.CSS sprite 是什么?

• CSS sprite是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，可以大大减少页面请求，提高页面加载速度。

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

• opcity: 0;将一个元素变为透明，但元素所占空间不变。
• display: none; 去掉这个元素，元素将从网页中消失。
• visibility: hidden; 于opcity类似，元素所占空间不变。

代码

• 1.使用 CSSsrpite 实现如下效果【效果范例471】. ps: 图片下载地址328

  • http://js.jirengu.com/qamaburuyo/2/edit

• 2.在iconfont上搜索"饥人谷"350， 使用字体图标实现代码1中的效果

  • http://js.jirengu.com/zibigunasa/2/edit