美文网首页
外边距+盒模型面积

外边距+盒模型面积

作者: 纳尔大大在微笑 | 来源:发表于2016-08-01 22:20 被阅读0次

    外边距

    语法规则同padding,不会影响盒模型面积。

    同级margin之间上下叠压,左右相加。

    注意俩个问题:

    1. 上下叠压现象
      产生原因:在正常使用盒模型的情况下,同级之间使用margin上下之间会产生叠压现象。最终间距取最大值。
      如题:在一个div中有两个子级div,第一个子级div向下外边距为50px,第二个子级div向上外边距为90px,问此时二者之间的像素值是多少? 90px
    2. 子债父偿现象
      产生原因:对某一标签的第一个子级使用margin或者margin-top时,如果这个子级元素是块元素,则产生子债父偿现象。
      解决方案:
    • 在父级添加overflow:hidden;
    • 在父级添加一个border
    • 不使用margin,在父级添加padding-top

    盒模型面积

    S=(width+padding-left+padding-right+border-left+border-right)(height+padding-top+padding-bottom+border-top+border-bottom)
    S=(宽+左内边距+右内边距+左边框+右边框)
    (高+上内边距+下内边距+上边框+下边框)

    相关文章

      网友评论

          本文标题:外边距+盒模型面积

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