深入了解CSS（上）
CSS选择器优先级
-
根据选择器的特异度（Specialty）： 计算选择器的特异度，特异度越高，优先级越高。 特异度的计算方法：
- 元素选择器（Element Selector）：
div - 类选择器（Class Selector）：
.class - ID选择器（ID Selector）：
#id - 伪类选择器（Pseudo-class Selector）：
:hover - 伪元素选择器（Pseudo-element Selector）：
::before - 属性选择器（Attribute Selector）：
[type="text"]
id选择器的优先级最高，其次是类选择器，再次是元素选择器。
- 元素选择器（Element Selector）：
-
选择组合类选择器（Combined Selector）：例如：
.class1.class2选择组合类选择器的优先级会比单个类选择器的优先级高，它会覆盖掉单个选择器中的样式。
CSS继承
- 继承：当一个元素没有指定某个样式时，它会从其父元素继承该样式。例如：
<p >This is a <span>paragraph</span>.</p>
<style>
p {
color: red;
}
</style>
在上面的代码中，span元素没有指定color样式，因此它会从p元素继承color样式。(一般用于文本样式的继承)
- 显示继承：使用inherit关键字可以将父元素的样式直接应用到子元素上。例如：
<div>
<p>This is a <span>paragraph</span>.</p>
</div>
<style>
div {
color: red;
}
p {
color: inherit;
}
</style>
在上面的代码中，p元素的color样式使用了inherit关键字，因此它会直接继承div元素的color样式。
- 初始值：CSS中每个属性都有初始值，当元素没有指定该属性时，它会使用初始值。也可以使用
initial关键字来设置初始值。
CSS盒模型
-
盒模型：CSS盒模型是指CSS中用来控制元素的大小、位置和外观的模型。CSS盒模型由四部分组成：边框
border、内边距padding、内容content、外边距margin。 -
宽度,高度：CSS中有三种设置宽度的方式：
width，height属性：设置元素的宽，高度，单位可以是像素px、百分比%（容器有指定的宽高度时，百分比才会生效）、em等，也可以是auto（根据内容自动调整宽高度）。注：width属性设置的是内容区的宽度，padding和border会使得内容区的宽度增加。
-
内边距：
padding属性用来设置元素的内边距，可以设置四个方向的内边距padding-top,padding-right,padding-bottom,padding-left，单位可以是像素px、百分比%（相对于容器的宽度）、em等。 -
边框：
border属性用来设置元素的边框，可以设置边框的宽度border-width、样式border-style,如实线border-style:solid、颜色border-color。四个方向。例子：
div {
border: 1px solid black;
}
border-box：设置元素的边框和内边距包含在内容区的宽度内。
box-sizing：设置元素的盒模型，可以设置content-box（默认值）、border-box。
- 外边距：
margin属性用来设置元素的外边距，可以设置四个方向的外边距margin-top,margin-right,margin-bottom,margin-left，单位可以是像素px、百分比%（相对于容器的宽度）、em等。 例子：
div {
margin: auto; /* 居中 */
}
