一、概念

CSS盒模型本质上是一个盒子，封装周围的HTML元素，包括 外边距（margin）、边框（border）、内边距（padding）、实际内容（content）四个属性。

1.1 W3C盒子模型（标准盒模型）

content-box 内容盒-内容就是盒子的边界

1.2 IE盒子模型（怪异盒模型）

border-box 边框盒-边框才是盒子的边界

1.3计算公式

• content box内容盒的宽度或者高度的计算方式为：width/height=content

• border-box 边框盒的宽度或者高度的计算方式为：width/height = content + padding + border

• 一般常用border-box

二、margin合并与阻止margin合并

合并情况

• 父子 margin 合并 （上下margin合并，左右不合并）
• 兄弟 margin 合并

如何阻止合并

• 父子合并用 padding / border 挡住
• 父子合并用overflow: hidden挡住

overflow值不为visible，即为auto或者hidden时，就创建了一个BFC

BFC垂直方向边距重叠问题

<style>
        #margin {
            background: #1890FF;
            overflow: hidden;
        }
        #margin p {
            margin: 15px auto 25px;
            background: red;
        }
    </style>

    <section id="margin">
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
    </section>

1，2，3，4的上边距应该都是15px，下边距都是25px，很明显，1和2，2和3，3和4之间的边距发生了重叠，重叠的原则就是取较大值，即1和2之间的距离是25px。

给某个子元素添加一个父元素，然后给这个父元素添加一个BFC，可以解决该子元素的边距重叠问题，如下，给2添加一个父级div，然后给定样式overflow: hidden。

 <style>
        #margin {
            background: #1890FF;
            overflow: hidden;
        }
        #margin p {
            margin: 15px auto 25px;
            background: yellowgreen;
        }
    </style>
    <section id="margin">
        <p>1</p>
        <div style="overflow: hidden">
            <p>2</p>
        </div>
        <p>3</p>
        <p>4</p>
    </section>

1和2，2和3之间就没有边距重叠现象了，边距都变成15+25=40px了，而不是之前取较大值的25px。