《CSS实战手册》2024版：第一章 - CSS基础之四：盒子模型与布局

CSS 的盒子模型和布局是 CSS 中非常重要的概念，它们决定了网页元素的排列方式和大小。

1. 盒子模型：

在 CSS 中，每个元素都被看作一个矩形的盒子，这个盒子包括了元素的内容、内边距（padding）、边框（border）和外边距（margin）。这些部分共同组成了一个完整的盒子模型。

• 内容（content）：元素的实际内容，如文本、图片等。
• 内边距（padding）：元素内容与边框之间的空白区域。
• 边框（border）：围绕在内边距和内容外的线框。
• 外边距（margin）：元素与其他元素之间的空白区域。

2. 布局：

CSS 提供了多种布局方式来控制元素的位置和大小，包括块级布局和行内级布局。

• 块级布局（Block Level Layout）：块级元素会独占一行，宽度默认为容器的宽度，可以设置高度、宽度、内外边距和边框等属性。常见的块级元素有 <div>、<p>、<h1> 等。
• 行内级布局（Inline Level Layout）：行内元素不会独占一行，而是与其他行内元素在同一行显示，宽度由内容决定，不能设置高度和宽度，但可以设置内外边距和边框等属性。常见的行内元素有 <span>、<a>、<img> 等。

除了块级布局和行内级布局外，CSS 还提供了弹性布局（Flexbox）和网格布局（Grid）等高级布局方式，可以更加灵活地控制页面元素的排列和对齐。

弹性布局（Flexbox）和网格布局（Grid）是两种现代的CSS布局方式，它们具有强大的功能和灵活性。

1. 弹性布局（Flexbox）：

弹性布局是一种一维的布局模型，给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。通过使用 display: flex 属性来创建一个弹性容器，并在其中使用灵活的盒子模型来进行元素的排列和定位。弹性容器具有主轴（main axis）和交叉轴（cross axis）。默认情况下，主轴是水平方向，交叉轴是垂直方向。弹性容器中的每个子元素都成为弹性项目，可以指定各自在主轴和交叉轴上的大小、顺序以及对齐方式等。

例如，以下代码实现了一个横向排列的导航栏：

    nav { display: flex; justify-content: space-between; }

2. 网格布局（Grid）：

网格布局是最强大的 CSS 布局方案，允许您沿两个轴工作：水平和垂直。网格允许您创建二维布局，您可以在其中将网格项精确地放置在由行和列定义的单元格中。CSS Grid Layout 可以同时处理行和列上的布局。

例如，以下代码实现了一个三列布局：

.container { display: grid; grid-template-columns: 1fr 1fr 1fr; }