一些概念
特异度：
更特殊的选择器，它的优先级更高。
继承：
如果没有显式地指定一个值，某些属性会自动继承其父元素的计算值（一般来说，和文字相关的属性是可以继承的，和盒模型相关的属性是不可继承的）
对于不可继承的元素来说，可以使用 inherit 来实现对指定父元素的继承。
初始值：
-
CSS中，每个属性都有一个初始值
background-color的初始值为transportmargin-left的初始值为 0
-
类似的，我们可以使用
initial关键字显式重置为初始值background-color:initial
CSS 盒模型
在CSS中，元素根据其显示方式可以分为行级元素和块级元素。行级元素是指那些在文本行中显示的元素，而块级元素是指占据整个可用宽度的元素。这两种元素在盒模型方面有一些差异。
行级元素的盒模型
行级元素的盒模型相对简单。它们不具有宽度和高度属性，只有水平方向上的内边距（padding）和边框（border）属性。行级元素不会独占一行，它们会按照文本流水平排列。
在行级元素的盒模型中，可以设置的属性有：
padding-left、padding-right：用于控制内容与边框之间的水平间距。border-left、border-right：用于设置边框的样式、宽度和颜色。margin-left、margin-right：用于控制元素与相邻元素之间的水平间距（外边距在行级元素中不会导致垂直间距，因为它们不独占一行）。
块级元素的盒模型
块级元素的盒模型相对复杂，因为它们独占一行，可以设置宽度和高度，并且可以在垂直方向上设置内边距、边框和外边距。
在块级元素的盒模型中，可以设置的属性有：
width：用于设置元素的宽度。height：用于设置元素的高度。padding：用于控制内容与边框之间的内边距。border：用于设置边框的样式、宽度和颜色。margin：用于控制元素与相邻元素之间的外边距。
border-box 和 content-box
content-box
content-box是默认的CSS盒模型。在content-box模型中，元素的总宽度和总高度仅包括元素的内容区域（即width和height属性指定的尺寸）。任何边框（border）、内边距（padding）或外边距（margin）都会被额外增加到元素的总宽度和总高度之外。
简而言之，width和height仅表示元素的内容尺寸，而边框、内边距和外边距都会在其外部额外添加空间。
border-box
border-box是另一种盒模型。在border-box模型中，元素的总宽度和总高度包括元素的内容区域、边框和内边距。换句话说，width和height属性指定的尺寸会包括边框和内边距的空间，而外边距仍然会在其外部添加。
这使得在border-box模型下更容易控制元素的大小，因为你可以直接设置width和height属性来确定整个元素的尺寸，而不需要考虑边框和内边距的额外空间。
如何设置盒模型
可以使用CSS的box-sizing属性来设置盒模型的类型：
box-sizing: content-box;：使用content-box盒模型。box-sizing: border-box;：使用border-box盒模型。
例如，要将元素设置为border-box盒模型：
css
复制代码
cssCopy code
.element {
box-sizing: border-box;
width: 200px;
padding: 10px;
border: 2px solid black;
}
在上面的例子中，总宽度将是200px（包括边框和内边距），而不需要额外计算边框和内边距的空间。
