css width 和 height 怎么设置_元素尺寸控制方法说明

width/height不生效主因是display类型、包含块高度缺失及box-sizing影响：行内元素需设inline-block/block；height百分比需父元素有明确height；border-box可避免尺寸溢出。

width/height 设置后元素不生效？先看 display 类型

块级元素（如 div、p）默认支持 width 和 height；行内元素（如 span、a）即使写了也不会生效，除非显式改 display。

• display: inline → 忽略 width/height
• display: inline-block → 支持 width/height，且保持行内流特性
• display: block → 完全支持，独占一行
• display: flex 或 display: grid 容器子项：受父容器布局控制，width/height 可能被 flex 属性覆盖

百分比 width/height 为什么经常是 0？

百分比值是相对于**包含块（containing block）**计算的。常见陷阱：

• width: 50% 有效，因为块级元素的包含块通常是父元素宽度
• height: 50% 往往无效，因为父元素若没设 height，其高度由内容撑开 → 计算结果为 0px
• 解决办法：给父元素加 height（如 height: 400px 或 height: 100vh），或用 min-height 配合 height: 100%

box-sizing 影响实际尺寸，别忽略它

默认 box-sizing: content-box，此时 width 只算内容区，padding 和 border 会额外增加总宽高；设成 border-box 后，width 包含内容+内边距+边框。

div {
  width: 200px;
  padding: 10px;
  border: 2px solid #000;
  box-sizing: content-box; /* 实际占用宽度 = 200 + 10×2 + 2×2 = 224px */
}
div {
  width: 200px;
  padding: 10px;
  border: 2px solid #000;
  box-sizing: border-box; /* 实际占用宽度 = 200px，内容区变窄 */
}

响应式场景下优先用 max-width / min-height 等替代方案

纯 width/height 在移动设备上容易导致溢出或拉伸失真。更稳妥的做法：

• 图片/媒体：用 max-width: 100% + height: auto 保比例缩放
• 卡片/容器：用 min-width 防过窄，max-width 防过宽，配合 width: 100%
• 固定比例容器（如 16:9）：用 padding-top: 56.25% + position: relative + 绝对定位子元素

硬写 width: 375px 在不同屏幕下大概率出问题，尤其遇到 zoom 或横屏时。