CSS相关整理

CSS（层叠样式表）是用于描述HTML文档的表现形式的一种样式语言。
1. 选择器
•  标签选择器：根据HTML标签选择元素。
•  类选择器：使用.前缀，根据类名选择元素。
•  ID选择器：使用#前缀，根据ID选择元素。
•  属性选择器：根据元素的属性或属性值选择元素。
•  伪类选择器：根据元素的状态选择元素，如:hover、:focus等。
•  伪元素选择器：允许你选择元素的特定部分，如::before和::after。
2. 盒模型
•  内容（Content）：盒子的主要内容区域。
•  内边距（Padding）：内容周围的空间。
•  边框（Border）：围绕内边距的边框。
•  外边距（Margin）：盒子外的空间。
3. 定位
•  静态定位：元素按照正常的文档流进行布局。
•  相对定位：相对于其正常位置进行偏移。
•  绝对定位：相对于最近的已定位祖先元素进行定位。
•  固定定位：相对于浏览器窗口进行定位。
•  粘性定位：结合了相对定位和固定定位的特点。
4. 布局
•  Flexbox：一种灵活的布局模式，用于一维布局。
•  Grid：一种用于二维布局的系统。
•  Floats：使元素向左或向右浮动，常用于创建多列布局。
•  Positioning：通过position属性实现更复杂的布局。
5. 文本和字体
•  字体样式：font-style、font-weight等。
•  字体大小：font-size。
•  文本对齐：text-align。
•  文本装饰：text-decoration。
•  文本转换：text-transform。
6. 颜色和背景
•  颜色：color属性。
•  背景颜色：background-color。
•  背景图像：background-image。
•  渐变：linear-gradient和radial-gradient。
7. 响应式设计
•  媒体查询：根据不同的屏幕尺寸和设备特性应用不同的样式。
•  视口单位：vw、vh等，基于视口尺寸的单位。
•  Flexbox和Grid：在响应式设计中非常有用的布局工具。
8. 动画和过渡
•  过渡：transition属性用于在状态变化时创建动画效果。
•  动画：animation属性用于创建更复杂的动画。
9. 2D和3D转换
•  2D转换：transform属性，包括translate、rotate、scale等。
•  3D转换：transform属性的3D版本。
10. CSS变量
•  自定义属性：允许你在CSS中定义变量，提高样式的可维护性。

11. 优先级和继承

CSS 优先级
CSS 优先级是指当多个规则应用于同一个元素时，哪个规则会生效。理解优先级对于解决样式冲突和编写更有效的CSS代码至关重要。以下是影响CSS优先级的四个主要因素：
1.  内联样式：直接在HTML元素的style属性中定义的样式具有最高优先级。
2.  ID选择器：#后面跟ID名称的选择器。
3.  类选择器、伪类选择器和属性选择器：.后面跟类名称的选择器，:后面跟伪类名称的选择器，以及根据属性选择元素的选择器。
4.  标签选择器和伪元素选择器：根据HTML标签选择元素的选择器，以及::后面跟伪元素名称的选择器。
优先级规则可以用以下公式表示：
 \text{优先级} = (\text{内联样式}) \times 1000 + (\text{ID选择器数量}) \times 100 + (\text{类选择器、伪类选择器和属性选择器数量}) \times 10 + (\text{标签选择器、伪元素选择器数量}) 
如果两个规则具有相同的优先级，则后定义的规则会覆盖先定义的规则。
CSS 继承
CSS 继承是指某些CSS属性可以被元素的子元素继承的特性。这意味着，如果一个属性在父元素上定义了，那么它的所有子元素也会自动拥有这个属性，除非子元素有更具体的规则覆盖它。
以下是一些常见的可继承属性：
•  color
•  font-family
•  font-size
•  font-style
•  font-weight
•  line-height
•  letter-spacing
•  text-align
•  visibility
•  white-space
不可继承的属性包括：
•  width、height、margin、padding、border、background 等盒模型相关的属性。
•  position、float、clear、display 等布局相关的属性。
理解继承和优先级的重要性
•  代码简洁性：通过理解继承，可以减少代码量，因为不需要为每个元素重复相同的样式。
•  样式一致性：继承有助于保持文档中字体和颜色等属性的一致性。
•  覆盖和覆盖规则：理解优先级可以帮助你预测和控制样式的最终结果，以及如何覆盖默认样式或继承的样式。
示例
假设我们有以下CSS和HTML代码：
/* 1. 标签选择器 */
p {
    color: blue;
}

/* 2. 类选择器 */
.error {
    color: red;
}

/* 3. ID选择器 */
#unique {
    color: green;
}

<p class="error" id="unique">This is a paragraph.</p>

在这个例子中，<p>元素将显示绿色文本，因为ID选择器的优先级最高。即使.error类选择器和p标签选择器也指定了color属性，但由于ID选择器的优先级更高，所以它们被#unique选择器覆盖。
通过这个例子，你可以看到如何根据优先级规则来确定最终的样式应用。

12. 预处理器
•  Sass、Less等，提供变量、混合、函数等高级功能。