选择器的特异度
特异度是由四个部分组成的数值，每个部分的权重按照以下顺序递减：
- 内联样式（权重最高）：直接在HTML标签中通过style属性指定的样式，例如
<div style="color: red;">。 - ID选择器：通过元素的id属性来选择，例如
#my-element。 - 类选择器、属性选择器和伪类选择器：通过元素的类、属性或伪类来选择，例如
.my-class、[type="text"]、:hover。 - 元素选择器和伪元素选择器：通过元素的标签名来选择，例如
div、::before。
样式的覆盖和继承
当多个样式规则应用于同一个元素时，会发生样式的覆盖。覆盖是通过特异度（specificity）来确定的，特异度高的样式规则会覆盖特异度低的样式规则。特异度是由选择器决定的，如前面所提到的特异度计算规则。如果两个样式具有相同的特异度，则后面出现的样式规则会覆盖先前的样式规则。为了解决样式覆盖的问题，可以使用特定的选择器或增加特异度来改变样式的优先级。
样式的继承：
某些样式属性可以被子元素继承，这意味着子元素会从父元素继承相同的样式属性值。继承样式的属性通常是与文本相关的属性，如color、font-family、font-size、line-height等。通过继承，可以实现一致的样式效果，尤其是对于文本内容。但需要注意的是，并不是所有的样式属性都可以继承，一些布局相关的属性（如width、height）默认是不会被子元素继承的。
CSS中的盒子模型
- 内容区域（content）：元素实际显示内容的区域，它的大小由元素的宽度（width）和高度（height）属性设置。
- 内边距（padding）：内容区域与边框之间的空白区域，用来控制元素内容与边框之间的距离。内边距可以使用 padding 属性来设置。
- 边框（border）：包围内容区域和内边距的线条或样式，它的大小和样式可以使用 border 相关属性进行设置。
- 外边距（margin）：元素与其他元素之间的空白区域，用来控制元素与其他元素之间的间距。外边距可以使用 margin 属性来设置。
FLex Box和Grid
Flexbox（弹性盒子布局）：
Flexbox 是一种用于创建灵活的、自适应的和可伸缩的布局的 CSS 模块。它使用 flex 容器（flex container）和 flex 项目（flex items）来实现布局。通过 flex 容器的属性设置，可以控制项目在容器内的布局方式、对齐方式和排列顺序等。而 flex 项目也具有一些属性，用于调整项目在容器内的大小、弹性、排序和对齐等。
Grid（网格布局）：
Grid 是 CSS 中的一种二维布局系统，它允许将页面分割为行和列，形成一个网格。通过设置 grid 容器（grid container）的属性，可以定义网格的结构和样式，包括行数、列数、行间距、列间距等。而网格容器中的项目则可以在网格中自由定位，可以指定项目所占的行数、列数、起始位置等。
Grid Line（网格线）：
网格线是 Grid 布局中的一个概念，它是网格中的水平线和垂直线。通过 grid-line 属性，可以指定项目在网格中跨越的网格线的位置，从而控制项目在网格内的布局。
Float（浮动）：
浮动是一种定位元素的方式，通过设置元素的 float 属性，可以使元素“浮动”到其容器的左侧或右侧，并允许其他内容环绕着它。浮动元素会脱离正常的文档流，并可能导致容器塌陷等问题。通常用于实现多列布局和图文混排的效果。然而，由于浮动的一些特性和问题，现在通常更倾向于使用 Flexbox 或 Grid 来实现布局。
Position（定位属性）：
定位属性用于控制元素在页面上的定位方式。常见的定位属性包括 relative（相对定位）、absolute（绝对定位）、fixed（固定定位）和 sticky（粘性定位）。通过设置元素的 position 属性，可以操控元素相对于其包含块或视口的位置，并可结合 top、right、bottom 和 left 属性进行微调。定位属性常用于创建覆盖层、悬浮菜单和特定定位效果等。
