3.0 指南导读

CSS布局是网页设计中至关重要的一环，决定了网页内容的排列方式和视觉呈现，本指南将介绍CSS中布局的基础——CSS盒模型，以及布局技术响应式网页设计，并扩展介绍CSS中的数值与单位和媒体查询@media，提供从基础到进阶的全面知识，构建出既美观又高效的网页布局。

3.1 CSS盒模型

（1）什么是CSS盒模型

CSS盒模型是CSS布局中的一个核心概念，描述了如何对文档树中的元素进行布局和渲染。每个元素都会生成一个矩形盒子，盒子的组成部分包括内容（content）、内边距（padding）、边框（border）和外边距（margin），如图3-1-1-1所示。了解盒模型对于控制元素之间的间距、布局和对齐至关重要。

图中不同部分说明。

• 内容（Content）：元素的实际内容区域，包括文本或其他媒体内容，尺寸可以通过“width”和“height”属性来设置。

• 内边距（Padding）：内边距位于内容和边框之间，是元素内部的空间。

• 边框（Border）：边框环绕在内边距和内容周围，是可见的，边框可以指定样式（如虚线、实线等）、宽度和颜色。

• 外边距（Margin）：外边距是元素边框之外的空间，用于分隔元素，是完全透明的，外边距可以设置为负值，会导致元素重叠。

（2）CSS盒模型的类型

CSS盒模型主要有两种类型。

• 标准盒模型（Standard Box Model）：在这种盒模型下，“width”和“height”属性仅包括内容区域的大小，内边距、边框和外边距会增加元素的总体尺寸。

• IE盒模型（IE Box Model，也称为怪异模式或传统盒模型）：在这种盒模型下，“width”和“height”属性包括内容、内边距和边框的尺寸，但不包括外边距，由早期的IE浏览器而知名。

📌 “box-sizing”属性可以改变盒模型的计算方式，取值包括“content-box”、“border-box”和“inherit”。“content-box”（默认值），盒模型为标准盒模型；“border-box”，盒模型为IE盒模型；“inherit”，从父元素继承“box-sizing”属性的值。

创作说明

名称：编程指南-CSS案例开发从学到用完美实践

版本：2024年

网站：http://www.51xueweb.cn

撰写团队：杜宇飞 侯志强 尤飞祥 段玉昆

指导审核：阮晓龙