什么是盒模型？

盒模型的概念：盒模型是CSS布局的基石，它规定了网页元素如何显示以及元素之间的相互关系。

盒模型标准图片.jpg
盒模型的组成：content（内容）+padding（内边距）+border（边框）+margin（外边距）

现有的盒模型分两种：content-box和border-box

content-box

content-box（内容盒）的特点是width（宽度）为content（内容的宽度）。

例如如下代码中content的宽度是多少？

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .content-box{
            border: 1px solid red;
            width: 100px;
            padding :10px;
            margin: 15px;
            box-sizing: content-box;

        }
    </style>
</head>
<body>
    <div class="content-box">你好</div>
</body>
</html>
复制代码

很显然，这是一个content-box，所以内容是width的宽度，为是100px。

border-box

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .content-box{
            border: 1px solid red;
            width: 100px;
            padding :10px;
            margin: 15px;
            box-sizing: border-box;

        }
    </style>
</head>
<body>
    <div class="content-box">你好</div>
</body>
</html>
复制代码

若改为border-sizing:border-box;那width=content+padding+border=100px，所以content为78px。

从以上例子可以看出content-box和border-box之间的区别就在于content-box的宽度只包含了content,而border-box的宽度包含到border（width=content+padding+border）。

margin合并

子元素与子元素之间的合并

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .parent{
            border: 1px solid red;
        }
        .child1{
            border: 1px solid blue;
            margin-bottom: 50px;
        }
        .child2{
            border: 1px solid yellow;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child1">第一个子元素</div>
        <div class="child2">第二个子元素</div>
    </div>
</body>
</html>
复制代码

子元素与子元素之间会将上面子元素的margin-bottom和下面子元素的margin-top合并。若不想要这种合并，只需要在子元素上加句display:inline-block和width=100%就行。

父元素与子元素的margin合并

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .parent{
           
            margin: 50px 0;
        }
        .child{
            border: 1px solid blue;
            margin: 50px 0;
        }

    </style>
</head>
<body>
    <div class="parent">
        <div class="child">第一个子元素</div>
        <div class="child">第二个子元素</div>
    </div>
</body>
</html>
复制代码