CSS 盒模型 (Box Model), 包含的要素分别为: content/padding/border/margin.

标准盒模型 & 怪异盒模型

盒模型分为W3C的标准盒模型和IE的标准盒模型.

  • 标准盒模型
    content + padding+ border + margin 标准盒模型的 content 是不包含其他部分的, 如下图:
    W3C-BOX

  • IE标准盒模型
    content(padding + border) + margin 而IE标准盒模型的 content 已经包含padding和border的值, 如下图:
    IE-BOX

在文档顶部声明 DOCTYPE 就是为了让浏览器使用 W3C标准盒模型, 但是在 IE5/ IE6 下依然是 IE 标准盒模型. 当然通过box-sizing属性可以在两者之间转换.

常见问题

  1. 两个垂直方向相邻的块级元素相遇时, 外边距会合并且取值两者较大值的 margin 作为外边距.

    1
    2
    3
    4
    5
    解决方案:
     *{
        margin: 0; 
        padding: 0
    }

  2. margin 出轨…
    当父元素没有 border 边框时, 第一个子元素添加 margin-top 会超出父元素, 相同最后一个子元素添加 margin-bottom 也同样会超出父元素, 如下图:

  • 第一个子元素添加 margin-top
    marginTop

  • 最后一个子元素添加 margin-bottom
    marginBottom

  • 前两者同时存在时, 父元素添加 border
    marginBottom

解决方案有四种:

  1. 给父元素添加 border.
  1. 给父元素添加 padding.
  1. 给父元素添加 overflow: hidden.
  1. 给父元素添加伪类. (最佳)
    1
    2
    3
    4
    .parent {
        content: '';
        display: table;
    }

Created on 2017-8-15 by Cara