一个div，毕业三种写法，论文结果大不一样

我刚学HTML那会儿，毕业觉得div就是论文个盒子。写个<div>，毕业里面塞内容，论文完事。毕业直到有次帮朋友改页面，论文同一个布局，毕业他用float，论文我用flex，毕业显示效果差了十万八千里——他的论文底部永远对不齐，我的毕业三行代码搞定。那时候才明白，论文div本身没意义，毕业怎么摆弄它才是关键。

毕业论文选这个题，导师看了一眼说：“太基础。”我说：“基础的东西才容易写错。”他没再拦我。

div不是万能胶，但没它真不行

HTML里能用的标签很多，header、section、article，语义清楚。可实际写页面，你总会遇到“这块东西不知道该叫什么”的情况。比如一个卡片右下角的标签栏，你说它是aside？不合适。是footer？也不对。最后还得用div包起来，加个class叫card-tags。这不是偷懒，是现实。

我统计过自己最近写的三个项目，div占了总标签数的四成左右。比例不低，但每一个都有明确用途——要么是布局容器，要么是样式钩子，要么是JS操作的锚点。没有一个是“随便写写”的。

CSS选择器写错，div就白写了

见过太多这样的代码：<div class="box"><div class="box"><div class="box">，三层嵌套全叫box。问为什么，答“方便”。结果样式一塌糊涂，只能靠!important硬压。我自己的习惯是：布局层用layout-前缀，组件层用comp-，工具类用u-。看起来啰嗦，改起来省心。

还有一点，很多人写.box div这种后代选择器，性能差不说，稍微改下结构就崩。我倾向给每个需要样式的div直接加类名，哪怕名字长一点。.sidebar-user-avatar比.sidebar div div img好维护得多。

浮动、定位、flex，我踩过的坑

大二做课程设计，用float布局。父容器高度塌陷，加了个clearfix，以为万事大吉。结果响应式一测，手机端全乱。后来换flex，display: flex; flex-wrap: wrap;两行解决。但flex也不是没坑——flex: 1和flex: auto的区别，我调了半小时才搞明白。

绝对定位更邪门。有次做个下拉菜单，position: absolute写上去，菜单直接飞到屏幕外。查了半天，原来是父元素没设position: relative。这种错误书上不会专门讲，只有自己撞过才记得住。

写论文和写代码，其实是两回事

论文要求逻辑严密、引用规范。写代码讲究能跑、好改、少坑。我一开始想把论文写成技术手册，导师说不行，得有“研究”的样子。后来调整思路：用具体案例对比不同写法的优劣，再配上代码片段和浏览器渲染截图。比如同一个三栏布局，分别用float、inline-block、flex实现，截图放一起，问题一目了然。

数据部分我做了个小实验：找十个同学，给他们同样的设计稿，看他们用div+css实现时最常犯哪些错误。结果排前三的是：类名混乱、过度嵌套、滥用定位。这比空谈理论有说服力。

最后说点实在的

div和css没什么高深理论，但写好不容易。我的论文里没有发明新框架，也没提出什么算法。就是把常见问题拆开，一个一个说清楚。如果你也在写类似题目，别想着搞个大新闻。把box-sizing为什么建议全局设成border-box讲明白，比堆一堆“响应式原理”之类的词有用得多。

代码贴出来能跑，截图放出来能看，案例摆出来能复现——做到这三点，论文就不会太差。