任务9：CSS常见样式2

问答####

问答.png

1- text-align:center的作用是 实现元素内部文字的居中。

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

2- IE盒模型和W3C盒模型的区别：
IE盒模型：width=内容宽度+边框+内边距

图片.png

W3C盒模型：width=内容宽度

图片.png

W3C标准中padding、border所占的空间不在width、height范围内，大家俗称的IE的盒模型width包括content尺寸＋padding＋border

3- *{box-sizing:border-sizing;}的作用是设置"IE盒模型"，即设置：
宽度=边框+内边距+内容宽度
4- line-height:2 和line-height:200%有区别
line-height:2设置行高为当前字号的2倍；line-height：200%设置行高为默认字号（即html默认字体字号）的2倍。
继承性的区别：有单位时，子元素继承了父元素计算得出的行距；无单位时继承了系数，子元素会分别计算各自行距（推荐使用）。

5- line-block特性：
既呈现 inline 特性(不占据一整行，宽度由内容宽度决定)
又呈现 block 特性 (可设置宽高，内外边距)
缝隙问题
：给父元素设置font-size:0,然后行标签font-size设置为需要的值即可去除行级元素之间的缝隙。
高度不一样的inline-block元素顶端对齐可以用vertical-align:top来实现。
6- icon是页面小图标的实现方式，目前主要有以下几种方式：
①img方式②CSS sprite方式③icon font方式④css icon方式⑤SVG方式
其中，CSS sprite又称CSS精灵图，

指将不同的图片/图标合并在一张图上。
使用CSS Sprite 可以减少网络请求，提高网页加载性能

实现方法：
首先将小图片整合到一张大的图片上；
然后根据具体图标在大图上的位置，给背景定位。background-position:-8px -95px;
7- 让一个元素看不见有几种方式
①opacity：0；透明度为0，整体（opacity后代元素会随着一起具有透明性，Opacity中的字随着透明值下降越来越看不清楚）
②visibility:hidden;和opacity：0类似。
③display:none;元素消失，不占位置。
④backgroune-color:rgba(0,0,0,0.2)只是背景色透明度，对于子元素没有影响。

计算标准：line-height: 2根据自身元素的字体大小来计算，line-height: 200%根据父元素的字体大小来计算。
继承：line-height: 2继承给子元素的是2这个缩放因子，line-height: 200%继承给子元素的是200%计算后的值。

代码##

图片.png

1- 使用 CSSsrpite 实现如下效果： http://js.jirengu.com/nafejopedu/1/edit?html,css,output
2-在iconfont上搜索"饥人谷"316， 使用字体图标实现代码1中的效果：
http://js.jirengu.com/paqoceriwa/2/edit