width 和 height 默认只设置内容区尺寸，不包含 padding、border；需 box-sizing: border-box 才使设定值代表总宽高。
width 和 height 设置的是内容区尺寸，不是整个元素
设置 width 和 height 时，默认只作用于 content box（内容区域），不包含 padding、border 或 margin。这意味着加了 padding: 10px 和 border: 2px solid 后，元素实际占位宽度 = width + 20px + 4px。
- 想让
width: 200px真正代表“总宽”，需配合box-sizing: border-box - 行内元素（如
）默认忽略width/height，必须先设display: inline-block或block - 百分比值（如
width: 50%）是相对于父容器的 content width 计算，不是可视区域或父元素总宽
auto 值的行为常被误解
width: auto 不等于“不设宽度”，而是由浏览器按格式化上下文自动计算：块级元素会尽可能撑满父容器宽度（减去 margin/padding/border），而浮动或绝对定位元素则收缩到内容宽度。
- 给浮动元素设
width: auto可能导致意外换行或布局塌陷 - 弹性容器（
display: flex）子项的width: auto会被flex-basis覆盖，实际以 flex 分配逻辑为准 - 表格单元格（
）的 width行为特殊：仅作为最小宽度提示，最终由表格算法决定响应式场景下慎用固定像素值
直接写
width: 300px在移动设备上容易溢出视口，尤其嵌套在未设max-width的容器中。- 优先用相对单位：
width: 80%、width: clamp(200px, 50vw, 600px) - 图片等替换元素默认有固有宽高，设
width: 100%时若父容器无明确宽度，可能失效——需确保父级可计算尺寸 -
height对文本流影响更大：设固定height可能裁剪内容，建议配合overflow: hidden或min-height替代
height 在某些情况下根本不起作用
当元素没有设定
display为block、flex、grid或table-cell时，height往往无效。最典型的是纯文本段落：若内部只有文字且未触发 BFC，height可能被忽略。立即学习“前端免费学习笔记（深入）”；
- 设
height后内容超长？浏览器不会自动扩展高度，除非改用min-height - 绝对定位元素设
top/bottom后，height会被覆盖；同理，flex子项设align-self: stretch时height失效 - 使用
vh单位要注意：移动端 Safari 中100vh可能包含地址栏高度，滚动时视觉跳变
width和height，而是它们生效的前提条件太多——盒模型、显示模式、父容器约束、上下文类型，缺一不可。漏掉任何一个，样式就“看起来没反应”。 - 优先用相对单位：
