个人总结清除样式（间距浮动定位）

Posted 2020-10-16

清除样式

 一、清除间距：*{margin:0;padding:0;}

1，便于设计，清除不同标签的内外间距值；

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

二、清除浮动

浮动元素，脱离文档流，变成内联块元素；不会再将父撑开；并带来很多后期影响。（塌陷问题）

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

2，父级div定义 overflow:auto;

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以解决现代浏览器上边距折叠的问题）

另：父给高或加浮动或绝对定位，也可以解决，但不清除浮动会带来其他影响。

三、清除定位

Position:static;（恢复默认值）

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

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

（可再取一个类名）重新定义，计算机解析从前往后，后来的数据会覆盖前者。

应用：基本一致的样式，CSS可以定义一次反复调用，个别修改时，加个类名再重新定义。

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

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

权重：内联样式1000》id选择器100》class选择器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 尽量少用。用于特殊改变和改变行内样式。