最新消息:暂无推荐

前端布局基础概述

山外有山 onlyling 132浏览 0评论

前端圈有个“梗”:在面试时,问个css的position属性能刷掉一半人,其中不乏工作四五年的同学。在公司一直有参与前端的基础面试,深感这个“梗”不是个玩笑。

然而,我觉得实际比例可能会更高,甚至很多面试官自己也未必真正掌握。因为大部分前端同学,可能不知道初始包含块的概念,或知道但对这个概念理解有误。

造成这种现象的原因主要有两方面,一方面是在介绍这个知识点时,网上有谬误的文章太多,国内外亦如此(MDN也名列其中),导致很多同学被误导(我一开始也是),而且这种错误被代代相传;另一方面可能是我们平时不太注重概念的定义、自身对待知识的态度还不够严谨、缺乏验证精神和系统总结的习惯。

一次偶然的机会,我发现了这种谬误,并找到了W3C组织对初始化包含块的官方定义,也为了让刚入前端圈的同学少走一些弯路,在此我想借本文分享给大家(详述请见5.5. 包含块章节),也系统分享一下,本人在前端布局基础方面积累的浅薄经验。(因为是系统概述,所以篇幅会比较长,希望各位读者有心理准备)

目录

  • 什么是前端布局基础?
  • 为什么要学好前端布局基础?
  • 量化布局方案的合理性
  • 布局基础要点
    • CSS标准盒模型(或W3C盒模型)
    • box-sizing(CSS3属性)
    • 元素的分类及其布局特性
    • 格式化上下文(Formatting Context)
    • 包含块(Containing Block)
    • 基本原理

总结

本文从CSS盒模型及其发展史、元素的分类及其布局特性、格式化上下文(Formatting Context)、包含块、基本原理(文档流、浮动、清除浮动、定位、行框、margin)这五大模块,系统介绍了一下前端的布局基础,希望此次分享,能够让各位读者对前端基础布局有一个底层、体系的认识。因为内容涵盖过广,难免会有纰漏,还望见谅和指正。

此篇文章断断续续写了几个月,从年前写到年后,一方面是因为这个标题太大,含括的内容太多,需要慢慢梳理;一方面是文中要讲的东西,很多是出于本人的感悟和总结,为了保证观点的正确性、严谨性以及和行业的标准术语做好同步,需逐一验证;还有一方面也是近几个月来,本人需要处理的私事较多,分散了精力。

时隔半年,依然有不少朋友还在关注我的公众号,谢谢你们的支持。这迟来的一篇分享,希望能对各位有用,后面我也会努力分享更多对大家有帮助的文章。

最后我还想再分享一些心得体会:

不要轻视简单的东西

我们在生活中总是容易忽略一些简单的东西,因为轻视简单,导致过了几年依然也没有掌握,前端的同学更应该注意这一点。

尽信书不如无书

不要太相信权威,而是要学会验证、总结,并构建自己的知识体系。

学技术要看官方文档

很多同学在初学时喜欢看一些快速入门的教程,我觉得这种学习习惯挺好的,但是建议不要遗漏官方文档的学习。因为初学者很难去鉴定一个非官方文档的质量,运气不好的话,还会被误导。而且官方文档最贴近原作者的想法,我们更容易体会到其设计思想。

链接

很棒的一篇文章,细腻的讲解

原文阅读:前端布局基础概述

转载请注明:OnlyLing-WEB前端开发者 » 前端布局基础概述

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址