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、 在浮动元素后面添加<div class="clear"></div>
.clear{ clear: both; font-size: 0; height: 0; overflow: hidden;}
2、 在浮动元素后面添加 <br clear="all"/>
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字符的高度