CSS青训笔记(中) | 青训营

99 阅读2分钟

一.选择器的特异度

选择器中id(#)>伪类(.)>标签(E) 可以看做数位,比如id为100,伪类为10,标签为1;按照选择器的种类、数量决定选择器的特异度,决定哪个选择器生效。

二. 继承

一般继承

对于嵌套的元素,父元素的某些样式规则会继承给子元素。这些样式规则包括字体、颜色、行高、文本对齐方式、列表样式等。CSS中的继承遵循以下规则:

1.子元素会继承父元素的样式。

2.继承样式会在文档的层级结构上向下传递。

3.如果一个元素有多个父元素,它会从最近的父元素继承样式。

4.子元素也可以通过覆盖来修改继承样式。

通过定义一些全局的样式规则,我们可以避免在每个元素上都编写相同的样式代码。同时,它还可以增加样式代码的灵活性和可维护性。如果我们需要全局修改网页中的某个样式,通过修改全局的样式规则,可以自动修改所有使用该规则的元素。

显示继承

一些元素是无法继承的,比如box-sizing等,可以使用inhert关键字让不可继承的被继承

根据不同的情景合理使用继承结构,有利于提升代码的复用性。

三.理解CSS

默认值

CSS中的每个属性都有一个初始值,例如background-color的初始值为transparent,margin-left的初始值为0;可以使用initial关键字重置为初始值,及忽略继承等影响重置为初始值。

CSS中值生效的过程

CSS中值的生效过程.jpg

布局

布局是CSS中确定内容大小和位置的算法,依据元素、容器、兄弟节点和内容等信息计算;

布局相关技术:常规流、浮动、绝对定位;其中,常规流的应用有行级、块级、表格布局、FlexBox、Grid布局等。

剩下的争取明天更!