块级元素可直接设置 width/height；行内元素默认忽略，需改 display（如 inline-block）；width:100% 溢出因 box-sizing 默认为 content-box，应设 border-box；flex 子项 width 是否生效取决于 flex 属性。
设置 width/height 时为什么元素没变大？
块级元素（如 div、p、ul）能直接用 width 和 height 设置尺寸；行内元素（如 span、a）默认无视这两个属性——浏览器直接忽略，设了也白设。
常见错误现象：给 <span>文字</span> 加了 width: 200px; height: 40px;，页面完全没变化。
- 解决办法：先改显示类型，比如加
display: inline-block;或display: inline-flex; - 别用
line-height“假装撑高”span，它只影响文字垂直居中，不改变盒子实际高度，还会破坏基线对齐 - 表单控件如
<input>、<button>虽是替换元素，但支持width/height，不过默认box-sizing是content-box，容易因 padding/border 溢出
width: 100% 却横向滚动？查 box-sizing
这是在线运行时最常被卡住的问题：明明写了 width: 100%，加了 padding: 10px 或 border: 1px solid #ccc，盒子就撑出父容器，出现横向滚动条。
原因在于默认盒模型是 content-box：你设的 width: 100% 仅代表内容区占满，padding 和 border 还要额外加进来。
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 立刻生效的解法：在 CSS 开头加
* { box-sizing: border-box; } - 这样
width: 100%就真等于“总宽度 = 100%”，padding 和 border 从里面扣，内容区自动收缩 - 特别适合 Flex/Grid 布局和
calc()计算，比如width: calc(100% - 20px)不会意外溢出 - 注意：
offsetWidth返回值会随box-sizing改变，但逻辑一致——它始终返回渲染后的总像素宽
在线运行环境里怎么快速验证盒模型尺寸？
所有主流在线平台（CodePen、JSFiddle、CodeSandbox、甚至浏览器 DevTools 的实时编辑）都支持直接查看盒模型数值，关键不是“怎么开”，而是“看哪几项”。
在 Elements 面板选中元素后，右侧 Layout 或 Computed 标签页里重点盯这三组值：
-
width/height：CSS 中写的值（受box-sizing影响解释方式） -
padding、border、margin：每个方向的具体像素值，带颜色预览 -
offsetWidth/offsetHeight：JavaScript 实际读到的总像素尺寸（含 border），可复制进 Console 直接console.log($0.offsetWidth)验证
如果发现 offsetWidth 比写的 width 大 22px，八成是忘了 padding: 10px 和 border: 1px 各加了两次。
flex 布局下 width 还管用吗？
在 display: flex 容器里，子项的 width 属性是否生效，取决于它的 flex 值。
-
flex: 0 0 200px：此时width会被忽略，真正起作用的是flex-basis: 200px，且它受box-sizing控制 -
flex: 1：等价于flex: 1 1 0，width完全无效，分配空间以flex-basis: 0为起点伸缩 - 想锁定固定宽高又用 flex，推荐写成
flex: 0 0 auto; width: 200px; height: 40px;，再配box-sizing: border-box
在线调试时，别只盯着 width 是否写了，先看 computed 样式里 flex-basis 是多少——那才是 flex 子项真正的“基准尺寸”。
