从 HTML 到 CSS：开启网页样式之旅（五）—— CSS盒子模型
前言
- 在之前的博客中，我们深入了解了 CSS 的长度单位与元素的各种显示模式，这些知识对于我们构建网页样式起到了重要的铺垫作用。
- 而今天，我们要进一步探索CSS 盒子模型，它可是 CSS 布局的核心概念之一，掌握了它，就能更加精准地控制网页元素的呈现效果
一、盒子模型的组成
- CSS 会把所有的 HTML 元素都看成一个盒子， 所有的样式也都是基于这个盒子来设置的。这个盒子主要由以下几个部分组成：
margin（外边距）：
它表示盒子与外界的距离呢。需要注意的是，margin 不会影响盒子本身的大小，但会对盒子的位置产生影响。
- 用法
.box {
margin: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Margin Example </title>
<style>
.box1 {
background-color: lightblue;
margin: 20px;
}
.box2 {
background-color: lightgreen;
margin: 10px;
}
</style>
</head>
<body>
<div class="box1">
这是第一个盒子，设置了20px的外边距，你可以看到它与页面边缘以及其他元素之间有一定的间隔。
</div>
<div class="box2">
这是第二个盒子，设置了10px的外边距，和第一个盒子相比，它与周围的间隔会有所不同。
</div>
</body>
</html>
border（边框）：
就是盒子的边框，通过相关属性可以设置边框的风格、宽度和颜色等。
.box {
border-style: solid;
border-width: 3px;
border-color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Border Example </title>
<style>
.box {
border-style: solid;
border-width: 3px;
border-color: black;
background-color: lightyellow;
padding: 10px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<div class="box">
这里是盒子里面的内容哦，通过设置边框的样式、宽度和颜色，让盒子有了一个明显的边界呢。
</div>
</body>
</html>
padding（内边距）：
这是紧贴着内容的补白区域，能让内容和边框之间有一定的间隔。
用法
.box {
padding: 15px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Padding Example </title>
<style>
.box {
background-color: lightcoral;
padding: 15px;
border: 1px solid gray;
}
</style>
</head>
<body>
<div class="box">
这里是盒子里面的内容哦，通过设置15px的内边距，你可以看到内容与边框之间有了一定的间隔呢，让整个盒子看起来更加美观和清晰啦。
</div>
</body>
</html>
content（内容）：
元素中的文本或者后代元素等都属于它的内容。
盒子的大小计算公式是：
- 盒子的大小 = content + 左右 padding + 左右 border
外边距margin 不会影响盒子的大小，但会影响盒子的位置
二、盒子内容区（content）
在设置内容区的时候，我们有以下这些常用的 CSS 属性：
| 下面来详细讲解一下各部分 |
- width：
用来设置内容区域的宽度，属性值是长度。
- max-width：
可以设置内容区域的最大宽度，同样是长度值。不过要注意，一般它不与 width 一起使用。
- min-width：
这个属性是设置内容区域的最小宽度的，也是长度值，同样通常不与 width 一起用。
- height：
用于设置内容区域的高度，属性值为长度。
- max-height：
设置内容区域的最大高度，是长度值，一般不与 height 一起使用。
- min-height：
设置内容区域的最小高度，也是长度值，通常不与 height 一起使用
关于默认宽度
当我们不设置 width 属性时，元素会呈现出默认宽度。这里有两个关于默认宽度的公式：
- 总宽度 = 父的 content — 自身的左右 margin 。
- 内容区的宽度 = 父的 content — 自身的左右 margin — 自身的左右 border — 自身的左右 padding 。
三、盒子内边距（padding）
- padding 是个复合属性它的使用规则如下：
- padding: 10px; 这种情况下，四个方向的内边距都是 10px
- padding: 10px 20px; 此时是上 10px，左右 20px（也就是上下、左右的设置方式）
- padding: 10px 20px 30px; 这里就是上 10px，左右 20px，下 30px（上、左右、下的设置顺序）
- padding: 10px 20px 30px 40px; 那就是上 10px，右 20px，下 30px，左 40px（上、右、下、左的设置顺序）
| 这里还有几个注意点 |
- padding 的值是不能为负数的哟。
- 对于行内元素来说，上下内边距不能完美地设置
- 块级元素、四个方向的内边距都可以完美设置
四、盒子边框（border）
- 边框相关的属性有 20 个之多
- 像 border-style、border-width、border-color 其实也是复合属性
五、盒子外边距（margin）
1.margin 属性设置
- margin-left：设置左外边距，属性值是 CSS 中的长度值。
- margin-right：设置右外边距，也是 CSS 中的长度值。
- margin-top：设置上外边距，同样是长度值。
- margin-bottom：设置下外边距，还是长度值。
- margin：这是个复合属性，可以写 1~4 个值，规律和 padding 是一样的（顺时针方向），属性值也是 CSS 中的长度值呢
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Margin Example</title>
<style>
/* 第一个盒子，设置不同方向的外边距 */
.box1 {
background-color: lightblue;
width: 200px;
height: 150px;
margin-left: 30px;
margin-right: 20px;
margin-top: 15px;
margin-bottom: 10px;
}
/* 第二个盒子，使用复合属性margin设置外边距 */
.box2 {
background-color: lightgreen;
width: 150px;
height: 120px;
margin: 10px 20px 15px 25px; /* 顺时针方向：上 右 下 左 */
}
/* 第三个盒子，使用复合属性margin设置外边距，只写两个值 */
.box3 {
background-color: lightcoral;
width: 180px;
height: 130px;
margin: 12px 18px; /* 上下为12px，左右为18px */
}
/* 第四个盒子，使用复合属性margin设置外边距，只写一个值 */
.box4 {
background-color: lightyellow;
width: 160px;
height: 140px;
margin: 20px; /* 四个方向的外边距都为20px */
}
</style>
</head>
<body>
<div class="box1">
这是第一个盒子，通过分别设置margin-left、margin-right、margin-top和margin-bottom来控制外边距哦。
</div>
<div class="box2">
这是第二个盒子，使用复合属性margin设置外边距，这里按照顺时针方向分别设置了上、右、下、左的外边距哦。
</div>
<div class="box3">
这是第三个盒子，使用复合属性margin设置外边距，只写了两个值，分别对应上下和左右的外边距哦。
</div>
<div class="box4">
这是第四个盒子，使用复合属性margin设置外边距，只写了一个值，四个方向的外边距都设置为相同的值哦。
</div>
</body>
</html>
2.margin 注意事项：
- 子元素的 margin，是参考父元素的 content 来计算的，因为是在父亲的 content 中承装着子元素。
- 上 margin、左 margin 会影响自己的位置；
- 下 margin、右 margin 则会影响后面兄弟元素的位置。
- 块级元素、行内块元素都能完美地设置四个方向的 margin；
- 但行内元素就有点特别，左右margin 可以完美设置，上下 margin 设置可就无效。
- margin 的值还可以是 auto ，如果给一个块级元素设置左右 margin 都为 auto，那这个块级元素就会在父元素中水平居中。
- margin 的值是可以为负值
3.margin 塌陷问题：
什么是 margin 塌陷？就是第一个子元素的上 margin 会作用在父元素上，最后一个子元素的下 margin 也会作用在父元素上
- 例如
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 父元素样式 */
.parent {
width: 300px;
height: 300px;
background-color: lightblue;
/* 为了更明显看出效果，给父元素添加边框 */
border: 1px solid black;
}
/* 子元素样式 */
.child {
width: 200px;
height: 100px;
background-color: pink;
margin-top: 50px;
margin-bottom: 30px;
}
</style>
<title>Margin塌陷示例</title>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
按照正常理解，如果没有 margin 塌陷问题，父元素应该保持自身的高度 300px 不变，子元素在父元素内部根据设置的 margin 来调整位置。但实际上，由于 margin 塌陷现象，你会发现父元素的上边框和子元素的上边缘之间的距离并不是设置的 50px（而是子元素的上 margin 作用到了父元素上，使得父元素的上边框和子元素上边缘重合了），同样，父元素的下边框和子元素的下边缘之间的距离也不是设置的 30px（子元素的下 margin 也作用到了父元素上）
那怎么解决这个问题？
有以下几种方案
- 方案一：给父元素设置不为 0 的 padding 。
- 方案二：给父元素设置宽度不为 0 的 border 。
- 方案三：给父元素设置 css 样式 overflow:hidden
4.margin 合并问题：
什么是 margin 合并？
就是上面兄弟元素的下外边距和下面兄弟元素的上外边距会合并，取一个最大的值，而不是相加。
- 怎么解决这个问题呢？其实呀，在布局的时候上下的兄弟元素，只给一个设置上下外边距就可以啦，无需特别去解决。
六、处理内容溢出
- 当内容超出盒子的范围时，我们可以通过 overflow 相关属性来处理
| 下面来详细降解一下各部分 |
1. overflow属性介绍
2.visible（默认值）
内容会溢出元素框并且可见，超出部分会直接显示在盒子外面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Overflow Visible Example</title>
<style>
.box {
width: 200px;
height: 150px;
border: 1px solid black;
overflow: visible;
}
</style>
</head>
<body>
<div class="box">
这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的文字内容，这里是一段很长很长的语文内容，用来测试当overflow设置为visible时的效果，你会发现文字会超出盒子的边界直接显示出来哦。
</div>
</body>
</html>
3.hidden
内容超出盒子范围的部分会被隐藏，不会显示在页面上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Overflow Hidden Example</title>
<style>
.box {
width: 200px;
height: 150px;
border: 1px solid black;
overflow: hidden;
}
</style>
</head>
<body>
<div class="box">
同样是一段很长很长的文字内容，这次overflow设置为hidden，你会看到超出盒子范围的文字部分都被隐藏起来啦，看不到咯。
</div>
</body>
</html>
4.scroll
无论内容是否超出盒子范围，都会显示滚动条，用户可以通过滚动条来查看全部内容
5.auto
当内容超出盒子范围时，会自动显示滚动条；如果内容没有超出，则不会显示滚动条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"="width=device-width, initial-scale=1.0">
<title>Overflow Auto Example</title>
<style>
.box {
width: 200px;
height: 150px;
border: 1px solid black;
overflow: auto;
}
</style>
</head>
<body>
<div class="box">
这里的文字内容长度适中，当overflow设置为auto时，如果文字没有超出盒子范围，就不会有滚动条；但如果把文字内容改得很长很长，超出盒子了，就会自动出现滚动条哦。
</div>
</body>
</html>
6.overflow-x和overflow-y属性
除了overflow属性外，我们还可以分别对水平方向和垂直方向的内容溢出进行单独设置，这就用到了overflow-x和overflow-y属性。它们的取值和overflow属性类似，例如
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"="width=device-width, initial-scale=1.0">
<title>Overflow X and Y Example</title>
<style>
.box {
width: 200px;
height: 150px;
border: 1px solid black;
overflow-x: scroll; /* 水平方向设置为滚动条显示方式 */
overflow-y: hidden; /* 垂直方向设置为隐藏超出部分 */
}
</style>
</head>
<body>
<div class="box">
这里是一些内容，其中包含了比较长的文字以及可能会超出盒子宽度的图片等元素哦。通过设置overflow-x和overflow-y，你可以看到水平方向有滚动条可查看超出部分，而垂直方向超出的部分则被隐藏起来啦。
</div>
</body>
</html>
七、隐藏元素的方式
在网页设计中，有时候我们需要根据特定的条件隐藏某些元素。以下是几种常见的隐藏元素的方式
1.display: none;
当我们给一个元素设置display: none;时，该元素及其所有内容都会从页面布局中完全移除，就好像这个元素从来不存在一样。它不会占据任何空间，其他元素会自动填补它原本所在的位置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"="width=device-width, initial-scale=1.0">
<title>Display None Example</title>
<style>
.hidden-element {
display: none;
}
</style>
</head>
<body>
<div class="visible-element">
这是一个可见的元素哦，你可以看到我正常显示在这里呢。
</div>
<div class="hidden-element">
我是被设置为display:none的元素，现在你看不到我啦，而且我原本占的地方也被其他元素占了哦。
</div>
<div class="visible-element">
这又是一个可见的元素哦，我在被隐藏元素的后面呢，已经填补了它原本的位置啦。
</div>
</body>
</html>
2.visibility: hidden;
与display: none;不同的是，当设置visibility: hidden;时，元素虽然在页面上不可见了，但它仍然占据着原来的空间位置，其他元素不会填补它的位置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"="width=device-width, initial-scale=1.0">
<title>Visibility Hidden Example</title>
<style>
.invisible-element {
visibility: hidden;
}
</style>
</head>
<body>
<div class="visible-element">
这是一个可见的元素哦，你可以看到我正常显示在这里呢。
</div>
<div class="invisible-element">
我是被设置为visibility:hidden的元素，现在你看不到我啦，但我还占着我原来的地方哦，其他元素可没法填补我的位置呢。
</div>
<div class="visible-element">
这又是一个可见的元素哦，我在被隐藏元素的后面呢，它占着位置，我就只能在这儿啦。
</div>
</body>
</html>
3.opacity: 0;
设置opacity: 0;会使元素完全透明，从而在视觉上看起来好像隐藏了一样。但与前两种方式不同的是，它仍然可以响应鼠标事件等交互操作，并且同样占据着原来的空间位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"="width=device-width, initial-scale=1.0">
<title>Opacity Zero Example</title>
<style>
.transparent-element {
opacity: 0;
}
</style>
</head>
<body>
<div class="visible-element">
这是一个可见的元素哦，你可以看到我正常显示在这里呢。
</div>
<div class="transparent-element">
我是被设置为opacity:0的元素，现在你看不到我啦，但我还占着我原来的地方哦，而且你要是在我这儿点鼠标，还是会有反应的呢，因为我只是透明了而已呀。
</div>
<div class="visible-element">
这又是一个可见的元素哦，我在被隐藏元素的后面呢，它占着位置，我就只能在这儿啦。
</div>
</body>
</html>
| 非常感谢您的阅读，喜欢的话记得三连哦 |
