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 或 <code>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 } 能省掉一半排版时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
