前几天帮公司新人改网页，好家伙，错误多得我直拍大腿！写了个把月页面还能掉这些坑，干脆把踩过的雷全捋一遍，你们可别学我犯蠢。

一上来就栽在布局上

那天吭哧吭哧堆了个商品展示区，左边图右边字。结果屏幕一缩，文字直接怼图片底下去了，活像被踩扁的蛤蟆。折腾半天发现漏了给父盒子加flex，光顾着调子元素宽高。补上display:flex那天，我给自己灌了瓶冰啤酒。

margin不听话真要命

做按钮组时间距乱飞，设了margin-top压根不生效。气得我直拍键盘，发现是父盒子没设border导致的塌陷。硬是在父元素加了条1px透明边框，这破问题才消停。现在看到margin都条件反射加overflow:hidden保命。

float残留的破事

去年写的导航栏突然抽风，下拉菜单死活冒不出来。查了仨钟头才发现祖宗十八代里有个标签飘着，早八百年前就该clearfix的。现在改页面第一件事就是全局搜float，见一个灭一个。

z-index叠罗汉翻车

上周做的弹窗被banner图生吞了！z-index调到9999都不顶用。后来发现这倒霉弹窗的父元素设了position:static，z-index压根不生效。改完relative当场就想给编辑器磕头。

血的教训攒成避雷针

• 布局容器没设display直接开工，等于用筷子盖楼房
• 嵌套盒子没overflow坐镇，margin塌陷分分钟教你做人
• float不清除？等着半夜被夺命call叫起来改bug
• 玩z-index前先看爹妈定位，static爹生不出会飘的儿子

现在传文件前都先狂按ctrl+0看缩放，鬼知道哪个犄角旮旯还藏着幺蛾子。这些坑踩透之后，网页蹦跶得可欢了！