css盒模型 - 掘金

1、什么是盒模型？

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距（margin）、边框（border）、内边距（padding）、实际内容（content）四个属性。
分两种：一种是content-box内容盒，内容就是盒子的边界，一种是border-box边框盒，边框才是盒子的边界
区别：
- content-box的宽度只包含content
- border-box的宽度包含到border，分别是border、内边距（padding）、内容（content）
公式：
- content-box width=内容宽度
- border-box width= 内容宽度+padding+border

2、彩虹制作！代码如下

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div class="rainbow">
  <div>
    <div>
      <div>
        <div>
          <div>
            <div>
              <div>
                <div>
                
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

*{
  box-sizing: border-box;
  margin:0;
  padding: 0;
  background: white;
}
.rainbow{
  height: 200px;
  overflow: hidden;
}
.rainbow div {
  overflow: hidden;
}
.rainbow>div{
  height: 400px;
  width: 400px;
  background: red;
  border-radius: 50%;
}
.rainbow>div>div{
  height: 380px;
  width: 380px;
  background: orange;
  margin: 10px;
  border-radius: 50%;
}
.rainbow>div>div>div{
  height: 360px;
  width: 360px;
  background: yellow;
  margin: 10px;
  border-radius: 50%;
}
.rainbow>div>div>div>div{
  height: 340px;
  width: 340px;
  background: green;
  margin: 10px;
  border-radius: 50%;
}
.rainbow>div>div>div>div>div{
  height: 320px;
  width: 320px;
  background: cyan;
  margin: 10px;
  border-radius: 50%;
}
.rainbow>div>div>div>div>div>div{
  height: 300px;
  width: 300px;
  background: blue;
  margin: 10px;
  border-radius: 50%;
}
.rainbow>div>div>div>div>div>div>div{
  height: 280px;
  width: 280px;
  background: purple;
  margin: 10px;
  border-radius: 50%;
}
.rainbow>div>div>div>div>div>div>div>div{
  height: 260px;
  width: 260px;
  background: white;
  margin: 10px;
  border-radius: 50%;
}

效果图如下：