这是我参与「4月日新计划更文活动」的第8天。
我们今天讲一下盒模型。
那什么是盒模型呢？
HTML的盒模型是指一个元素在页面中所占的空间，包括元素的内容区域、内边距（padding）、边框（border）和外边距（margin）。
在很早的时候，浏览器版本特别多，IE的低版本还需要兼容怪异盒模型，其他版本的浏览器都是标准盒模型。
那标准盒模型和怪异盒模型之间有什么区别呢？
标准盒模型的宽度和高度只包括内容区域，而怪异盒模型的宽度和高度包括了边框和内边距。在CSS中可以通过box-sizing属性来控制使用哪种盒模型。
接下来我以一个例子来解释一下这两种盒模型。
标准盒模型展示的效果如下
代码如下：
<!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>标准盒模型</title>
</head>
<style>
.container{
width: 100px;
height: 100px;
background: blue;
padding: 5px;
border: 2px solid red;
margin: 10px;
box-sizing: content-box;
}
</style>
<body>
<div class="container"></div>
</body>
</html>
我们再来看下盒模型的展示效果。
我们在css中设置了宽度和高度都是100px，padding是5px，border是2px，margin是10px。
可以看到标准盒模型中的内容区域就是宽高都是100px。
这个时候我们将box-sizing属性值改成border-box，可以看到此时盒模型变成了下面这样：
此时设置的宽度100px和高度100px,包含了这里的content宽度86px，padding宽度5px * 2，border的宽度2px * 2。加起来的宽度正好等于100px。
所以可以得出这个结论：
1、标准盒模型的宽度和高度只包括内容区域。 2、怪异盒模型的宽度和高度包括内容区域、边框和内边距。
看到掘金上的好文章，如果对你有帮助，顺手点个赞，或者把文章收藏。不用担心找不到了，以后也能经常收到类似好回答，我会持续进行更新。
