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

外边距+盒模型面积

作者: 纳尔大大在微笑 | 来源:发表于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=(宽+左内边距+右内边距+左边框+右边框)
(高+上内边距+下内边距+上边框+下边框)

相关文章

  • 外边距+盒模型面积

    外边距 语法规则同padding,不会影响盒模型面积。 同级margin之间上下叠压,左右相加。 注意俩个问题: ...

  • css-盒模型和box-sizing

    盒模型: 可以看到,一个盒模型包括margin(外边距)-->border(边框)-->padding(内边距)-...

  • 盒子模型

    标准盒模型 IE盒模型 盒模型的转化 css 外边距合并 上下方向相邻的元素框垂直相遇时,外边距会合并,合并后的外...

  • 盒模型

    一、盒模型包括哪些属性 盒模型包括:内容、内边距(padding)、边框(border)、外边距(margin)这...

  • 任务9

    盒模型包括哪些属性?盒模型的属性:border(边框) margin (外边距)padding (内边距)。 t...

  • 理解盒模型

    1:怎么理解盒模型 ? 解: 标准模型 和 IE盒模型. 由外边距margin、内边距padding、边框bord...

  • html+css 13

    开篇十三章 1、盒模型代码简写 还记得在讲盒模型时外边距(margin)、内边距...

  • 标准盒模型 + ie怪异盒模型

    一、基本概念 什么是盒模型:盒模型包括内容(content)、外边距(margin)、边框(border)、内边距...

  • 浮动。box

    盒子样式 内边距:padding 外边距:margin 外边距重叠: 浮动:float 内联元素浮动: 内联元素盒模型:

  • CSS盒模型

    盒模型从外到里为:外边距margin,边框border,内边距padding,内容。 1.外边距margin,边框...

网友评论

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

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