【前端圭臬】五:CSS 核心机制——布局

前言

最近几周我一直在看 CSS 规范,下来感受就是,真·心乱如麻。也就是 CSS 是真的简单,真的,你说你 JS 巨佬,我膜拜,HTML 大师,我 respect,CSS 专家,呃,你是写规范的吗,出来咱俩比划比划,别怪我不讲武德。

对于 CSS 本身,真的可以做到战略上藐视。只要你对它的知识体系有一个逻辑合理且基本完备的认知,所有的问题都不过是技巧层面的。

当然,由于 CSS 如何起效、如何表现最后其实是浏览器说了算,因此单纯地从 CSS 语言角度出发是无法获得完整的应用知识的,这是后话,暂且不表,这篇文章我们主要来讲一讲布局方面的知识。

1 CSS 有哪些布局模式?

考虑到网页排版的(早期)需求,CSS2 规范中描述了 “视觉格式化模型” 。在这个模型中,文档树上的每个元素都基于 “盒子模型” 生成了 0 个或多个盒子,而这些盒子依据如下内容排版:

  • 盒子的维度属性(dimensions,也就是宽高边距这些)和类型(type,由 display 属性决定)
  • 位置约束(正常流、浮动、绝对定位)
  • 文档树中元素的关系(后代、子代、sibling、preceding)
  • 外部信息(比如 viewport size,图片维度等)

其实理论上这一套东西也够用了,只是想要达到某些效果需要使用各种复杂

相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付 39.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值