HTML页面布局基础
这篇讲的是CSS布局中两个最基础也最容易踩坑的概念：盒子模型和定位。作者坦言，虽然大家都知道这些知识，但实际开发中总会在细节上翻车。 文章首先拆解了盒子模型。标准盒子模型中，元素宽度仅指内容区；而怪异模式（IE盒子模型）下，宽度则包含了内边距和边框。CSS3通过`border-sizing`属性让你可以自由切换：默认是`content-box`（标准），设为`border-box`则进入怪异模式。作者附上了直观的代码和效果对比图，清晰展示了两种模式下实际渲染尺寸的差异。 定位部分则聚焦于`position`属性。重点区分了相对定位和绝对定位：相对定位元素会“赖在”原文档流位置不走，只是视觉上偏移；绝对定位则彻底“脱离队伍”，其位置由最近的非`static`祖先决定。文章通过代码示例和截图，演示了普通流、相对定位与绝对定位下元素布局的动态变化，特别是绝对定位如何通过`z-index`控制层叠顺序。 整体来看，这是一篇针对前端开发者常犯细节错误的实用回顾，用对比的方式把基础概念讲透了。
