css笔记

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;

}