浅谈盒模型
一、盒模型的组成
盒子的组成:content内容、padding内填充、border边框、margin外边距
如下图所示
直接上代码:
<!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>Document</title>
<style>
.box1 {
width: 100px;
height: 100px;
background: pink;
padding: 20px;
border: 10px rgba(0,0,0,0) solid;
margin: 20px;
}
.box2{
width: 100px;
height: 100px;
background: skyblue;
}
</style>
</head>
<body>
<div class="box1">我是一个盒子</div>
<div class="box2">我是另一个盒子</div>
</body>
</html>
运行效果如图:
以上就是基本的盒模型及其效果,当然盒模型存在一些潜在的坑,如下:
二、盒模型的注意事项
- padding不能为负值,margin可以为负值
- 背景色会平铺到非margin区域
- margin-top存在传递现象
- margin的上下叠加现象
前两点比较好理解就是字面意思,针对后两点呢,我们看看实际例子
margin-top的传递现象
<!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>Document</title>
<style>
.box1 {
width: 200px;
height: 200px;
background: pink;
}
.box2{
width:100px;
height:100px;
background:skyblue;
margin-top:30px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
按照我们的正常思维应该显示成这样:
如何解决margin-top的传递现象呢?
常用的有三种方式
- 将子盒子的margin-top换为父盒子的padding-top
- 为父盒子加边框属性border: 1px solid black
- BFC,将父盒子独立出来。当然触发盒子成为BFC的条件有很多,比较常用的就是overflow:heidden;
解决方案如下:
<!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>Document</title>
<style>
.box1 {
width: 200px;
height: 200px;
background: pink;
padding-top: 30px;
/* border: 1px solid black; */
/* overflow: hidden; */
}
.box2{
width:100px;
height:100px;
background:skyblue;
/* margin-top:30px; */
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
margin的上下叠加现象
直接看代码和效果
<!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>Document</title>
<style>
.box1 {
width: 200px;
height: 200px;
background: pink;
margin-bottom: 40px;
}
.box2 {
width: 100px;
height: 100px;
background: skyblue;
margin-top: 30px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
解决这种现象也比较简单,我们只给一个盒子设置外边距就可以了,比如直接给粉色盒子设置margin-bottom:70px;
总结
所以说盒模型布局时还是存在一些坑的,为了避免这些问题,建议大家在布局时尽量采取flex布局和gird布局,这两种呢都是是默认自带BFC规范的,会很好避免以上问题。
多次提到了BFC
可能很多小伙伴在看到这篇文章的时候还不太了解。我在这里就简单的科普一下,详细的可以看看我后面的介绍bfc文章哦
BFC概念
BFC即Block Formatting Contexts(块级格式化上下文),它是W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。
具有BFC特性的元素可以看作是隔离了的独立容器,容器里面的元素不会在布局上影响到外面的元素,并且BFC具有普通容器所没有的一些特性。
通俗一点来讲,可以把BFC理解为一个封闭的大箱子,箱子内部的元素无论如何翻江倒海,都不会影响到外部
。
BFC的触发条件
满足以下条件之一,即可触发BFC:
- float的值不是none
- position的值不是static或者relative
- display的值是inline-block、table-cell、flex、table-caption或者inline-flex
overflow的值不是visible
下面的box盒子就是一个BFC独立容器:
.box{
width: 100px;
height: 100px;
overflow: hidden; /* 触发了BFC,形成独立盒子 */
}