17370845950

opacity拼写为opaciy、box-shadow用0重置、visibility设为none均为错误；flex布局中width/min-width/flex-shrink混用易撑开容器；float元素须设width且避免直接加margin/padding；background/border/z-index使用需注意语义与堆叠上下文；默认content-box盒模型常致溢出，推荐全局box-sizing:border-box。

opacity 写成 opaciy，box-shadow 用 0 重置

这是拼写和语义双重错误的高发区。比如 opaciy: 0.5（少了个 t），浏览器直接忽略整条声明；又比如 box-shadow: 0，看似“清空”，但 CSS 规范里 0 是一个合法值（等价于 0 0 0 #000），结果反而加了一层黑影。还有 visibility: none——none 不是有效值，正确是 visibility: hidden。

• opacity、visibility、box-shadow 都是高频误写对象，建议编辑器开启 CSS 语法校验
• 重置 box-shadow 必须用 box-shadow: none
• 想隐藏但保留占位用 visibility: hidden；想彻底移出渲染流用 display: none

width / min-width / flex-shrink 混用导致布局撑开

尤其在 Flex 布局中，新手常以为设了 width: 200px 就万事大吉，但子元素（如图片、input、长文本）默认会“拒绝收缩”，导致容器被撑宽甚至换行。更隐蔽的是：没设 min-width 的 input 在 Flex 容器里会固执地保持默认宽度（约 130px），让同级其他元素缩到离谱。

• Flex 子项默认 flex-shrink: 1，但内容不可折行或含内联块时仍可能失效
• 解决办法：给易撑开的元素加 min-width: 0 或 overflow: hidden
• input 元素务必显式设置 min-width: 0，否则同行布局极易错乱

float 元素不设 width、margin/padding 直接崩

哪怕只 float 一个按钮，只要没写 width，老版本 Chrome、IE、Safari 都可能出现宽度计算异常——有时窄得看不见，有时宽到溢出父容器。更麻烦的是，在 IE 下对 float 元素直接设 padding 或 margin，会导致位置偏移或重叠，且无报错提示。

• 所有 float 元素必须声明 width（哪怕只是 width: auto）
• 避免直接给 float 元素设 margin/padding；改用内部嵌套一层 div 来承载间距
• 现代项目请直接用 display: flex 或 display: grid 替代 float 布局

background、border、z-index 看似简单，实则陷阱密集

background 写成 background-color 就丢掉了图片/渐变；border 忘写样式（如 border: 1px solid #000 写成 border: 1px #000）会无效；而 z-index 更是“写了等于没写”的典型——它只在**已创建堆叠上下文**的元素上生效，比如父元素有 transform、opacity 或 will-change，你的 z-index: 999 就会被锁死在局部层级里。

• 调试布局错位时，优先给可疑元素加 border: 1px solid red 看真实边界
• 需要背景图+色时，用 background: #fff url(...) no-repeat center，别拆成两条声明
• 用 z-index 前，先确认父级是否意外触发了新堆叠上下文（检查 computed styles 中的 stacking context）

最常被忽略的其实是「默认盒模型」：你写 width: 100%; padding: 20px，结果超出父容器——不是代码错，是浏览器按 content-box 算的。加一句 * { box-sizing: border-box } 能省掉一半排版时间。