1. text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中
text-align CSS属性定义行内内容（例如文字）如何相对它的块父元素对齐，text-align并不控制块元素自己的对齐，只控制它的行内内容的对齐。
- text-align:center的意思是块级元素中的行内内容居中。
- 作用在block-level元素上(包括了block和inline-block);
- 能让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元素如何顶端对齐?
特性:
- 默认不占据一行。
- 设置的上下padding、margin、border占据文档空间。
- 水平排列按照base-line对齐，且元素之间会存在一个'空'元素的缝隙。
- 可以用vertical-align设置垂直对齐。
- 可以设置text-align属性有效。
- 会形成一个BFC(块级格式化上下文。
总结：一个拥有正常盒模型的行内元素，既拥有inline的特点，也有block的特性，
去除缝隙：
- 修改html不换行。
- 父元素设置font-size:0;
- 设置负margin值。
- 元素设置浮动。
高度不一致的inline-block的顶端对齐vertical-align:top;
6. CSS sprite 是什么?
CSS sprite又称之为精灵图。
原理：把多个小icon合成一个大的图片，使用的时候，元素以这张合成后的大图为背景，通过设置background-position的属性来获取指定icon。
优点：合并原来图片的请求，减少http的性能消耗。 缺点：CSS sprite不能太大，不然下载图片的时间会过长。
应用：
- 制作一张网页的图标。
- 制作动画。
潜伏题：
域名发散和域名收敛
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越不透明。
参考答案
常规：
-
display:none;
-
visibility:hidden;
-
opacity:0;
其他(以下消失都是有前提条件的)： -
height:0;width:0;padding:0;margin:0;border:0; ... etc
-
position:absolute; left:1000000px; top:100000px; ...etc;
-
z-index:-1000;...etc
-
background-color:rgba(0,0,0,0);
总结： 元素"看不见"的方式主要方式让元素用户在当前页面展示的视口里看不见。
区别：
- display:none;从文档流消失，不占据文档空间，但是还存在DOM树中。
- visibility:hidden;和opacity:0;还是会占据文档空间。
- display:none;和visibility:hidden;绑定的事件不会触发。
- opacity:0;的元素绑定的事件还是会触发事件。
潜伏题： jQuery是如何实现获取一个元素的正常宽高的。
网友评论