CSS元素高度由盒模型决定，关键在于box-sizing属性。默认content-box模式下，height仅指内容区高度，总高度需加上padding和border；而border-box模式下，height包含内容、内边距和边框，更符合直观尺寸预期。现代开发常全局设置box-sizing: border-box以简化布局计算。此外，line-height、内容溢出和vertical-align等也会影响最终高度，尤其在响应式设计中需结合min-height、max-height和vh等单位实现灵活适配。
在CSS里，一个元素的高度计算远不止你写一个
height属性那么简单。它本质上是围绕着CSS盒模型展开的，通常包括内容区（content）、内边距（padding）、边框（border），而外边距（margin）则影响元素之间的间距，但不计入元素自身的总高度。关键在于你采用的是哪种盒模型——
content-box还是
border-box，这直接决定了
height属性到底作用于哪个部分。简单来说，如果你没明确指定
box-sizing，浏览器默认是
content-box，这时你设定的
height只管内容区的高度；而如果是
border-box，那
height就包含了内容、内边距和边框。
CSS元素高度的计算，确实是个老生常谈但又充满细节的话题。我们平时写样式，一个
height: 200px;下去，总觉得是板上钉钉的事。但实际渲染出来，可能就因为
padding、
border甚至
line-height、
overflow这些“小角色”的搅局，导致最终高度跟你预想的不一样。这背后，盒模型是核心。
默认情况下，也就是
box-sizing: content-box;时，你设置的
height属性，仅仅是指定了元素内容区域的高度。这意味着，如果你的元素还有
padding和
border，那么它在页面上占据的总垂直空间会是：
height+
padding-top+
padding-bottom+
border-top-width+
border-bottom-width。这在一些布局场景下，比如需要精确计算容器总尺寸时，可能会让人头疼，因为每次都要把这些额外的值加进去。
而当我们将
box-sizing设置为
border-box;时，情况就变得“直观”多了。这时，你设置的
height属性，就包含了内容区、内边距和边框的总和。也就是说，如果你设定
height: 200px;，并且有
padding: 10px;和
border: 1px solid black;，那么内容区的高度实际上是
200px - (10px * 2) - (1px * 2) = 178px。我个人觉得，
border-box模式在现代布局中用起来更顺手，因为它更符合我们对一个“盒子”尺寸的直观理解——你告诉我盒子总高200px，我自然认为它占的空间就是200px，而不是还得再加点边框内边距。所以，现在很多前端项目都会在全局样式里加上
html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; }，让所有元素都继承border-box的计算方式。
立即学习“前端免费学习笔记（深入）”；
/* 默认行为，content-box */
.element-content-box {
height: 100px; /* 内容区高100px */
padding: 20px; /* 上下各20px */
border: 5px solid red; /* 上下各5px */
/* 实际占据高度：100 + 20*2 + 5*2 = 150px */
background-color: lightblue;
}
/* border-box 模式 */
.element-border-box {
box-sizing: border-box; /* 改变盒模型 */
height: 100px; /* 总高100px (包含padding和border) */
padding: 20px;
border: 5px solid green;
/* 实际占据高度：100px */
/* 内容区高度：100 - 20*2 - 5*2 = 50px */
background-color: lightcoral;
}这段代码很直观地展示了两种模式下，同样设置
height和
padding、
border，最终渲染出的视觉高度差异。理解这个是掌握CSS高度计算的基石。
CSS盒模型：content-box
与 border-box
对高度计算的决定性差异
box-sizing属性确实是CSS高度计算中的一个“分水岭”。我记得刚开始学习CSS的时候，经常被这个概念搞得一头雾水，为什么我设定的
height值，最后元素总是比我预想的要高一点？后来才明白，原来是
padding和
border在作祟，而且默认的
content-box模式就是这样。
content-box模式下，
height和
width属性只应用于元素的内容区域。这意味着，如果你有一个元素，设定了
height: 100px;，然后又加了
padding: 10px;和
border: 2px solid black;，那么这个元素在垂直方向上实际占据的高度将是
100px (内容) + 10px (上内边距) + 10px (下内边距) + 2px (上边框) + 2px (下边框) = 124124px。这种计算方式，在一些需要精确控制内容尺寸，并且内边距和边框是“额外添加”的场景下，或许有其合理性。比如，你可能想确保文本区域始终是某个固定大小，而边框和内边距只是视觉上的修饰。
然而，在大多数现代网页布局中，我们更倾向于将
padding和
border视为元素总尺寸的一部分。这就是
border-box模式的优势所在。当
box-sizing: border-box;时，
height和
width属性包括了内容、内边距和边框。回到上面的例子，如果你的元素设置为
border-box，并设定
height: 100px;，
padding: 10px;和
border: 2px solid black;，那么这个元素在垂直方向上实际占据的高度就是100px。浏览器会自动帮你计算出内容区域的实际高度，即
100px - (10px * 2) - (2px * 2) = 76px。这种方式极大地简化了布局计算，尤其是在响应式设计和组件化开发中，你无需反复计算元素的总尺寸，只需要设定你想要的最终视觉大小即可。这对于保持设计稿和实际页面的一致性，减少布局上的“意外”，简直是福音。这也是为什么很多CSS Reset或者Normalize文件里，都会把
box-sizing设置为
border-box的原因。它确实让前端开发者的生活变得更轻松了。
内容溢出、line-height
与 vertical-align
：隐形的高度推手
除了盒模型，还有一些“隐形”的因素，它们同样能影响元素的最终高度，甚至让你的
height设置形同虚设。这里不得不提的就是内容溢出、
line-height和
vertical-align。
首先是内容溢出。当你给一个元素设置了固定的
height，但其内部内容（比如文字、图片或其他子元素）的高度超出了这个设定值时，就会发生内容溢出。默认情况下，内容会溢出容器，继续显示在容器外部，但容器本身的高度并不会因此增加。这时候，
overflow属性就派上用场了。如果你设置
overflow: hidden;，超出部分会被裁剪；如果设置
overflow: scroll;或
overflow: auto;，容器内部会出现滚动条，让用户可以滚动查看所有内容，但容器的高度依然保持你设定的值。只有当
overflow属性的值允许内容“撑开”容器时（比如当容器是
display: flex或
display: grid的子项，并且没有固定高度限制时），内容溢出才可能间接导致容器高度的自适应增长。但对于普通的块级元素，
height固定，内容溢出不会改变其自身高度。
接着是line-height
。这个属性虽然名字叫“行高”，但它对包含文本的元素的高度有着直接且往往被忽视的影响。
line-height定义了两行文本基线之间的距离，它会影响每行文本占据的垂直空间。如果一个块级元素内部只有一行文本，那么即使你没有给它设置
height，它的实际高度也至少会是其
line-height的值（当然，还要考虑字体本身的尺寸）。如果有多行文本，那么元素的总高度就会是
行数 * line-height，再加上可能的
padding和
border。我发现很多人在处理文本垂直居中时，会把
line-height设置成和
height一样的值，这其实就是利用了
line-height对单行文本高度的控制作用。
最后是vertical-align
。这个属性主要用于控制行内元素（如
<span>、
<img alt="CSS怎么算高度_CSS元素高度计算与盒模型解析教程" >）或表格单元格（
<td>）的垂直对齐方式。它虽然不会直接改变元素自身的高度，但它能影响行内元素的基线对齐，进而影响包含它们的行盒（line box）的高度。当一行中包含不同
vertical-align设置的行内元素，或者包含图片等非文本行内元素时，整个行盒的高度可能会被“撑高”，以容纳最高的那个元素及其对齐方式。这在处理图文混排时尤其需要注意，一张大图可能会无形中增加整行的垂直空间，即使图片本身没有溢出容器。理解这些“隐形”推手，能帮助我们更好地预测和控制元素的最终渲染高度，避免一些难以察觉的布局问题。
响应式布局中，如何灵活控制元素高度以适应不同屏幕？
在响应式设计日益成为主流的今天，固定高度的元素往往会成为布局的瓶颈。如何让元素高度能够灵活地适应不同屏幕尺寸和内容变化，这本身就是一门艺术。我个人在实践中，总结了一些比较好用的策略。
首先，拥抱自适应高度。能不设
height就尽量不设。让元素的高度由其内部内容自然撑开，这是最符合Web流动性原则的方式。当内容变化时，元素高度会自动调整，避免内容溢出或留白过多。配合
min-height和
max-height属性，可以为自适应高度设定一个合理的范围。例如，一个卡片组件，可以不设
height，但设定
min-height: 150px;，确保它即使内容很少也不会显得过于扁平；同时设置
max-height: 300px;和
overflow: auto;，防止内容过多时撑得太高，影响整体布局，而是出现滚动条。
其次，利用视口单位（vh
）。
vh（viewport height）单位是相对于视口高度的百分比。
1vh
