样式化详解

这三个章节是非常好的样式化实战练习，您可以在 MDN 上查看它。

• 样式化列表
• 样式化链接
• 样式化表单

背景样式

背景颜色

background-color 属性定义了 CSS 中任何元素的背景颜色。属性接受任何有效的颜色值。背景色扩展到元素的内容和内边距的下面。

::: normal-demo 为元素盒子添加背景颜色

<div class="box">
  <h2>Background Colors</h2>
  <p>Try changing the background <span>colors</span>.</p>
</div>

在 CSS 中，所有的元素都被一个个的“盒子(box)”包围着。

溢出是在盒子无法容纳下太多的内容的时候发生的。

概念

我们知道，CSS 中万物皆盒，因此我们可以通过给 width 和 height(或者 inline-size 和 block-size) 赋值的方式来约束盒子的尺寸。溢出是在您往盒子里面塞太多东西的时候发生的，所以盒子里面的东西也不会老老实实待着。CSS 给了您好几种工具来控制溢出。

替换元素

图像和视频被描述为替换元素。 这意味着 CSS 不能影响这些元素的内部布局，仅影响它们在页面上于其他元素中的位置。

原始尺寸与固有尺寸

在受 CSS 设置影响之前，HTML 元素有其原始的尺寸。一个直观的例子就是图像。一副图像的长和宽由这个图像文件自身确定。这个尺寸就是固有尺寸。

一个空的 <div> 是没有尺寸的。如果您在您的 HTML 文件中添加一个空 <div> 并给予其边框，您会在页面上看到一条线。

书写模式

CSS 中的书写模式是指文本的排列方向是横向还是纵向的。writing-mode 属性使我们从一种模式切换到另一种模式。为此，您不必使用一种竖向的语言——您还可以更改部分文字的方向以实现创新性的布局。

可以使用 writing-mode: vertical-rl 对一个标题的显示进行设置，将标题文本变为竖向。

CSS 的值

在 CSS 规范上，您将能够发现值的存在，CSS 有多种值类型，它们被尖括号包围，如 <color> 或 <length>。

当您看到值 <color> 对特定属性有效时，这意味着您可以使用任何有效的颜色作为该属性的值。

目录

• 布局介绍

• 正常流布局

• 弹性布局

• 实战练习

• 网格布局

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。