【积累总结】CSS日常总结

1.float和position:absolute | position:fixed会默认把元素转换成inline-block, 如果元素没有指定宽高,则元素的宽高由内容撑开。

2.display:none隐藏对象,隐藏后不占有位置

   visibility:hidden隐藏元素,隐藏后继续占有原位置

   overflow:visible | auto | hidden | scroll   不剪切内容也不添加滚动条 | 超出显示滚动条不超出不显示滚动条 | 超出的部分隐藏掉 | 总是显示滚动条

3.只有position:relative|absolute|fixed 才能设置z-index 生效(取值正负0都可以),其余标准流、浮动、静态定位都没有此属性。

4.浮动的元素总是找离他最近的父元素对齐,但是不会超出父元素内边距的范围

5.如果一个盒子没有给定宽度|高度或者盒子的宽度|高度继承其父元素的宽度|高度,则设置padding不影响盒子大小

6.垂直外边距塌陷:

  6.1相邻块元素垂直外边距塌陷:

    当上下相邻的两个块元素相遇时,上面的元元素有margin-botton,下面的元素有margin-top,则他们之间的垂直间距不是margin-bootom和margin-top之和,而是两者中的较大者。

    解决方案:尽量避免同时设置相邻元素的上下外边距。

  6.2嵌套块元素垂直外边距塌陷:

    对于两个嵌套关系的块元素,如果父元素没有上内边距及边框,则父元素的上外边距会与子元素的上外边距发生合并,合并后的外边距为两者中的较大者,即使父元素的上外边距为0也会发生合并。

    解决方案1:给父元素设置1像素的上边框或者上内边距。

    解决方案2:给父元素添加overflow:hidden等触发BFC。

7.CSS优先级:

  

  7.1继承的权重为0(权重计算相同情况下 继承下来的是不能层叠掉自身设置的属性的)

  7.2优先级总结:

    7.2.1使用了!import声明的规则

    7.2.2内嵌在HTML元素的style属性里面的声明

    7.2.3使用了ID选择器的规则

    7.2.4使用了类选择器,属性选择器,伪元素和伪类选择器的规则

    7.2.5使用了元素选择器的规则

    7.2.6只包含一个通用选择器的规则

    7.2.7同一类选择器遵循就近原则

    

猜你喜欢

转载自www.cnblogs.com/buerjiongjiong/p/11941698.html