深入CSS（上）
1.CSS 选择器的特异度
——哪条规则生效
CSS选择器的特异度是用来确定样式应用的优先级的一种方式。它是根据选择器中的各种规则进行计算的。
特异度可以用一个三元组(a, b, c)来表示，其中a、b、c分别代表选择器中id选择器、类选择器和元素选择器的个数。
具体的计算规则如下：
- 对于每个选择器，如果有id选择器，则a加1；
- 对于每个选择器，如果有类选择器、伪类选择器或属性选择器，则b加1；
- 对于每个选择器，如果有元素选择器或伪元素选择器，则c加1。
当比较两个选择器的特异度时，按照a、b、c的顺序进行比较。如果a的值相等，则比较b的值；如果b的值也相等，则比较c的值
2.CSS 继承
——某些属性会自动继承父元素的计算值-inherit显示继承/initial初始值
2.1CSS继承的使用
2.1.1 使用属性的inherit值
对于大部分css属性来说，他的值都可以设置为inherit，即为继承其父元素的该属性的值。如：例子中的child div就会继承parent的background-color属性。
...
<style>
.parent{
background-color: red;
}
.child{
background-color: inherit;
}
...
</style>
...
<body>
<div class="parent">
this is parent
<id class="child">
this is child
</id>
</div>
</body>
区分inherit、initial和unset：
inherit： 继承；如果元素的某css值设置为inherit，则说明该元素的该css值与其父元素的该css属性值一致。适用于所有css属性。
initial： 默认值；适用于所有css属性，将设置为该值的css属性取该属性的默认值。
unset： 不设置；对于默认可以继承的属性取父元素的继承值，不可以继承的属性取默认值。
2.1.2 默认继承的css属性
- 文本 color：颜色，a除外；
- direction：方向；
- font：字体；
- font-family：字体系列；
- font-size：字体大小；
- font-style：字体样式，如斜体；
- font-variant：用于设置小型大写字母；
- font-weight：用于设置字体粗体；
- letter-spacing：字母间距；
- line-height：行高；
- text-align：用于设置字体的对其方式；
- text-transform：用于修改大小写；
- visibility：可见性；
- white-space：用于指定如何处理空格；
- word-spacing：字间距。
3.CSS 求值过程解析
属性的计算步骤分为四步：
1.确定声明值
2.层叠冲突(对样式表有冲突的声明使用层叠规则,确定css值)
3.使用继承(对仍然没有值的属性,若可以继承,则继承父元素的值)
4.使用默认值(对仍然没有值的属性,使用默认值)
4.CSS 布局方式及相关技术
——CSS（层叠样式表）是一种用于描述网页中元素布局和样式的标记语言。CSS 提供了多种布局方式和相关技术，以下是一些常见的布局方式和技术：
-
盒模型（Box Model）：CSS 中的每个元素都被视为一个矩形的盒子，包括内容区、内边距、边框和外边距。通过设置这些属性，可以控制盒子的大小和间距。
-
流体布局（Fluid Layout）：流体布局是一种可以根据浏览器窗口大小自动调整的布局方式。通过设置百分比或弹性单位（如
rem或em）来定义元素的宽度和高度，使它们可以根据窗口大小进行自适应调整。 -
弹性盒子布局（Flexbox Layout）：弹性盒子布局是一种用于创建灵活且自适应的布局方式。通过将容器设置为
display: flex，可以以弹性盒子的形式排列其中的元素，实现对齐、分布和调整大小等功能。 -
网格布局（Grid Layout）：网格布局是一种二维布局方式，可以将页面划分为行和列，并按照网格单元格进行布局。通过设置容器为
display: grid，可以使用网格线来定位元素，实现复杂的布局结构。 -
定位（Positioning）：CSS 提供了相对定位（
position: relative）、绝对定位（position: absolute）和固定定位（position: fixed）等定位方式。
深入CSS （下）
1.CSS 盒模型 - 行级
——行级排版上下文IFC
1.特征:
(1) 内容决定元素所占位置, 不可以通过 CSS 改变宽高.
(2) 行内元素会在一条直线上排列 ( 默认宽度只与内容有关 ) 都是同一行的, 水平方向排列.
(3) 行内元素设置 width 无效, height无效 ( 可以设置 line-height ) margin上下无效, padding上下无效.
(4) 行内元素不能包含块级元素, 只能包含文本或者其它行内元素.
(5) 文本默认不换行. 且会把文本元素内的回车变成一个空格即文本分隔符, 在代码中要让两个行级元素之间换行要用
进行, 若是用回车不会让它们换行, 且会在两个行级元素间产生一个空格
2.常用的行级元素 , , , ,
2.CSS 盒模型 - 块级
——块级排版上下文BFC
1.特征:
(1) 独占一行, 从新行开始, 结束接着一个断行. 可以通过 CSS 改变宽高.
(2) 默认宽度是它本身父容器的 100%, 和父元素的宽度一致 , 与内容无关, 垂直方向排列.
(3) 块级元素可以包含行内元素和块级元素
2.常用的块级元素
,
- ,
- , ,
3.其他
1）display属性：display属性用于控制元素在页面中的布局方式和显示方式。它有多个可能的取值，常用的取值包括：
- block：元素将以块级元素的形式显示，即会独占一行。
- inline：元素将作为内联元素显示，即不会独占一行，可以与其他元素在同一行显示。
- inline-block：元素将以内联块元素的形式显示，即不会独占一行，但可以设置宽高等属性。
- none：元素将不会显示，对应的空间也将被释放。
2） flex box布局方式（二维 、常用）（justify-content align-items）
3）Grid布局（单一行列划分网格）（grid line网格线 grid area网格区域）
4）float浮动：有了flex box布局和grid布局后，其主用于图文环绕
5）position属性 ：static、relative、absolute、fixed
学习css的几点建议：
1.遵守MDN和W3C CSS规范；
2.保持好奇心，善用浏览器的开发者工具；
3.持续学习，css新特性不断出现
- ,
