css单位
绝对单位:cm、mm、in、pt、pc
相对单位:px(分辨率不同,1px大小也不同)
% (width,height,font-size的百分比市相对于父元素的相同属性来计算,line-height的百分比相当于父元素的font-size来计算,vertical-align的百分比市相当于当前元素的line-height来计算)
em (相对于当前元素的字体大小而言,如当前元素字体大小是10px 那么1em =10px ,如果当前元素没有设置字体大小则会继承父元素的font-size,如果祖先元素都没有设置字体大小,则会继承浏览器默认字体大小,浏览器默认字体大小是16px)
rem (相对于根元素的字体大小,css3引入)
css优先级
指定的样式发生冲突时,样式权值高者获胜
选择器 | 权值 |
通配符 | 0 |
伪元素、元素选择器 | 1 |
class选择器、伪类、属性选择器 | 10 |
id选择器 | 100 |
行内样式 | 1000 |
脱离文档流可以设置浮动或浮动
浮动
对自身影响:当一个元素定义了float:left/right 不管元素之前时inline,inline-block 或者其他类型 都会变成block类型(block元素可以设置width,height,padding,margin,行内元素无法设置width、height,可以设置margin-right、margin-left,无法设置margin-top,margin-bottom)
对父元素影响:当一个元素浮动之后,如果父元素没有设置高度,或者浮动元素的高度大于父元素高度,此时浮动袁术会脱离父元素,造成父元素高度塌陷
对兄弟元素影响:1.兄弟元素浮动 会同一方向【float:left】/相反放心【float:right】从左到右/从右到左 从上到下排列
2.兄弟元素不是浮动:浮动元素会覆盖兄弟元素【应为该元素已经脱离文档流,没有浮动的元素会顶上,占据原来的位置】
对子元素的影响:父元素浮动子元素也是浮动,父元素会自适应包含子元素
清楚浮动
clear:both 弊端:为了清楚浮动会添加一个没有任何意义的元素
overfloe:hidden 弊端:超出父元素会隐藏,可能业务需求上不是这样
::after伪类元素
.clearfix{ *zoom:1};//解决ie6.7兼容性
.clearfix::after{
clear:both;content:"";display:"block";height:0;visibility:hidden;
}