如何让HTML页面元素在浏览器窗口大小变化时保持尺寸不变？

直接设置height和width没效果，大概率是你用了相对单位（比如%、em），或者元素的父容器布局（flex/grid）强制拉伸了它，再不然就是没考虑box-sizing的影响。下面是具体解决办法：

• 用绝对单位定义尺寸
  把单位换成px、cm这类绝对单位，它们不会随窗口大小或父容器尺寸变化。比如：

  .fixed-size {
    width: 250px;
    height: 180px;
  }
  

• 抵消弹性布局的拉伸/压缩
  如果元素在flex或grid容器里，默认会被容器调整尺寸。这时候给元素加对应的属性：

  • Flex布局下：加flex-shrink: 0; flex-grow: 0;，禁止元素收缩或放大
  • Grid布局下：给所在网格项加justify-self: start; align-self: start;，避免被拉伸填满网格

• 统一盒模型计算方式
  默认box-sizing: content-box会让width只算内容区，padding和border会额外增加元素总尺寸。改成border-box后，width和height会包含padding和border，避免尺寸意外变化：

  .fixed-size {
    box-sizing: border-box;
    padding: 10px;
    border: 2px solid #000;
    width: 250px; /* 这个值已经包含padding和border */
    height: 180px;
  }
  

• 完整示例
  下面是一个能直接运行的例子，不管怎么拖浏览器窗口，这个元素尺寸都不变：

  <div class="fixed-size">我是固定尺寸的元素</div>
  
  <style>
    .fixed-size {
      box-sizing: border-box;
      width: 250px;
      height: 180px;
      flex-shrink: 0;
      padding: 15px;
      border: 1px solid #ccc;
      background: #f5f5f5;
    }
  </style>
  

最后排查这几点：有没有用相对单位？父容器是不是flex/grid？盒模型有没有设置？搞定这些，元素尺寸就能稳定住了。

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