本章包括了一些经典的布局实战案例。

概述 网格布局 (Grid) 是最强大的 CSS 布局方案。它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。 网格布局案例 上图这样的布局，就是 Grid 布局的拿手好戏。 与 flex 的区别 Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。 Flex 布局是轴线布局，只能指

CSS 盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括: 边距，边框，填充，和实际内容。

本文介绍 CSS 的一些最基本的概念: 层叠、优先级和继承。

本章节介绍 CSS 的最常见，也是最基础属性。

目录 CSS 选择器; CSS 盒模型; 背景与边框; CSS 字体; 文本方向; 溢出; CSS 值; 可替换元素; 媒体查询; 样式化详解 这三个章节是非常好的样式化实战练习，您可以在 MDN 上查看它。 样式化列表; 样式化链接; 样式化表单;

背景样式 背景颜色 background-color 属性定义了 CSS 中任何元素的背景颜色。属性接受任何有效的颜色值。背景色扩展到元素的内容和内边距的下面。 为元素盒子添加背景颜色 背景图片 background-image 属性允许在元素的背景中显示图像。 默认情况下，大图不会缩小以适应方框，因此我们只能看到它的一个小角，而小图则是平铺以填充方框。 两

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

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

替换元素 图像和视频被描述为替换元素。 这意味着 CSS 不能影响这些元素的内部布局，仅影响它们在页面上于其他元素中的位置。 可替换元素 在 CSS 中，可替换元素(replaced element)的展现效果不是由 CSS 来控制的。这些元素是一种外部对象，它们外观的渲染，是独立于 CSS 的。 简单来说，它们的内容不受当前文档的样式的影响。CSS 可以影