9 CSS常见样式2

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

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

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

区别在于IE中的width是包括padding，而W3C也就是我们平常使用的盒模型不包括，不管padding加多少内容区域的宽度不会改变。

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

设置元素的内边距和边框不再会增加它的宽度。

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

• line-height:2 行高是盒子模型里的content的两倍行高
• line-height:200% 行高是父元素的行高的两倍

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

• inline-block 既呈现 Inline 特性（不占据一整行，宽度由内容宽度决定）又呈现block特性（可设置宽度高，内外边距）
• 去除元素之间的缝隙：使用font-size:0；使用word-spacing；使用letter-spacing；
• 两端对齐使用vertical-align:top;

CSS sprite 是什么?

将不同的图片或者图标合并到一张图片上，减少网络请求，提升网页加载速度和性能。

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

• opacity: 0 ;这意味着将 opacity 设为 0 只能从视觉上隐藏元素。而元素本身依然占据它自己的位置并对网页的布局起作用。它也将响应用户交互。
• visibility: hidden;如同 opacity 属性，被隐藏的元素依然会对我们的网页布局起作用。与 opacity 唯一不同的是它不会响应任何用户交互
• display:none; 将 display 设为 none 使用这个属性，被隐藏的元素不占据任何空间。不仅如此，任何对该元素直接打用户交互操作都不可能生效。此外，读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在。任何这个元素的子孙元素也会被同时隐藏。为这个属性添加过渡动画是无效的，它的任何不同状态值之间的切换总是会立即生效。不过请注意，通过 DOM 依然可以访问到这个元素。
• clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);裁剪属性，虽然我们的元素自身不再显示，它也依然占据本该占据的矩形大小，它周围的元素的行为就如同它可见时一样。
• transform scale(0) 隐藏元素

代码题目

• 使用 CSSsrpite 实现如下效果
  http://js.jirengu.com/wafacayemo/1/edit
• 在iconfont上搜索"饥人谷"， 使用字体图标实现代码1中的效果
  http://js.jirengu.com/qucegipebi/1/edit