问答

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

text-align 定义行内内容如何相对于它的块级父元素对齐,text-align并不控制父元素自己的对齐;作用在块级父元素上,可以让块级元素的行内元素水平居中.

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

在一个文档中,每个元素都被表示为一个矩形的盒子,盒模型描述了元素所占空间的内容;盒模型有两种:

• ie盒模型: IE盒模型的宽度width=content+padding+border;真实的宽度就是设置的宽度(box-sizing: border-box)
• 标准盒模型: 设置标准盒模型的宽度是指content的宽度,真实宽度是border+padding+content(box-sizing: content-box)

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

将所有元素设置盒子模型为IE盒模型

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

• line-height: 2 : 表示行高为当前元素字体大小的2倍;继承的时候,浏览器会先将line-height这个属性继承给子元素,再由子元素计算;若希望子元素继承行高,通常用数值
• line-height: 200% : 表示行高为当前文本所在块级元素的父级元素font-size的2倍(若是行内元素的文本,则是行内元素所在块级元素的父元素的font-size的2倍);继承的时候,浏览器会 先将行高对应的数值计算出来再继承,所有后代元素的行高相同

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

• inline-block使元素既呈现inline特性,不占据一整行,宽度由内容宽度确定;又呈现block特性可以设置宽高,内外边距
• 可以将父元素font-size设为0,再对本元素的字体大小复原,消除缝隙;还可以去除代码间的空格和换行,让元素挨在一起.
• 对inlin-block元素应用vertical-align: top可以顶端对齐

6. CSS sprite 是什么?

• CSS sprtie 是一种网页图片应用处理方式,将网页中的一些背景图片整合到一张图片文件中,再利用background-image``background-repeat``background-position等属性组合进行背景定位
• 可以减少网页的HTTP请求次数,提高性能;可以减少图片所占用的空间大小
• 但是无法设置图片大小,后期维护难

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

• opacity: 0; 透明度为0,依旧占据空间
• visibility: hidden; 与opacity类似,占据空间
• display: none; 元素消失,不占据空间
• background-color: rgba(0,0,0,0) 背景色设置为透明

代码

地址1
地址2