前端圈有个“梗”：在面试时，问个css的position属性能刷掉一半人，其中不乏工作四五年的同学。在公司一直有参与前端的基础面试，深感这个“梗”不是个玩笑。
然而，我觉得实际比例可能会更高，甚至很多面试官自己也未必真正掌握。因为大部分前端同学，可能不知道初始包含块的概念，或知道但对这个概念理解有误。
造成这种现象的原因主要有两方面，一方面是在介绍这个知识点时，网上有谬误的文章太多，国内外亦如此（MDN也名列其中），导致很多同学被误导（我一开始也是），而且这种错误被代代相传；另一方面可能是我们平时不太注重概念的定义、自身对待知识的态度还不够严谨、缺乏验证精神和系统总结的习惯。
一次偶然的机会，我发现了这种谬误，并找到了W3C组织对初始化包含块的官方定义，也为了让刚入前端圈的同学少走一些弯路，在此我想借本文分享给大家（详述请见5.5. 包含块章节），也系统分享一下，本人在前端布局基础方面积累的浅薄经验。（因为是系统概述，所以篇幅会比较长，希望各位读者有心理准备）
目录
- 什么是前端布局基础？
- 为什么要学好前端布局基础？
- 量化布局方案的合理性
- 布局基础要点
- CSS标准盒模型(或W3C盒模型)
- box-sizing（CSS3属性）
- 元素的分类及其布局特性
- 格式化上下文（Formatting Context）
- 包含块（Containing Block）
- 基本原理
总结
本文从CSS盒模型及其发展史、元素的分类及其布局特性、格式化上下文(Formatting Context)、包含块、基本原理（文档流、浮动、清除浮动、定位、行框、margin）这五大模块，系统介绍了一下前端的布局基础，希望此次分享，能够让各位读者对前端基础布局有一个底层、体系的认识。因为内容涵盖过广，难免会有纰漏，还望见谅和指正。
此篇文章断断续续写了几个月，从年前写到年后，一方面是因为这个标题太大，含括的内容太多，需要慢慢梳理；一方面是文中要讲的东西，很多是出于本人的感悟和总结，为了保证观点的正确性、严谨性以及和行业的标准术语做好同步，需逐一验证；还有一方面也是近几个月来，本人需要处理的私事较多，分散了精力。
时隔半年，依然有不少朋友还在关注我的公众号，谢谢你们的支持。这迟来的一篇分享，希望能对各位有用，后面我也会努力分享更多对大家有帮助的文章。
最后我还想再分享一些心得体会：
不要轻视简单的东西
我们在生活中总是容易忽略一些简单的东西，因为轻视简单，导致过了几年依然也没有掌握，前端的同学更应该注意这一点。
尽信书不如无书
不要太相信权威，而是要学会验证、总结，并构建自己的知识体系。
学技术要看官方文档
很多同学在初学时喜欢看一些快速入门的教程，我觉得这种学习习惯挺好的，但是建议不要遗漏官方文档的学习。因为初学者很难去鉴定一个非官方文档的质量，运气不好的话，还会被误导。而且官方文档最贴近原作者的想法，我们更容易体会到其设计思想。
链接
很棒的一篇文章，细腻的讲解
原文阅读：前端布局基础概述
转载请注明：OnlyLing - Web 前端开发者 » 前端布局基础概述