CSS 选择器的特异度
- CSS选择器的特异度用于确定在多个选择器应用于同一个元素时，哪个选择器的规则将会被应用。
- 特异度通常由四个部分构成，它们分别是：
- 内联样式的特异度：每个内联样式的特异度为1000。
- ID选择器的特异度：每个ID选择器的特异度为100。
- 类选择器、属性选择器、伪类的特异度：每个类选择器、属性选择器和伪类的特异度为10。
- 元素选择器、伪元素的特异度：每个元素选择器和伪元素的特异度为1。
- 特异度的计算是根据选择器中各部分的数量来决定的。选择器中每多一个ID选择器、类选择器、属性选择器、伪类，或者每多两个元素选择器和伪元素，特异度就会增加相应的值。
- 特异度较高的规则将覆盖特异度较低的规则。
CSS 继承
CSS属性可以被设置为继承或不继承两种类型。
- 可继承属性：某些CSS属性可以从父元素继承到子元素。例如，字体样式、颜色、行高等属性会被子元素继承。若子元素没有自己的样式定义，它将继承父元素的这些属性。
- 不可继承属性：有些CSS属性不会被子元素继承，例如，边框样式、宽度、外边距等。子元素的这些属性需要单独进行设置，不会受到父元素的影响。
CSS 求值过程解析
浏览器根据选择器来确定哪些样式规则应该应用于特定的HTML元素。
- 选择器解析：浏览器首先解析CSS选择器，并找到与之匹配的所有元素。
- 特异度计算：对于匹配的元素，浏览器会计算每个样式规则的特异度，并确定哪个规则具有更高的特异度。
- 样式应用：浏览器根据特异度来决定应用哪个样式规则。特异度较高的规则将覆盖特异度较低的规则。
- 继承处理：浏览器将可继承属性从父元素传递给子元素，并应用那些不可继承属性。
CSS 布局方式及相关技术
- 块级布局：使用display属性设置为"block"，元素会独占一行，并从上到下垂直排列。
- 行内布局：使用display属性设置为"inline"，元素在一行内水平排列，不会独占一行。
- 行内块布局：使用display属性设置为"inline-block"，元素在一行内水平排列，但可以设置宽高等块级属性。
- 弹性布局：使用display属性设置为"flex"，通过flex容器和子项的属性设置，实现灵活的布局方式。
- 栅格布局：使用栅格系统（Grid System）将页面分割为行和列，实现复杂的布局结构。
- 定位（Positioning）：通过设置position属性为"relative"、"absolute"、"fixed"等，来实现元素在页面中的精确定位。
- 浮动（Float）：使用float属性，使元素脱离正常的文档流，实现文字环绕效果或多列布局。
- 弹性盒子（Flexbox）：通过display属性设置为"flex"，使用flex容器和子项的属性，实现弹性的布局方式。
- 网格布局（Grid Layout）：使用display属性设置为"grid"，通过网格容器和网格项的属性，实现复杂的布局结构。
CSS 盒模型 - 行级
- 行级元素在水平方向上，width（宽度）和height（高度）属性不生效，其宽度由内容决定。
- 行级元素在垂直方向上，margin（外边距）和padding（内边距）属性上下方向不生效，只有水平方向有效。
CSS 盒模型 - 块级
- 块级元素会在页面上独占一行，从上到下垂直排列。
- 块级元素的width（宽度）和height（高度）属性生效，可以通过设置这些属性来控制元素的尺寸。
- 块级元素的margin（外边距）和padding（内边距）属性在四个方向（上、下、左、右）都生效，可以通过设置这些属性来调整元素与其他元素之间的间距和内容之间的间距。
总结
CSS选择器的特异度决定了样式规则的优先级，继承机制影响了子元素的样式继承，求值过程解析确定了最终应用的样式规则，布局方式和盒模型控制了元素在页面中的排列和尺寸。学习CSS是前端开发中不可或缺的一部分。通过对CSS选择器、特异度、继承、布局方式和盒模型等概念的深入理解，结合不断的实践和调试，可以编写出优雅、高效、兼容性良好的CSS样式，让网页呈现出精美的外观和布局。
