写页面的时候经常遇到一种情况：明明给几个元素设置了同样的宽度或高度，渲染出来的效果却一个大一个小，或者换一台设备、换一个浏览器之后尺寸就变了。这类问题大多不是浏览器坏了，而是盒模型计算方式、高度继承机制和单位换算规则在背后起了作用。本文从盒模型讲起，逐步给出让元素保持一致尺寸的几种可靠做法。
先统一盒模型：box-sizing是尺寸一致的基础
很多人不知道，同一个width: 200px在不同盒模型下渲染结果是不一样的。默认情况下浏览器使用content-box，这个宽度只包含内容区，padding和border都要额外往外扩。也就是说两个元素都写了width: 200px，只要一个有padding: 10px、另一个没有，最终占位宽度就会分别是240px和200px，看起来自然大小不一。
解决办法是在全局样式里把盒模型改成border-box，让width直接等于内容加padding加border的总和：
* {
margin: 0;
padding: 0;
box-sizing: border-box; /* 统一盒模型计算方式 */
}
.box {
width: 200px;
padding: 10px;
border: 2px solid #333;
/* border-box下，实际占位仍是200px */
}
加上这一行之后，绝大多数“设置了相同宽度却不一样宽”的问题都会消失。这个属性兼容性非常好，现代浏览器全部支持，可以放心写在重置样式里。另外要注意margin不计入盒模型，如果两个元素的margin不同，占位空间依然会有差异，排查时别忘了看这一项。
用flex布局实现子项等宽等高
盒模型统一之后，如果目标是让一组元素“彼此等大”，最省事的方式是flex布局。flex有一条默认规则：align-items: stretch会让同一行的子项在交叉轴方向自动拉伸到相同高度，这也是常见的等高布局原理。主轴方向的等宽则可以通过flex: 1实现，每个子项平分剩余空间：
<style>
.list {
display: flex; /* 启用弹性布局 */
gap: 10px;
}
.item {
flex: 1; /* 每个子项等分宽度 */
background: #f0f0f0;
padding: 16px;
box-sizing: border-box;
}
</style>
<div class="list">
<div class="item">内容很少</div>
<div class="item">内容多一点也没有关系</div>
<div class="item">内容</div>
</div>
上面这段代码无论每个item里文字多少，三列宽度始终相等，高度也会自动对齐到最高那一个，这就是flex布局天然具备的等大特性。如果希望保持比例而不是完全等分，把flex: 1换成flex: 2、flex: 1这样的比例值即可。
有一个容易踩的坑：子项内容如果是不换行的长英文串或者固定宽度的图片，flex子项默认min-width: auto会被内容撑开，导致宽度不再相等。此时给子项加上min-width: 0就能恢复等分效果。
grid布局：严格等分的另一种选择
如果需要的是二维网格，比如三行三列每个格子严格一样大，grid比flex更直接。利用fr单位和repeat函数可以一行代码完成等分：
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 三列等宽 */
grid-auto-rows: 120px; /* 每行固定高度 */
gap: 12px;
}
grid的等分是基于可用空间的精确计算，不受内容多少影响，只要不显式给某个子项设置跨度，所有格子尺寸完全一致。另外repeat(auto-fill, minmax(200px, 1fr))这种写法还能实现响应式卡片流，不需要写任何媒体查询，卡片在宽屏多列、窄屏少列之间自动切换，且始终保持等大。
跨设备尺寸不一致：单位选择与缩放问题
还有一种“大小不一样”发生在不同设备之间。常见原因有两个：一是用了固定像素单位，在高DPI屏幕或用户调整了浏览器默认字号后，视觉大小出现偏差；二是移动端没有设置视口元信息。针对前者，推荐关键尺寸使用相对单位，比如以rem为基础的排版体系：
html {
font-size: 16px; /* 1rem = 16px，可按设计稿调整 */
}
.card {
width: 20rem;
padding: 1rem;
font-size: 0.875rem;
}
rem相对于根元素字号计算，只要根字号统一，所有引用它的尺寸就保持严格的比例关系，不会因为父级嵌套而失真。相比之下em会随父级字号层层叠加，嵌套深了容易出现意料之外的大小，这也是很多“越嵌越小”问题的根源。
移动端页面则务必在head中声明<meta name="viewport" content="width=device-width, initial-scale=1">，否则浏览器会按默认980px宽的视口渲染再整体缩放，元素在手机上看起来要么过小要么比例失衡。配合上面的box-sizing、flex或grid等分布局，基本可以做到同一套代码在桌面和移动端呈现一致的相对尺寸。
总结一下排查思路：先确认盒模型统一，再看是否用了合适的布局方式（flex或grid）做等分，最后检查单位和视口设置。这三层依次过一遍，布局中元素大小不一致的问题基本都能定位并解决。