理解CSS盒子模型是掌握网页布局的关键，它将每个HTML元素视为包含内容、内边距、边框和外边距的矩形盒子。1、width与height设置内容区尺寸，可使用像素或百分比，并配合max/min属性控制弹性；2、padding定义内容与边框间的内边距，支持四方向独立设置或简写形式，且背景会延伸至该区域；3、border围绕内容与内边距，可通过样式、颜色、宽度定义边界，支持单边或简写设置；4、margin设定盒子与其他元素的外部间距，影响布局位置，支持负值实现重叠效果；5、box-sizing控制宽高计算方式，content-box仅含内容区，border-box则包含内边距和边框，推荐全局统一设置以确保布局精准。
如果您想深入了解CSS如何控制网页元素的布局和外观，理解盒子模型是关键。每个HTML元素都可以被视为一个矩形盒子，而CSS盒子模型定义了这个盒子的各个组成部分及其尺寸计算方式。
本文运行环境：MacBook Pro，macOS Sonoma
一、width 与 height 属性
这两个属性用于设置盒子内容区域的宽度和高度，不包括内边距、边框和外边距。它们决定了元素内容所占据的空间大小。
1、使用像素值设置固定尺寸：width: 300px; height: 200px;
立即学习“前端免费学习笔记（深入）”；
2、使用百分比相对于父容器进行设置：width: 50%; height: auto;
3、可结合 max-width、min-width、max-height 和 min-height 控制弹性范围。
二、padding 属性
padding 定义内容与边框之间的空间，即内边距。它会增加元素的总占用面积，并影响布局。
1、可以分别设置四个方向的内边距：padding-top、padding-right、padding-bottom、padding-left
2、使用简写形式一次性定义多个方向：padding: 10px 20px; 表示上下为10px，左右为20px
3、当盒子设置了背景色或背景图像时，padding 区域也会被背景填充。
三、border 属性
border 是围绕内容和内边距的一条线，用于定义盒子的边界样式。它可以有多种样式、颜色和宽度。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
1、基本语法包含三个部分：border-width、border-style、border-color
2、可单独设置某一边的边框，例如：border-left: 2px solid #000;
3、使用简写属性快速定义所有边框：border: 1px dashed red;
四、margin 属性
margin 定义盒子与其他元素之间的外部间距，即外边距。它不会影响元素自身的内容区域，但会影响整体布局位置。
1、支持四个方向独立设置：margin-top、margin-right、margin-bottom、margin-left
2、使用简写语法提高效率：margin: 10px 15px 20px 25px; 按顺时针顺序应用
3、外边距允许使用负值，以实现重叠或反向偏移效果。
五、box-sizing 属性
该属性控制 width 和 height 的计算方式，直接影响盒子模型的行为表现。默认值为 content-box，另一种常用值为 border-box。
1、设置 box-sizing: content-box; 时，width 和 height 只包含内容区，不包括 padding 和 border
2、设置 box-sizing: border-box; 后，width 和 height 包括内容、padding 和 border，便于精确布局
3、推荐在全局样式中统一设置此属性以避免布局错乱。
