在css样式开发中，width和height属性用于定义元素的宽度和高度，是控制页面元素尺寸的核心属性，几乎所有可见元素的布局都需要用到这两个属性。不过它们的生效规则和一些特殊场景的处理方式，很多开发者并没有完全掌握，容易出现布局不符合预期的情况。
width和height的基本取值类型
width和height支持多种取值方式，不同的取值适用于不同的布局场景，常见的取值类型如下：
- 固定像素值：如
100px，元素尺寸固定为指定像素，不会随父容器或视口变化而变化，适合固定尺寸的元素，比如图标、固定宽度的按钮。 - 百分比：如
50%，元素尺寸相对于父容器的对应尺寸计算，父容器尺寸变化时，元素尺寸会同步变化，适合响应式布局中的弹性元素。 - auto：默认值，浏览器会根据元素的内容和上下文自动计算尺寸，块级元素默认宽度为父容器宽度，高度由内容撑开。
- 视口相关单位：如
10vw（视口宽度的10%）、20vh（视口高度的20%），尺寸相对于当前视口的大小计算，适合全屏布局相关的元素。
width和height的生效条件
并不是所有元素设置width和height都会生效，需要满足对应的条件：
块级元素
块级元素（如<div>、<p>、<h1>等）默认支持设置width和height，默认width为auto，占满父容器宽度，height为auto，由内容撑开。如果手动设置width和height，会按照设置的值渲染。
行内元素
行内元素（如<span>、<a>、<em>等）默认不支持设置width和height，即使设置了也不会生效，元素的尺寸完全由内容决定。如果需要让行内元素支持宽高设置，需要修改display属性为inline-block或者block。
替换元素
替换元素（如<img>、<input>、<video>等）本身有默认的固有尺寸，默认支持设置width和height，设置后会覆盖固有尺寸，按照设置的值渲染。
width、height与盒模型的关系
css的盒模型会影响width和height的计算规则，默认情况下，标准盒模型中width和height只表示内容区域的尺寸，元素的实际占用尺寸还需要加上内边距（padding）、边框（border）和外边距（margin）。
可以通过box-sizing属性修改盒模型的计算方式：
content-box：默认值，width和height仅表示内容区域尺寸，实际尺寸 = width/height + padding + border。border-box：width和height表示内容区域 + 内边距 + 边框的总尺寸，实际尺寸就是设置的width和height，padding和border会向内挤压内容区域。
下面是一个盒模型不同设置下的尺寸计算示例：
/* 标准盒模型，元素实际宽度 = 200px + 20px*2 + 2px*2 = 244px */
.box1 {
width: 200px;
height: 100px;
padding: 20px;
border: 2px solid #333;
box-sizing: content-box;
}
/* 怪异盒模型，元素实际宽度就是200px，内容区域宽度 = 200px - 20px*2 - 2px*2 = 156px */
.box2 {
width: 200px;
height: 100px;
padding: 20px;
border: 2px solid #333;
box-sizing: border-box;
}
常见应用示例
固定尺寸元素设置
比如设置一个固定大小的头像容器：
<div class="avatar"></div>
.avatar {
width: 80px;
height: 80px;
border-radius: 50%;
background-color: #f0f0f0;
/* 行内元素需要设置display才能生效宽高 */
display: inline-block;
}
百分比宽度实现响应式布局
设置一个占父容器一半宽度的卡片：
<div class="card-container"> <div class="card">卡片内容</div> </div>
.card-container {
width: 100%;
background-color: #f5f5f5;
padding: 20px;
}
.card {
width: 50%;
height: 200px;
background-color: #fff;
box-sizing: border-box;
padding: 15px;
}
视口单位实现全屏元素
设置一个占满整个视口高度的 banner 区域：
.banner {
width: 100%;
height: 100vh;
background-color: #4a90e2;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
注意事项
- 设置百分比宽度时，父容器必须有明确的宽度，否则百分比计算会失效，元素宽度可能变为0或者auto。
- 行内元素设置width和height不生效时，先检查display属性是否符合要求，不要直接修改宽高。
- 使用border-box盒模型可以减少尺寸计算的复杂度，实际开发中很多项目会全局设置
* { box-sizing: border-box; }来统一盒模型规则。 - min-width和max-width、min-height和max-height会限制width和height的取值，当设置的width小于min-width时，实际宽度为min-width，大于max-width时，实际宽度为max-width，height同理。