前端面试大全（三）

第三部分 CSS

· 介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？

· CSS盒子模型：由四个属性组成的外边距(margin)、内边距(padding)、边界(border)、内容区(width和height);

· 标准的CSS盒子模型和低端IE CSS盒子模型不同：宽高不一样

· 　　标准的css盒子模型宽高就是内容区宽高；

· 　　低端IE css盒子模型宽高 内边距﹢边界﹢内容区；

· CSS选择符有哪些？哪些属性可以继承？

类型选择符（body）、群组选择符（h1，h2，h3，span）、包含选择符（h2 span）、ID选择符（#id）、Class选择符（.content）

CLASS属性，伪类A标签，列表ul、li、dl、dd、dt可以继承

· position的值relative和absolute定位原点是？

absolute :生成绝对定位的元素， 相对于最近一级的 定位不是 static 的父元素来进行定位。

fixed （老IE不支持）生成绝对定位的元素，通常相对于浏览器窗口或 frame 进行定位。

relative 生成相对定位的元素，相对于其在普通流中的位置进行定位。

static 默认值。没有定位，元素出现在正常的流中

sticky 生成粘性定位的元素，容器的位置根据正常文档流计算得出

· 如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？

Margin 0 auto

#dingwei{padding:10px;background-color:#003300;color:#FFFFFF;

width:600px;height:300px;

display:block;

position: absolute;

top:50%;

left:50%;

margin-left:-300px;

margin-top:-150px;}

· CSS权重优先级是如何计算的？

！import > id > class > tag

• 请解释一下为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式

浮动float最开始出现的意义是为了让文字环绕图片而已，但人们发现，如果想要三个块级元素并排显示，都给它们加个float来得会比较方便

清除浮动是指清除由于子元素浮动带来父元素高度塌陷的影响。

1.三个div 水平排列，需要用到浮动，但如果用一个边框包起来，由于使用了浮动不能实现，就需要清除浮动 clear：both

2，采用伪元素

zoom：1清除浮动原理：清除浮动，触发hasLayout；Zoom属性是IE浏览器的专有属性，它可以设置或检索对象的缩放比例。解决ie下比较奇葩的bug。譬如外边距（margin）的重叠，浮动清除，触发ie的haslayout属性等。来龙去脉大概如下：当设置了zoom的值之后，所设置的元素就会就会扩大或者缩小，高度宽度就会重新计算了，这里一旦改变zoom值时其实也会发生重新渲染，运用这个原理，也就解决了ie下子元素浮动时候父元素不随着自动扩大的问题。Zoom属是IE浏览器的专有属性，火狐和老版本的webkit核心的浏览器都不支持这个属性。然而，zoom现在已经被逐步标准化，出现在 CSS 3.0 规范草案中。目前非ie由于不支持这个属性，它们又是通过什么属性来实现元素的缩放呢？可以通过css3里面的动画属性scale进行缩放。