盒模型
css中，有两种盒模型，分别是content-box（内容盒子）和border-box（边框盒子）
要了解什么是盒模型，首先要了解盒子的基本构成：内容content、边框boder、padding内边距、margin外边距
其中外边距负责的是和别的盒子分开，我们来看看一个盒子的完整元素带给我们的呈现效果
content-box是什么
当给内容盒子设置宽高时，实际上是给内容设置宽高，其padding、border、margin都是需要独立设置的，所以比如你给内容盒子设置width：100px；height：100px时，只是给内容做了一个限定。
真正要呈现出来的盒模型大小就是：
你设置的宽高+padding+border+margin
border-box是什么
当你给border盒子设置宽高时，实际上是把它的padding、border也计算在内（margin不计算），最终得出来的结果的公式为widthorheight= content+border+padding。
真正呈现出来的盒模型大小就是：
你设置的宽高+margin
如何切换盒模型？
box-sizing:border-box
box-sizing：content-box 默认
推荐使用border-box
彩虹图
效果
代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
border-radius: 50%;
}
.parent {
border-radius: 0;
width: 400px;
height: 200px;
overflow: hidden;
}
.parent>div {
border: 1px solid transparent;
background-color: red;
height: 380px;
margin: 10px;
}
.parent>div>div {
border: 1px solid transparent;
background-color: orange;
height: 360px;
margin: 10px;
}
.parent>div>div>div {
border: 1px solid transparent;
background-color: yellow;
height: 340px;
margin: 10px;
}
.parent>div>div>div>div {
border: 1px solid transparent;
background-color: green;
height: 320px;
margin: 10px;
}
.parent>div>div>div>div>div {
border: 1px solid transparent;
background-color: blue;
height: 300px;
margin: 10px;
}
.parent>div>div>div>div>div>div {
border: 1px solid transparent;
background-color: aqua;
height: 300px;
margin: 10px;
}
.parent>div>div>div>div>div>div>div {
border: 1px solid transparent;
background-color: purple;
height: 280px;
margin: 10px;
}
.parent>div>div>div>div>div>div>div>div {
border: 1px solid transparent;
background-color: white;
height: 260px;
margin: 10px;
}
</style>
</head>
<body>
<div class="parent">
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
