从0开始学前端第十二课：CSS盒模型-CSDN博客

本文链接：https://blog.csdn.net/weixin_44738632/article/details/135823525

第十二课：CSS盒模型

学习目标

通过这节课，您将学习到CSS盒模型的以下内容：

理解盒模型的基本概念—包括内容(content)、填充(padding)、边框(border)、外边距(margin)。
学会调整盒模型的各个部分的大小和样式。
掌握如何通过CSS盒模型控制元素的布局。
了解box-sizing属性的用法。

学习内容

1. 盒模型的基本概念

概念：
CSS盒模型是CSS布局的基础，它决定了元素如何在页面中占据空间。每个盒模型由四个部分组成：

内容(content)：元素的实际内容，如文本、图片等。
填充(padding)：内容与边框之间的空间。
边框(border)：围绕内容和填充的线框。
外边距(margin)：盒子与其他盒子之间的空间。

代码示例：

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 200px;
      padding: 20px;
      border: 5px solid black;
      margin: 10px;
    }
  </style>
</head>
<body>
  <div class="box">这是一个盒子</div>
</body>
</html>

预计输出效果：
一个宽度为200像素的盒子，周围有20像素的填充，5像素的黑色边框，和10像素的外边距。

2. 调整盒模型大小和样式

填充(padding)的设置：

可以单独设置每一个方向的填充（上、右、下、左）。
使用padding: 20px 10px 15px 5px;可以分别设置上、右、下、左的填充。

边框(border)的设置：

可以单独设置边框的宽度、样式和颜色。
使用border: 5px solid black;可以设置一个5像素宽、实线、黑色的边框。

外边距(margin)的设置：

和填充类似，外边距可以单独设置。
使用margin: 10px 5px;可以分别设置上下的外边距为10像素，左右的外边距为5像素。

3. `box-sizing`属性的用法

概念：
box-sizing属性用于改变盒模型的计算方式，默认值为content-box，意味着宽度和高度只包括内容。

content-box：标准盒模型，宽高不包含border和padding。
border-box：IE盒模型，宽高包含border和padding。

代码示例：

.box {
  box-sizing: border-box;
  width: 200px; /* 宽度包含内容、填充和边框 */
  padding: 20px;
  border: 5px solid black;
  margin: 10px;
}

预计输出效果：
盒子的实际宽度仍然是200像素，但这200像素包括了内容、填充和边框的宽度。

课后练习

创建一个div，设置其宽度为300像素，填充为20像素，边框为5像素实线，外边距为15像素。
调整以上div的box-sizing为border-box，观察和记录实际宽度的变化。
创建三个div，它们并列排列，确保它们的外边距不会相互重叠（即不会发生外边距折叠）。

解析

创建div并设置盒模型：
```
<div class="box">这是一个盒子</div>
```
```
.box {
  width: 300px;
  padding: 20px;
  border: 5px solid black;
  margin: 15px;
}
```
预计输出效果：一个宽度为300像素的盒子（不包含padding和border），周围有20像素的填充，5像素的黑色边框，和15像素的外边距。
调整box-sizing为border-box：
```
.box {
  box-sizing: border-box;
  /* 其他样式保持不变 */
}
```
预计输出效果：盒子的实际宽度仍然是300像素，但宽度现在包括了内容、填充和边框。

创建并列排列的div：

<div class="box">盒子1</div>
<div class="box">盒子2</div>
<div class="box">盒子3</div>

.box {
  float: left; /* 使div并列排列 */
  margin-right: 30px; /* 设置除最后一个div外的右外边距 */
}
.box:last-child {
  margin-right: 0; /* 最后一个div不需要右外边距 */
}

预计输出效果：三个盒子并列排列，它们之间有30像素的空隙。最后一个盒子没有右外边距。

章节目录
 第十三课：浮动与定位

从0开始学前端 第十二课：CSS盒模型