浏览器如何计算文本元素尺寸？含视口缩放时h3元素适配逻辑

嘿，这个问题问到点子上了！我来给你掰扯清楚浏览器是怎么算文本元素尺寸的，特别是你提到的h3元素~

其实浏览器是按「从内到外」的顺序来算的，步骤大概是这样：

• 先算内容区的尺寸：浏览器会先解析文本内容，结合你给的（或者默认的）font-size、font-family、font-weight这些字体属性，算出每个字符的宽度（毕竟不同字体的字符宽度天差地别，比如等宽字体每个字符一样宽，非等宽的像宋体、微软雅黑就不一样）。一行的总宽度就是字符宽度加起来，行高则由line-height决定（如果没设置就是字体自带的默认值，一般在1.2左右）。要是文本有多行，内容区的总高度就是行高乘以行数。
• 再加上内边距（padding）、边框（border）：这就是CSS盒模型的事儿了，默认是「标准盒模型（content-box）」，所以元素最终的宽高是「内容区尺寸 + padding + border」；要是你设置了box-sizing: border-box，那内容区会自动压缩，来让「内容区+padding+border」等于你设置的宽高值。
• 最后还要考虑换行规则：比如white-space: nowrap的话，文本就不换行，内容区宽度会直接撑到文本的总长度；默认的white-space: normal会在容器边界或者换行符处自动换行，这时候内容区宽度就受父容器或者元素自身width属性的限制。

假设你没给h3加任何自定义样式，浏览器是这么算它的宽高的：

• 宽度：h3默认是块级元素，所以它的宽度默认是父容器的100%（比如父容器是body，那就是视口宽度减去body的默认margin）。哪怕文本内容很短，它也会占满父容器的宽度；如果文本太长超出父容器，就自动换行，宽度还是保持父容器的100%。
• 高度：先算内容区高度——line-height乘以文本的行数（比如一行的话就是line-height的值），再加上h3默认的上下padding（不同浏览器略有差异，比如Chrome里h3默认上下padding是0）和上下margin（Chrome里是1em上下）。注意哦，margin是外边距，不算元素自身的高度，元素自身的高度是「内容区+padding+border」。

视口变大变小的时候，h3的尺寸变化分几种情况：

• 默认块级状态：视口缩小，父容器（比如body）的宽度跟着缩，h3的宽度也会跟着变成父容器的100%。文本会自动换行，行数变多，所以h3的内容区高度会随之增加，整个元素的高度（内容区+padding+border）也会变高。
• 设置了固定宽度：比如你给h3加了width: 300px，当视口宽度小于300px时，h3的宽度还是300px，这时候可能会超出视口，出现横向滚动条；要是你再加个max-width: 100%，那h3的宽度会在300px和父容器宽度之间取小值，视口缩小时就不会超出了。
• 改成行内/行内块元素：比如设置display: inline-block，那h3的宽度就由文本内容决定了。视口缩小到一定程度，文本换行，h3的宽度会变窄，高度则随着行数增加而变高。

内容的提问来源于stack exchange，提问作者flamant