CSS盒模型与选择符深度解析

本文档详细介绍了CSS经典总结中的关键知识点，包括元素的总宽度和高度计算规则。在CSS中，一个元素的总宽度是由多个组成部分构成的：左边界（left border）、左边框（left border width）、左填充（left padding）、元素的实际宽度（width，如width:100px）、右填充（right padding）、右边框（right border width）以及右边界（right border）。同样，元素的高度由上边界（top border）、上边框、上填充、实际高度、下填充、下边框和下边界组成。 文档还涵盖了CSS的基本语法，如选择符的使用。选择符是CSS中用于匹配和应用样式的标识符，包括类型选择符（如p、h1等，其样式会应用于所有同类型的元素）、ID选择符（#myID，用于特定ID的元素）、class选择符（.myClass，用于拥有特定类的所有元素）、特殊选择符（如`:hover`表示鼠标悬停状态）、通用选择符（如*，匹配除元素本身之外的所有后代）、伪类和伪对象选择符（例如`:first-child`，选择第一个子元素），以及组合选择符如子元素选择符（>）和后代选择符（~）。 CSS的继承、层叠和特殊性也是重要内容。CSS继承是指子元素可以继承父元素的一些样式，而层叠规则决定了当多个样式冲突时，哪个样式会被应用。特殊性通过 "!important" 来标记，用于强制覆盖其他样式。文档还提到了HTML元素的标签结构，如文件头标签、HTML文件起始和结束标签、文件标题标签和文件体标签，这些都是编写CSS样式的基础。 此外，文档展示了如何使用选择符来定义和应用CSS属性值。例如，`.red` 类选择器定义了红色字体的样式，然后在HTML中通过`<h3 class="red">`来应用这个类。这表明了如何利用CSS来控制文档中元素的外观，尤其是对通用元素如div和span的样式管理，强调了类型选择符的使用需谨慎，以免影响整体布局。 这篇文章深入浅出地讲解了CSS的核心概念，从基础的盒模型到高级的选择符用法，为理解和实践CSS提供了全面的指导。