深入理解CSS

1. CSS 选择器的特异度
   特异度是用来决定在应用多个样式规则到同一个元素时，哪个规则的优先级更高的机制。特异度的计算方式基于选择器的不同组成部分，如选择器的类型、类、ID、伪类等。特异度值越高，优先级越高
   

/* 特异度值：0, 0, 1, 1 */
p.my-class {
  color: red;
}

/* 特异度值：0, 1, 0, 0 */
#my-id {
  color: blue;
}

2. CSS 继承
   CSS 中的继承指的是子元素会继承其父元素的某些样式属性，这样可以减少重复的样式定义。但并非所有属性都会继承，只有某些属性是可以继承的。
   

.parent {
  font-family: Arial, sans-serif;
  color: blue;
}

.child {
  /* 继承了父元素的字体和颜色 */
}

3. CSS 求值过程解析
   CSS 样式求值过程是指浏览器如何从样式规则中找出应用到每个元素的最终样式。这个过程涉及选择器匹配、特异度计算和样式的层叠等。
   
4. CSS 布局方式及相关技术
   CSS 提供了多种布局方式，包括流式布局、浮动布局、定位布局、弹性布局（Flexbox）、网格布局（Grid）等。每种布局方式都有不同的适用场景。
   

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

5. CSS 盒模型 - 行级
   CSS 盒模型是指将每个元素看作一个矩形的“盒子”，包含内容、内边距、边框和外边距。行级盒模型适用于行内元素，不会独占一行，它的宽度和高度受内容控制。
   

6. CSS 盒模型 - 块级
   块级盒模型适用于块级元素，它会独占一行，包含内容、内边距、边框和外边距。
   

.block {
  width: 200px;
  padding: 20px;
  border: 1px solid black;
  margin: 10px;
}