width和height属性用于设置元素内容区域大小，实际尺寸受盒模型影响；默认content-box下总宽高包含内容、padding、border和margin，使用box-sizing:border-box可使宽高包含padding和border，推荐全局设置以提升布局可控性；百分比高度需父元素有明确高度，结合响应式设计时注意总宽度计算，避免溢出。
在CSS中设置元素的宽度和高度，主要通过 width 和 height 属性来实现。这两个属性直接影响元素的内容区域大小，但它们的实际表现与盒模型（Box Model）密切相关。理解它们之间的关系，是掌握页面布局的关键。
width 与 height 的基本用法
你可以使用像素、百分比、em、rem 等单位来设置元素的宽高：
width: 200px; /* 固定宽度 */height: 100%; /* 相对于父容器高度 */
width: 50%; /* 相对于父容器宽度 */
这些值默认作用于元素的内容区域（content box），也就是盒模型中最内层的部分。
盒模型的组成
CSS盒模型由四部分组成，从内到外分别是：
立即学习“前端免费学习笔记（深入）”；
- 内容（content）：显示文本、图片等内容的区域，由 width 和 height 设置
- 内边距（padding）：内容与边框之间的空间
- 边框（border）：围绕内容和 padding 的边线
- 外边距（margin）：元素与其他元素之间的空白区域
默认情况下，元素的总占用宽度计算方式为：
总宽度 = width + 左右 padding + 左右 border + 左右 margin
总高度 = height + 上下 padding + 上下 border + 上下 margin
box-sizing 改变盒模型行为
默认的盒模型有时会让布局变得难以控制，特别是当你设置了 padding 或 border 后，元素会“变大”。这时可以使用 box-sizing 属性来调整计算方式。
常用取值有两个：
- content-box（默认）：width 和 height 只包括内容区域
- border-box：width 和 height 包括内容、padding 和 border
推荐在项目中统一设置：
* {box-sizing: border-box;
}
这样设置后，当你写 width: 200px，无论加多少 padding 或 border，元素的总宽度都不会超过 200px，布局更可控。
实际应用中的建议
- 始终考虑盒模型对最终尺寸的影响，避免意外溢出或错位
- 使用 border-box 可大幅减少计算负担，提升开发效率
- 响应式设计中，结合百分比 width 与固定 padding 时，注意总宽度是否超出容器
- height 设置为百分比时，父元素必须有明确的高度值，否则无效
基本上就这些。掌握 width、height 与盒模型的关系，能让你更精准地控制页面布局，减少样式调试时间。不复杂但容易忽略细节。
