1.text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中
text-align: center使作用是让块级元素里的内容（如文字，图片等）相对于块级元素居中，可继承
2.IE 盒模型和W3C盒模型有什么区别?
盒模型
W3C标准盒模型中padding、border所占的空间不在width、height范围内，大家俗称的IE的盒模型width包括content尺寸＋padding＋border。
ie678怪异模式（不添加 doctype）使用 ie 盒模型，宽度=边框+padding+内容宽度。chrome， ie9+, ie678(添加 doctype) 使用标准盒模型， 宽度= 内容宽度。
3.*{ box-sizing: border-box;}的作用是什么？
可把整个页面的所有元素默认的W3C盒模型标准转化为IE盒模型标准
box-sizing: content-box：w3c标准盒模型
box-sizing: border-box：“IE盒模型”
4.line-height: 2和line-height: 200%有什么区别?
- 数值：继承的时候，浏览器会先将line-height这个属性继承给子元素，再由子元素计算。自身font-size的2倍。
- 百分数：继承的时候，浏览器会先将行高对应的具体的数值计算出来以后再继承。父元素的font-size的200%。
5.inline-block有什么特性？如何去除缝隙？高度不一样的inline-block元素如何顶端对齐?
inline-block 内联块级元素，既能放在一行（内联元素特性），又能设置宽高及padding margin（块级元素特性）。
inline-block 元素间的空白/回车换行会产生缝隙，去除缝隙可以使html标签连续（无空白/折行），还可以设置其父元素font-size:0; 然后在inline-block元素内恢复font-size。
在父元素中使用vertical-align:top; 可以让高度不一样的inline-block 元素顶端对齐。（取值：top/bottom/middle)
6.CSS sprite 是什么?
CSS精灵图（雪碧图）
CSS Sprites
简单来说：指将不同的图片/图标合并在一张图上。
使用CSS Sprite 可以减少网络请求，提高网页加载性能。
7.让一个元素"看不见"有几种方式？有什么区别?
隐藏or透明
opacity: 0 ; 透明度为0，整体
visibility: hidden ; 类似于 opacity:0
background-color: rgba(0，0，0，0); 只是背景色透明
display:none; 消失，不占用位置，浏览器不会去绘制它
前三种方法仅仅是改变其透明度，让其"假消失"，看不见，但存在。
网友评论