开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第十四天，点击查看活动详情
深入解析CSS(第一天)
在软件开发中,css无疑是初级前端开发工程师比较苦恼的东西,不过后期在学习vue或者react的时会学到各式各样的ui库,但是如果公司有ui的话,按照ui给的图去做一个页面必然会发现很多ui库其实不是很好用,因为它并不能满足各式各样的需求,最终还得用原生css去实现.
css看似是一个简单的声明式语法,但是在大型项目中css说极其复杂的一个东西,css需要处理很多很多细枝末节的东西,很多开发者在学习时也会看到很多层叠,盒模型,还有em单位,vh单位各种各样,但是不出意外很多人都和我一样,不是很清楚这些东西单纯就是看到很多大型网站在用,所以接下来我将讲解css最基础的样式,层叠,继承,特殊值
层叠
CSS层叠是指多种CSS样式的叠加，CSS样式在针对同一元素配置同一属性时，依据层叠规则（权重）来处理冲突，选择应用权重高的CSS选择器所指定的属性，一般也被描述为权重高的覆盖权重低的，因此也称作层叠。
概念可能比较复杂,如果我们用实例来表达概念或许你就一下子就明白了!!!
我们可以看到一个简单的h1有三种规则,标签,id,class,像这种就是我们所说的层叠,我们可以看看最终它的选择谁的font-size
我们可以看到最终还是选择id的,这里也就是所谓的权重高的覆盖权重低的
权重
-
!important。在属性后面使用该关键字可覆盖任何其他样式
-
内联样式
-
id选择器，如#id
-
类选择器、属性选择器（[attribute]）、伪类选择器（a:hover）
-
标签选择器、伪元素选择器（::before）
-
通配选择器（*）
-
继承
继承
继承。经常有人会把层叠跟继承混淆,如果一个元素的某个属性没有层叠值，则可能会继承某个祖先元素的值。比如通常会给元素加上font-family，里面的所有祖先元素都会继承这个字体，就不必给页面的每个元素明确指定字体了。下图是我们常见的继承图
inherit和initial
可能有部分开发工程师很少使用这二个关键字,但是这二个关键字其实很重要很重要,我们可以通过实例进行分析分析
我们可以看到当我们什么都不写,div自动继承父类的大小
当我们给子类添加initial后并不会继承上一级父类,而且继承了上上级父类的font-size也就是body的字体大小
我们可以看到虽然没有继承父类,但是inherit还是继承了父类的font-size
总结
inherit会继承父类的样式,initial不会继承父类样式,但是会继承上上级父类的样式
