入门9 css常见样式2

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

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

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

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

• IE盒模型中的width,height 是content + padding + border的大小；
• W3C盒模型中的width, height是content的大小；

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

将整个页面的所有盒模型设置为IE盒模型。
content-box设置为w3c盒模型。

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

• line-height: 2
  继承2这个因子。父元素设置line-height:2会直接继承给子元素，子元素根据自己的font-size再去计算子元素自己的line-height。相对于字体本身扩大2倍
• line-height: 200%
  继承数值。是计算好了line-height值，然后把这个计算值给子元素继承，子元素继承拿到的就是最终的值了。此时子元素设置font-size就对其line-height无影响了。相对于父级字体扩大2倍。

---

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

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

特性:

1. 默认不占据一行。
2. 设置的上下padding、margin、border占据文档空间。
3. 水平排列按照base-line对齐，且元素之间会存在一个'空'元素的缝隙。
4. 可以用vertical-align设置垂直对齐。
5. 可以设置text-align属性有效。
6. 会形成一个BFC(块级格式化上下文。

总结：一个拥有正常盒模型的行内元素，既拥有inline的特点，也有block的特性，

去除缝隙：

1. 修改html不换行。
2. 父元素设置font-size:0;
3. 设置负margin值。
4. 元素设置浮动。

高度不一致的inline-block的顶端对齐vertical-align:top;

6. CSS sprite 是什么?

CSS sprite又称之为精灵图。
原理：把多个小icon合成一个大的图片，使用的时候，元素以这张合成后的大图为背景，通过设置background-position的属性来获取指定icon。
优点：合并原来图片的请求，减少http的性能消耗。 缺点：CSS sprite不能太大，不然下载图片的时间会过长。
应用：

1. 制作一张网页的图标。
2. 制作动画。

潜伏题：
域名发散和域名收敛

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

• opacity: 0 ; 透明度为0，整体
  元素隐藏，依然占据空间；会被子元素继承,且子元素并不能通过opacity:1;进行反隐藏；元素依然能触发已绑定的事件；opacity,transition;对它有效。
• visibility: hidden ; 和opacity:0 类似
  元素隐藏，依然占据空间；会被子类继承，子类也可以通过显示的设置visibility: visible;来反隐藏；不会触发该元素已经绑定的事件;动态修改此属性会引起重绘；visibility,transition;对它无效。
• display:none; 消失，不占用位置
  浏览器不会生成属性为display: none;的元素；不占据空间（毕竟都不渲染啦），所以动态改变此属性时会引起重排；不会被子类继承，子类也是不会显示的；display是个尴尬的属性，transition对她无效。
• background-color: rgba(0，0，0，0) 只是背景色透明
  最后一位为设置背景色的透明度，0-1，越接近1越不透明。

---

参考答案
常规：

1. display:none;

2. visibility:hidden;

3. opacity:0;
   其他(以下消失都是有前提条件的)：

4. height:0;width:0;padding:0;margin:0;border:0; ... etc

5. position:absolute; left:1000000px; top:100000px; ...etc;

6. z-index:-1000;...etc

7. background-color:rgba(0,0,0,0);
   总结： 元素"看不见"的方式主要方式让元素用户在当前页面展示的视口里看不见。

区别：

1. display:none;从文档流消失，不占据文档空间，但是还存在DOM树中。
2. visibility:hidden;和opacity:0;还是会占据文档空间。
3. display:none;和visibility:hidden;绑定的事件不会触发。
4. opacity:0;的元素绑定的事件还是会触发事件。

潜伏题： jQuery是如何实现获取一个元素的正常宽高的。