前端面试准备之——CSS篇

1、元素定位有哪些？

absolute 以第一个不是以static定位的父元素进行定位

fixed 以浏览器窗口进行定位

relative 相对于其正常定位进行定位

static 默认定位，元素出现在正常的文档流中

2、CSS的选择符有哪些？优先级算法怎么定义？

id选择器 #id

类选择器 #class

伪类选择器 #id：after

标签选择器 div

相邻选择器 div+p( 同级兄弟元素）

子代选择器 div>p

后代选择器 div p

通配选择器 *

属性选择器 

  a[href^="http"] a的href属性以http开头的 

  a[href *="www"] a的href属性 sdwww的  

  a[href $="com"]以com结尾

  p[class ~="item"] 所有p标签中类名包括item的  

  p[title ="aaa"] p的title为aaa的

优先级算法

important > 行内样式 > id选择器> 类选择器 = 伪类选择器 > 标签选择器 > 其他

权重一样的就近原则

CSS可以继承的样式有哪些，不可以继承的样式有哪些？

可以继承 font-size    font-family    text-indent(首行缩进)     color

不可以继承  width  height  border margin padding

CSS3新增的伪类有哪些

3、如何清除元素浮动？

1、 在浮动元素后面添加

.clear{  clear: both;  font-size: 0;  height: 0;  overflow: hidden;}

2、 在浮动元素后面添加

3、还用伪类对象和zoom（推荐使用）

给浮动元素的父元素添加 .clear属性

.clear{ zoom : 1} 触发IE的hasLayout  属性

.clear:after{ dispaly: block; clear: both; content：" " ;  height: 0;  visibility: hidden;}\

4、触发元素的BFC

①、 使用overflow属性触发

给父元素设置 overflow： hidden；  或者 overflow：auto；

②、 使用display属性触发

给父元素设置 display：inline-block

③、使用float属性

给父元素设置float属性

这三种方式都会触发元素的BFC，元素内部的元素的各个属性不会影响到元素外部

4、 em 、 rem 、 百分比、 vw 、 vh 、 vmin、 vmax 、 ch、 ex 

em是依赖父元素的font-size  eg： 父元素的font-size = 16px  则1em = 16px

rem是依赖html 的font-size eg： html{font-size:16px} 则1rem = 16px  （IE9 以上） 

vw 是根据视口的宽度的百分比  vh是根据视口的高度的百分比 （IE10以上）

vmin 是 vw和vh 中较小的一个     vmax 是 vw 和 vh 中较大的一个

ch 是根据字符0的宽度    ex是小写x字符的高度