美文网首页
两个经典Bug及其解决方法

两个经典Bug及其解决方法

作者: Xara_ | 来源:发表于2019-03-24 19:36 被阅读0次
  1. margin塌陷:当父元素包裹着子元素时,垂直方向的margin取两者之中较大的数值。
    解决方法:
    1.给父元素设置一个border-top(不建议采用)
    2.bfc(block format context --- 块级格式化上下文)

如何触发一个盒子的bfc:
1.position: absolute;
2.display: inline-block;
3.float: left / right;
4.overflow: hidden; (隐藏溢出部分)

利用bfc改变父元素渲染规则,针对需求选取4种触发bfc的方法解决塌陷问题

  1. margin合并:两个兄弟元素垂直方向上的margin会合并,margin会取两者之中较大的值。
    解决方法:给其中一个或两个元素都增加一个父级,并用bfc改变父级元素的渲染规则(一般允许存在margin合并,可用计算方法实现所需效果

相关文章

网友评论

      本文标题:两个经典Bug及其解决方法

      本文链接:https://www.haomeiwen.com/subject/cnfpvqtx.html