wangjie-fourth 的个人博客

记录精彩的程序人生

目录
CSS03 - 盒模型
/    

CSS03 - 盒模型

盒模型

盒模型分为俩种:

  • content-box:内容盒:标签内容就是盒子得边界
  • border-box:边框盒:边框才是盒子得边界

我们可以使用box-sizing属性来指定该标签是什么模型。比如:

.border{
    box-sizing:border-box;  
}

.content{
    box-sizing:content-box;  
}

这俩种盒模型的区别,主要体现在widthheight上:

  • content-boxwidth = 内容宽度
  • border-boxwidth = 内容宽度 + padding + border

同理:高度height也是不同

image.png
border-box更好用。


margin合并

在盒模型中,父子盒模型、兄弟盒模型会出现marign合并。但是需要注意,只会重叠上下的margin,不会重叠左右的margin
1、父子margin合并
image.png
也就是父子的俩个盒模型之间的margin是会合并的。
(1)如何消除这种效果呢?

  • 使用padding挡住;
    在父元素添加如下属性
padding-top: 1px;

image.png

  • 在父元素添加overflow:hidden挡住;
  • 在父元素添加display:flex布局;

2、兄弟margin合并
image.png
也就是相邻的俩个盒模型之间的margin是会合并的。
(1)如何消除这种效果呢?
在这俩个元素上添加下面的样式

width: 100%;
display: inline-block;

image.png

了解单位

1、长度单位

  • px像素
  • em相对于自身文字大小font-size的倍数
  • 百分数
  • 整数
  • rem
  • vwvh

2、颜色

  • 十六进制#FF6600或者#F60
  • RGBA颜色rgb(0,0,0)或者rgba(0,0,0,1)
  • hsl颜色hsl(360,100%,100%)

不要使用宽度百分之百
不使用content-box


彩虹的实现

image.png
1、为什么body边框只有那么一点,当我改变body颜色后,会改变页面其他颜色呢?

首先,body面积就是边框那个面积。之所以改变这个body面积后,会改变页面其他的颜色,是因为自动填充背景色

2、相关代码
(1)html

<!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>

(2)css代码

*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body{
  border: 1px solid black;
  background: white;
}
.rainbow {
  height: 200px;
  overflow: hidden;
}
.rainbow div{
  overflow: hidden;
}
.rainbow > div{
  width: 400px;
  height: 400px;
  background: hsl(0,80%,50%);
  border-radius:50%;
}
.rainbow > div > div{
  background: hsl(60,50%,50%);
  height: 380px;
  margin: 10px;
  border-radius:50%;
}
.rainbow > div > div > div{
  background: hsl(120,50%,50%);
  height: 360px;
  margin: 10px;
  border-radius:50%;
}
.rainbow > div > div > div > div{
  background: hsl(180,50%,50%);
  height: 340px;
  margin: 10px;
  border-radius:50%;
}
.rainbow > div > div > div > div > div{
  background: hsl(240,50%,50%);
  height: 320px;
  margin: 10px;
  border-radius:50%;
}
.rainbow > div > div > div > div > div > div{
  background: hsl(300,50%,50%);
  height: 300px;
  margin: 10px;
  border-radius:50%;
}
.rainbow > div > div > div > div > div > div > div{
  background: hsl(330,50%,50%);
  height: 280px;
  margin: 10px;
  border-radius:50%;
}
.rainbow > div > div > div > div > div > div > div > div{
  background: hsl(330,50%,100%);
  height: 260px;
  margin: 10px;
  border-radius:50%;
}
评论