在CSS里，设置元素宽度和高度的入口看似只有width和height两个属性，但实际渲染结果会受到display类型、盒模型规则、父子容器约束以及内容自身尺寸的共同影响。只看属性值很容易误判布局表现，理解整套计算逻辑才能准确控制元素尺寸。
一、基础取值：像素、百分比与视口单位
最常用的写法是直接给出固定像素值，比如给一个卡片设置width: 320px和height: 180px。像素值最稳定，不会因为父容器变化而改变，适合图标、按钮等需要固定视觉尺寸的场景。例如：
.card {
width: 320px;
height: 180px;
padding: 16px;
background-color: #f5f5f5;
}
需要注意的是，这里设置的width和height在默认的content-box模型下只代表内容区域的大小。如果再加上padding和border，盒子的最终视觉尺寸会变大。这个细节会在第二节展开。
百分比取值通常相对于包含块。对宽度而言，百分比参照父元素内容区宽度；对高度而言，参照父元素内容区高度。很多页面里高度百分比不生效，根本原因是父元素没有明确的高度值。比如下面这段代码：
.parent {
height: 400px;
}
.child {
width: 50%;
height: 50%;
}
因为父元素设定了height: 400px，子元素的height: 50%才会解析为200px。如果父元素高度由内容撑开，子元素百分比高度可能被忽略，最终高度由自身内容决定。这是高度百分比和宽度百分比行为上最容易混淆的地方。
视口单位在响应式布局中也很常见。vw表示视口宽度的1%，vh表示视口高度的1%。例如width: 80vw可以让元素始终占据视口宽度的80%。但因为移动端浏览器工具栏会影响视口高度，使用vh时需要测试。还有rem和em这类相对字体大小的单位，适合需要随根元素字号缩放的组件。
二、box-sizing决定尺寸计算方式
前面提到默认的content-box会让width只包含内容区域。也就是说，如果一个元素被设置为width: 300px，同时有padding: 20px和border: 2px solid #000，它在页面上的实际总宽度为300 + 20×2 + 2×2 = 344px。这种计算方式符合早期CSS规范，但在做栅格布局时很容易导致溢出。
为了更直观地控制尺寸，很多项目会把所有元素切换为border-box。在border-box模型下，width直接代表内容区、内边距和边框的总和。例如：
.one {
box-sizing: content-box;
width: 300px;
padding: 20px;
border: 2px solid #000;
}
.two {
box-sizing: border-box;
width: 300px;
padding: 20px;
border: 2px solid #000;
}
第一个元素实际占据344px宽，第二个元素始终保持在300px宽。当多个盒子放在同一行，并且宽度用百分比相加为100%时，content-box下的padding和border会打破总宽度，导致换行。使用border-box后，百分比宽度包含了这些额外空间，布局更稳定。
可以用全局选择器统一设置盒模型，这也是常见重置样式的一部分：
*,
*::before,
*::after {
box-sizing: border-box;
}
这种写法简单直接，但要注意它会影响所有元素。如果项目中依赖第三方组件，并且第三方组件基于content-box编写，可能需要在局部覆盖。建议在页面基础样式中统一设置，减少尺寸计算差异。
三、最小最大尺寸约束与内容自适应关键字
有时候不希望在响应式变化中元素尺寸无限制缩放，可以用min-width、max-width、min-height和max-height来限定范围。这些属性的优先级高于普通的width和height。比如一个内容区域希望占满父容器，但最宽不超过1200px，最小不低于320px，可以写成：
.container {
width: 100%;
min-width: 320px;
max-width: 1200px;
margin: 0 auto;
}
此时容器宽度会随父元素变化，但始终不会突破最小和最大限制。这种写法在居中布局和移动端适配中非常实用，可以避免电脑屏幕上内容被拉伸到难以阅读的程度，也能保证手机屏幕上不会过于拥挤。
CSS还提供了min-content、max-content和fit-content等关键字。它们根据内容自身的固有尺寸决定宽度。min-content会让元素宽度收缩到最小内容宽度，比如一个长单词的最小内容宽度就是该单词不换行的宽度。max-content则让元素宽度刚好容纳内容而不换行，可能非常宽。fit-content有点像max-content和可用空间的折中，它允许内容换行但不超过容器宽度。示例：
.note {
width: fit-content;
max-width: 100%;
padding: 8px 12px;
border: 1px solid #ccc;
}
这段代码让提示框宽度刚好包住文字，但如果文字太长，也会被限制在父容器宽度内并自动换行。fit-content在横向排列的标签、标注气泡等场景里比固定宽度更自然。
在flex和grid布局中，子项默认的min-width为auto，这会导致内容较长的元素无法收缩到比内容更小。例如一个flex子项包含长URL或长单词时，即使设置了flex-shrink: 1，它仍然可能溢出容器。解决办法是给该子项设置min-width: 0：
.flex-child {
flex: 1 1 0;
min-width: 0;
}
同理，在grid中如果某列被内容撑开，也要检查min-width是否需要归零。这是响应式布局中非常隐蔽的尺寸问题。
四、响应式调整与常见尺寸问题排查
移动端优先的写法通常会先为小屏设置基础尺寸，再通过媒体查询逐步调整。width和max-width配合使用，可以避免写太多固定断点。例如卡片在手机上占满整行，在平板和桌面端则变为两列或三列：
.card {
width: 100%;
box-sizing: border-box;
}
@media (min-width: 768px) {
.card {
width: 50%;
}
}
@media (min-width: 1024px) {
.card {
width: 33.333%;
}
}
这个例子中，父容器是flex或grid时，三列卡片图会自动换行。使用box-sizing: border-box后，width: 33.333%即使搭配gap或padding，也不会轻易撑破一行，因为gap由父容器处理，子项宽度包含了padding和border。
调试尺寸问题时，浏览器的开发者工具可以直观显示元素的内容区、内边距、边框和外边距。鼠标悬停在某个元素上时，盒模型示意图会展示每一层的大小。如果发现实际宽度与预期不符，先确认box-sizing是否被覆盖，再检查min-width或max-width是否生效。另一个常见问题是图片。图片默认按原始尺寸显示，如果给<img>设置width: 100%而不设置height，它会按比例缩放；但如果同时设置固定高度，可能导致图片变形。通常的做法是只设置宽度，让高度自动：
img {
max-width: 100%;
height: auto;
display: block;
}
这样可以保证图片不会超出容器，并且在响应式布局中保持比例。对于背景图，使用background-size: cover或contain也能控制铺满或完整显示，但要注意容器本身需要有一个明确的高度。
最后，为了让尺寸管理更可维护，可以把常用的宽度、断点、间距定义为CSS变量。例如：
:root {
--container-max-width: 1200px;
--card-min-height: 160px;
}
.container {
max-width: var(--container-max-width);
}
.card {
min-height: var(--card-min-height);
}
这样在调整视觉规范时，只需要改变变量值，不需要逐个查找属性。宽度和高度的设置表面上看很简单，但结合盒模型、响应式约束和布局上下文后，细节很多。逐个理解这些规则，能让你在写样式时更清楚浏览器最终会得到什么。