问答

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

作用：text-align属性描述元素中的文本和其他内联元素如何在其父元素中水平对齐对齐。center为居中对齐

作用在文本块级元素（h、p等）和其他内联元素’

可以让img p span h1-h6等水平居中对齐

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

如图

    假设一个div 我们设置:

height:100px   , width:100px, padding:10px ,border 1px, padding:10,  margin:10px,

在标准盒模型中：

那么这个盒模型的高度为：100+10+1+10+10+1+10=142

宽度为：100+10+1+10+10+1+10=142

内容大小为100 100;

在IE盒模型中:

高度：100+10=110

宽度：100+10=110

内容大小为    89  89；

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

box-sizing: content-box：w3c标准盒模型

box-sizing: border-box：“IE盒模型”,直接用ie盒模型设置box

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

如图分别把.parent的line-height设置为300%和3

得到的结果为

当.parent设置为line-height:300%时,parent的高度为300%*20=60px,child的高度为60px继承了父级的高度

当.parent设置为line-height:3时，parent的高度为3*20=60px,child的高度为40*3=120（font-size*line-height）,继承了父级的line-height

所以数字会继承父级的line-height，百分比不会

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

既呈现 inline 特性(不占据一整行，宽度由内容宽度决定),又呈现 block 特性 (可设置宽高，内外边距)

解决办法:删除标签之间的空白处

将父容器的字体大小设为零，再设置子元素字体设置为相应大小

设置vertical-align:top;

CSS sprite 是什么?

指将不同的图片/图标合并在一张图上。

使用CSS Sprite 可以减少网络请求，提高网页加载性能。

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

opacity: 0; 透明度为0，整体

visibility: hidden; 和opacity:0 类似

display:none; 消失，不占用位置

background-color: rgba(0，0，0，0.2)只是背景色透明

代码

使用 CSSsrpite 实现如下效果【效果范例317】. ps: 图片

github地址

在iconfont上搜索"饥人谷"242， 使用字体图标实现代码1中的效果

地址

注意：由于 jsbin 不支持上传文件，所以你不应该在 jsbin 上使用本地链接来制作 iconfont！你应该使用 阿里的 CDN 链接！！！