编程指南-CSS案例开发-3-CSS布局-1：CSS盒模型
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
撰写团队：杜宇飞 侯志强 尤飞祥 段玉昆
指导审核：阮晓龙