CSS那些事儿
总体观点
在现代以Flexbox和Grid为主流的排版时代之前，每一个资深前端工程师都曾经历过与浮动塌陷、双倍外边距和跨浏览器渲染差异殊死搏斗的蛮荒年代。林小志的《CSS那些事儿》是中国前端发展史上的一座灯塔级著作，它不仅陪伴了整整一代Web开发者的成长，更系统沉淀了CSS盒模型与文档流最坚实底层的物理规律。
全书以极其生动详实的图解方式，层层抽丝剥茧了W3C标准盒模型与IE怪异盒模型的数学边界、BFC（块格式化上下文）清除浮动的真正成因、绝对与相对定位在层叠上下文（z-index）中的三维堆叠顺序，以及在IE6/7/8与Firefox等主流浏览器之间的排错Hack哲学。它向读者证明：编写出优雅稳健的样式表不是靠盲目碰运气微调像素，而是源自对渲染树排版算法深刻的规律认知。
核心观点
-
1. 理解盒模型的本质：外边距、边框与内边距的骨架
区分content-box与border-box的计算基准，是杜绝页面元素意外撑破容器换行的头号基本功。
剖析在未声明DOCTYPE时触发的IE怪异盒模型，解释为什么设置100px宽度加上10px padding会导致在不同模式下总宽度出现20px巨大偏差。 -
2. 浮动的起源与清除浮动（Clearfix）的物理原理
float原本是为了实现报纸般的文字环绕图片而设计的，用来做多列布局必然引发父元素高度坍塌，必须建立BFC闭合浮动。
演练经典微型clearfix类（`:after`伪元素配合`display: table`与`clear: both`），彻底告别在HTML结构中乱插空div清除浮动的坏味道。 -
3. 定位的三维空间法则与z-index的父级上下文约束
元素的层叠优先级并不取决于z-index数值的大小，而是受制于它所在的层叠上下文（Stacking Context）的层级关系。
解释为什么一个`z-index: 9999`的下拉菜单依然会被一个`z-index: 1`但父级更高的轮播图遮挡的深层渲染树机制。 -
4. HTML语义化标签是优秀CSS样式的坚固基石
滥用div和span标签会导致样式选择器臃肿不堪，使用h1-h6、ul/li与p等语义化标签能让CSS结构清晰自解释。
用一个无序列表`<ul>`配合几行紧凑CSS构建出结构干净、SEO友好且无障碍屏幕阅读器可识别的横向导航菜单栏。 -
5. 跨浏览器调试：用排除法与边界重置建立稳健样式基线
不要在混乱的代码中到处打补丁，从全局CSS Reset重置内外边距开始，逐步排查各个浏览器的默认渲染缺陷。
解决IE6双倍浮动外边距Bug（Float Double Margin）：只需给浮动元素加上一行简单经典的`display: inline;`即可瞬间药到病除。
全书思维导图 · 知识脉络树
全书结构
-
第1章 基础奠基：Web标准与语法规范
系统讲解CSS语法、选择器权重计算（Specificity）、继承机制与CSS引入的最佳工程实践。
公式化推演`!important`、内联样式、ID选择器、类选择器与标签选择器的权重级数，破解样式覆盖谜案。 -
第2章 盒子模型：从微观像素到布局骨架
深入剖析margin折叠现象、padding内边距陷阱、border样式以及标准与怪异盒模型切换原理。
图解垂直外边距合并（Margin Collapsing）的触发条件，演示如何通过添加微小边框或触发BFC阻断外边距塌陷。 -
第3章 浮动与排版：揭开流式布局的秘密
深入float运行机制，剖析脱离文档流后的环绕行为与多种清除浮动（Clearfix）手法的演化与优劣。
拆解两栏与三栏圣杯布局（Holy Grail Layout），利用负边距（Negative Margin）实现主体内容优先加载排版。 -
第4章 定位艺术：相对、绝对与固定定位
详解static、relative、absolute与fixed四种定位模式，揭秘层叠上下文与模态弹窗居中技巧。
演示“子绝父相”（子元素绝对定位，父元素相对定位）黄金组合在微型角标与悬浮工具栏中的灵活应用。 -
第5章 兼容与调优：跨浏览器Bug排查手册
整理IE6/7/8高频兼容问题清单，介绍CSS Reset构建原则与精简无污染Hack编写指南。
排查IE6下著名的“幽灵文本”与“3像素Bug”，传授精准优雅的兼容性测试与隔离方案。 -
第6章 综合实战：工业级页面组件重构
从一张PSD视觉稿出发，全流程切图并编写高复用、高扩展的自适应导航、图文列表与Tab切换组件。
完成大型门户网站首页的纯CSS多级下拉菜单重构，仅凭伪类选择器`:hover`实现丝滑无JS依赖的动画展开。