【我的总结】清除样式(间距、浮动、定位)

清除样式浏览器

 1、清除间距:*{margin:0;padding:0;}spa

1,便于设计,清除不一样标签的内外间距值;设计

2可使全部的浏览器这两项默认值统一,有利于后期的兼容性调整。 (不一样浏览器对不一样标签的默认margin,padding值不同)继承

2、清除浮动文档

浮动元素,脱离文档流,变成内联块元素;不会再将父撑开;并带来不少后期影响。(塌陷问题)it

1,浮动的元素后添加<div class=”cf”></div>  .cf: { clear:both;}io

2父级div定义 overflow:auto;class

3,用伪类给父级加类.clearfix来定义   兼容性

.clearfix{zoom:1;/*为了兼容IE*/}方法

.clearfix:after{ content:"";//设置内容为空

height:0;//高度为0

      line-height:0;//行高为0

      display:block;//将文本转为块级元素

      visibility:hidden;//将元素隐藏

      clear:both//清除浮动

     }

4使用双伪元素清除浮动

.clearfix { zoom: 1; }

.clearfix:before,.clearfix:after {

                  content: "";

                  display: block;

line-height: 0; 

                             }

            .clearfix:after{  clear: both;

}

 总结:种方法会增长许多没必要要的标签,

第二种方法会将超出部分隐藏在某些时候咱们想清除浮动而且保留超出部分时作不到, 第三种方法来代码多。第四种时三的改良版,比较简便。(加入:before以解决现代浏览器上边距折叠的问题

另:父给高或加浮动或绝对定位,也能够解决,但不清除浮动会带来其余影响。

3、清除定位

Position:static;(恢复默认值)

任意 position: static; 的元素不会被特殊的定位。一个 static 元素表示它不会被“positioned”,一个 position 属性被设置为其余值的元素表示它会被“positioned”

清除样式参数  元素应用哪一个样式,优先级来决定。

(可再取一个类名)从新定义,计算机解析从前日后,后来的数据会覆盖前者。

应用:基本一致的样式,CSS能够定义一次反复调用,个别修改时,加个类名再从新定义。

浏览器根据优先级来决定给元素应用哪一个样式,而优先级仅由选择器的匹配规则来决定。

内联》ID选择器》伪类=属性选择器=类选择器》元素选择器【p】》通用选择器(*)》继承的样式

权重:内联样式1000id选择器100class选择器10》标签选择器1

优先级计算 a*100+b*10+c a,b,c分别为#,类,标签出现的次数)

Ul#nav li.num1 a  1*100+1*10+3=113 (出现的次数,无论怎么组合)

 

注意事项:优先级基于类型 只能同类别比较

1、(:[] . 为 同类)。

#nav{} ID选择器类,[id=”nav”]{ }为属性选择器

2优先级的计算不是基于十进制升位的,后面的数优先级再高也不能升到前一位。(一个# 优先级高于无限个class

通用选择器(*),子选择器(>),和相邻同胞选择器(+)并不在这个等级中,因此他们的权值为0。不参与计算。

!Important 尽可能少用。用于特殊改变和改变行内样式。

相关文章
相关标签/搜索