关于css权重和margin塌陷及bfc元素

我们都知道css选择器的循序是!important > 行间样式 > id选择器 > 类选择器 | 属性选择器 | 伪类 >标签选择器 | 伪元素 > 通配符

之所以会有上面的先后循序是因为css选择器之间的权重不同

important                                    Infinity

行内样式                                       1000

id选择器                                        100

类选择器 | 属性选择器 | 伪类           10

标签 | 伪元素                                   1

通配符                                             0

选择器权重是256进制

在现实生活中Infinity和Infinity+1是相等的, 但是在计算机中Infinity+1>Infinity

当出现复杂选择器的时候, 只需要将多个选择器的权重相加即可区分出选择器优先级

———————————————–华丽的分割线———————————————–

margin塌陷现象 : 

当两个元素嵌套在一起的时候, 外层盒模型的margin-top取决于内层盒模型和外层盒模型的最大值, 且内层盒模型的margin-top无效

如图 : 

还未进行margin-top设置时 :

当内层盒模型进行margin-top:100px;时 :

代码在浏览器上的表现并不是我们一开始想的那样 , 而是出现了margin塌陷现象

如何解决margin塌陷呢 ? 

触发bfc特性的元素可以解决margin塌陷

如何触发呢

利用外层盒模型触发bfc特性 :

1 display: inline-block;

2 position: absolute;

3 float: left/right;

4 overflow: hidden;

利用内层盒模型触发bfc特性 :

1 display: inline-block;

2 position: absolute;

3 float: left/right;

———————————————–华丽的分割线———————————————–

注意 : position: absolute和float: left/right会隐式的改变元素的display: inline-block( display:none除外 )

         任何元素只要带有inline的属性比如display: inline-block都会带有文字特性

         float不能被没有带有bfc块状元素看见