css盒模型

·  阅读 111

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

image.png

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%;
}

效果图如下:

image.png

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改