css盒子模型的理解这是一道经常会被问到的面试题，也有很多小白对css盒模型不了解，如果足够的掌握，那么使用css布局会

这是一道经常会被问到的面试题，也有很多小白对css盒模型不了解，如果足够的掌握，那么使用css布局会容易很多，接下来，请阅读这篇文章，希望对初学者有用。

一、css盒子模型概念

1、什么是盒模型

元素的外边距(margin)、边框（border）、内边距(padding)、内容(content)就构成了盒模型。

2、两种盒模型

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

border-box 边框盒 -边框才是盒子的边界IE盒子模型

从上图可直观的看出，content box内容盒的宽度或者高度的计算方式为：width/height=content，border-box 边框盒的宽度或者高度的计算方式为：width/height = content + padding + border

3、margin合并和阻止外边距合并

<!--父子margin合并 只有上下margin会合并-->
  <style>
        .parent {
            margin: 15px;
            background: red;
           ` <!--阻止外边距合并的方法-->`
             padding-top: 1px;          //方法一
             overflow: hidden;          //方法二
             border-top: 1px solid green; //方法三
        }
       .child {
            border: 2px solid blue;
            margin: 30px;
        }
       body {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">第一个孩子</div>
        <div class="child">第二个孩子</div>
        <div class="child">第二个孩子</div>
        <div class="child">第二个孩子</div>
        <div class="child">第二个孩子</div>

    </div>

</body>