【前端圭臬】四:CSS 核心机制——如何确定一个属性的值?

前言

按说这篇文章要说的内容搞前端的同学应该都很熟悉,但我发现问答社区里全是诸如为什么 body 四周有空白,为什么样式没有生效之类的问题。这说明很多人还是缺乏把知识串联起来,定位问题、解决问题 的能力。

什么叫定位问题?比如上面说的 body 四周有空白,你明明没有特别设置属性,那为什么会有空白呢?

有经验的同学知道,原因很可能在于浏览器的默认样式(属于用户代理)。但假设你从来没有听过这个词,你应该怎么办呢?

你想,你没有设置,显然有别的东西设置了。你知道 CSS 的全称是层叠(级联)样式表吧,什么是层叠?层叠不就是指不同来源的样式叠加在一起么。那么样式的来源可以是哪里?有哪些不是由开发者设置的?想到这一步,再去查阅 CSS 层叠对应的文档,很快就能找到答案。

当然,遇到这种问题时你也可以直接求助搜索引擎,毕竟有很多人踩过同样的坑。在工作或学习中,我们要善于使用搜索引擎,但当你遇到不那么常见的问题时,毕竟还是得想办法自己解决,而能够解决不常见的问题才是你的核心竞争力。

为了回答题目的问题,我们需要了解 优先级、层叠与继承。(Specificity, Cascading and Inheritance)

我看到有人把这个称为 CSS 三大机制,不至于不至于,这三个其实只是一种机制,合在一起决定了 如何确定属性的值 这么一件事。目前 CSS Cascading and Inheritance Level 4 和 Selector Level 4 都还未

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

抵扣说明:

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

余额充值