zoukankan      html  css  js  c++  java
  • margintop绑架父节点问题的分析

    现象:
    当两个空的块级元素嵌套时,如果内部的块设置有margin-top属性,而且父元素没有下边解决方法所述的特征,那么内部块的margin-top属性会绑架父元素(即将margin-top传递凌驾给了父元素)。
    就好比一个小兵,看到上级有漏洞,就假传圣旨,利用漏洞扩张自己的权利。只要设置父元素的border(栅栏)或者padding(隔离墙),就能管住这个调皮的下属。

    123 <div id="parrent"> <div id="box1"></div></div> 1234567891011 #parrent{ 500px; height:300px; background:teal;}#box1{ 100px; height:100px; background:aqua; margin:20px;}

    解决方法:
    1、设置父元素或者自身的display:inline-block;
    2、设置父元素的border:1px aqua solid;(>0)
    3、设置父元素的padding:1px;(>0)
    4、给父元素设置overflow:hidden;
    5、给父元素或者自身设置position:absolute;
    6、设置父元素非空,填充一定的内容。

    这个现象并不是bug,而是有理论依据的:

    《on having layout》
    hasLayout 会影响一个盒子和其子孙的边距重叠。根据规范,一个盒子如果没有上补白和上边框,那么它的上边距应该和其文档流中的第一个孩子元素的上边距重叠。

    作者:冯亮
             
    能力有限,水平一般。如有错误,欢迎指正
  • 相关阅读:
    python os.stat() 和 stat模块详解
    Python中datetime库的用法
    js中Array的map()函数,其中的回调函数还能这么用
    通常用于返回值的三目运算符
    浏览器渲染页面的时候,不同的script块之间的关系
    模板字面量
    let和const
    js 数组 map方法
    一些常用的js循环,如for
    session
  • 原文地址:https://www.cnblogs.com/fengliang/p/3008518.html
Copyright © 2011-2022 走看看