在CSS中，我们可以通过width和height属性直接控制元素的宽度和高度，这两个属性是布局调整的核心属性，几乎所有页面元素的尺寸调整都会用到它们。不同的取值方式会影响元素的最终显示效果，同时还需要结合盒模型规则才能准确计算元素的实际占用空间。
width和height的基本语法
width和height属性的语法结构一致，取值可以是多种类型，最基础的用法是直接给元素设置固定数值或者相对数值，以下是常见的取值类型说明：
| 取值类型 | 说明 | 示例 |
|---|---|---|
| 长度值 | 使用px、em、rem等长度单位，设置固定尺寸 | width: 200px; |
| 百分比 | 相对于父元素的对应尺寸计算，父元素需要有明确尺寸 | height: 50%; |
| auto | 默认值，浏览器自动计算元素尺寸，块级元素宽度默认占满父容器 | width: auto; |
| max-content/min-content | 根据内容的最大或最小宽度设置尺寸，兼容性稍弱 | width: max-content; |
基础使用示例
我们可以通过简单的CSS代码给不同元素设置尺寸，以下是针对div和span元素的尺寸设置示例：
/* 给类名为box的元素设置固定宽高 */
.box {
width: 300px;
height: 200px;
background-color: #f0f0f0;
border: 1px solid #ccc;
}
/* 行内元素默认不支持width和height，需要转换为块级或行内块元素 */
.span-ele {
display: inline-block;
width: 100px;
height: 50px;
background-color: #4CAF50;
color: white;
text-align: center;
line-height: 50px;
}
盒模型对实际尺寸的影响
很多开发者会遇到明明设置了width为200px，元素实际宽度却超过200px的情况，这是因为默认盒模型下，width只表示内容区域的宽度，元素的实际宽度还需要加上内边距padding和边框border的宽度。
默认的盒模型规则是box-sizing: content-box，此时元素实际宽度计算公式为：实际宽度 = width + padding-left + padding-right + border-left-width + border-right-width。
如果希望设置的width直接表示元素的总宽度，可以修改盒模型为box-sizing: border-box，此时width会包含内容、内边距和边框的宽度，设置尺寸会更符合直观预期，这也是目前开发中常用的设置方式。
/* 全局设置border-box盒模型，避免尺寸计算问题 */
* {
box-sizing: border-box;
}
.card {
width: 200px;
height: 150px;
padding: 20px;
border: 2px solid #333;
/* 此时元素实际宽高就是200px*150px，padding和border不会撑大元素 */
background-color: #fff;
}
常见注意事项
- 行内元素（如<span>、<a>）默认不支持width和height属性，需要设置display为block或者inline-block才会生效。
- 百分比取值的height属性，父元素必须有明确的height值，否则百分比高度不会生效，因为父元素高度默认由内容撑开。
- 最小和最大尺寸属性min-width、max-width、min-height、max-height会覆盖width和height的设置，比如设置了max-width: 100px，即使width设为200px，元素最大宽度也不会超过100px。
- 图片元素设置width或height其中一个值时，另一个值会等比例缩放，避免图片变形，如果两个值都设置且比例和原图不一致，图片会拉伸变形。
<!-- 图片只设置宽度，高度自动等比例缩放 --> <img src="https://ipipp.com/demo.jpg" alt="示例图片" style="width: 300px;"> <!-- 同时设置宽高且比例和原图不同，图片会拉伸 --> <img src="https://ipipp.com/demo.jpg" alt="示例图片" style="width: 300px; height: 100px;">
常见问题解答
为什么设置了height: 100%没有效果
这是因为父元素没有明确的高度，浏览器无法计算百分比对应的数值。解决方法可以给父元素设置固定高度，或者给html和body元素都设置height: 100%，让根元素的高度基于视口计算。
html, body {
height: 100%;
}
.full-height {
height: 100%;
background-color: #e3f2fd;
}
width和height可以设置负值吗
不可以，width和height属性不支持负值，设置负值会被浏览器忽略，元素会使用默认的auto值计算尺寸。