前几天搞登录页，div排来排去总跑偏。左边空一大块，右边按钮堆成山，F5一按心凉半截。

查毛病

掏出浏览器开发者工具怼着看：黄色警告堆得比代码还高。有个div硬是比它爹多出20像素，把亲兄弟都挤变形了。试着调margin值，这头压下去那头又翘起来，活像打地鼠。

土法子试错

先给所有div加border:1px solid red，当场笑出声——七八个框框像狗皮膏药互相粘着。发现个div没设宽度，自以为聪明写了width:100% + padding:20px，结果直接撑爆亲爹容器，手机上看字都挤成蚂蚁队。

• 歪招1：用position:absolute硬定位，电脑看着挺周正，手机屏竖过来直接飞出银河系
• 歪招2：疯狂!important覆盖样式，自己都忘了哪个样式生效

上真家伙

1. 掏出Flexbox救命符：给爹级div上display:flex; flex-wrap:wrap。俩按钮突然就肩并肩站再塞个justify-content:space-between，这俩自动分站左右两边

2. 治宽高溢出：box-sizing:border-box当头一套。现在设宽高自带内减，padding怎么加都不会炸框

3. 媒体查询收尾：@media (max-width:600px)里写：把侧边栏display:none，主框调成90%宽度。手机竖屏看终于不左右滚了

改完一跑——电脑平板手机三屏顺溜得像德芙广告。同事探头问咋整的，我指着屏幕说："让这些div孙子们认祖归宗了呗！"