这周第一个学习的就是盒子模型。说它是CSS的基石一点不为过。之前写页面的时候，总是搞不清楚一个元素到底占多宽——明明内容只有一点点，为什么撑出来的尺寸和预期不一样？学完content、padding、border、margin之间的关系之后才明白，问题出在默认的`box-sizing: content-box`上。后来统一改成`border-box`，布局一下子就好控制了很多。再加上昨天帮同学排查的一个bug，也是因为类名写错了导致样式没生效，更加深了对细节的重视。
精灵技术的思路其实不复杂：把多张小图标合并成一张大图，通过`background-position`来定位显示。好处显而易见——减少HTTP请求次数，提升页面加载速度。实际操作的时候，定位坐标需要反复调试，稍不注意图标就偏了。我用小米商城的侧边栏图标练了练手，虽然调坐标花了不少时间，但最终跑通的时候还是挺有成就感的。
display这周重点理解了`block`、`inline`、`inline-block`三者的区别。以前只知道`div`是块级、`span`是行内，但什么时候该用`inline-block`，什么时候该靠浮动来解决，脑子里一直是模糊的。这周通过几个小练习把边界理清了：`inline-block`能在一行排列的同时设置宽高，适合做一些简单的水平排列，但元素间的空白间隙问题让人头疼，后来用负margin和父级`font-size: 0`两种方式分别解决了。
浮动是本周花时间最多的一块。`float`最初的设计目的是实现文字环绕图片的效果，后来被大量用于布局。但浮动带来的高度塌陷问题确实让人头大。我重点练习了三种清除浮动的方法：父级`overflow: hidden`、伪元素`::after`清除法、以及额外标签法。目前用得最顺手的是伪元素法，代码干净，也不会产生副作用。
下周准备学习弹性盒子布局Flexbox。据说Flexbox能大幅简化之前靠浮动和定位才能实现的布局方式，期待学完之后能重构这周写的一些练习页面。另外，下周还会穿插一些**实战项目**，争取把前面零散的知识点串起来，在真实场景中练手。
