层叠性
CSS层叠性（Cascading）是指在网页中应用多个样式规则时，根据一定的规则来确定最终应用的样式。层叠性使得样式可以按照一定的优先级和规则进行组合和覆盖，从而实现对元素的样式控制。
层叠性的影响因素：
-
选择器的特殊性（Specificity）：选择器的特殊性决定了样式规则的优先级。特殊性是根据选择器的类型、类别和ID等属性进行计算的。具有更高特殊性的选择器会覆盖具有较低特殊性的选择器。
-
样式规则的顺序：如果存在多个具有相同特殊性的样式规则，后面定义的规则会覆盖先前定义的规则。
-
!important 修饰符：使用
!important修饰符可以将样式规则标记为具有最高优先级，它会覆盖其他所有规则。 -
继承性：某些样式属性具有继承性，即子元素会继承父元素的样式。但是，如果子元素自身定义了相同属性的样式规则，则会覆盖继承的样式。
假设我们有一个HTML文档，其中包含一个段落元素
，我们想为其设置样式。我们有两个样式规则：
p {
color: red;
}
p {
color: blue;
}
根据CSS层叠性的规则，后面定义的规则会覆盖先前定义的规则。因此，最终应用的样式将是 蓝色 \color{blue}{蓝色} 蓝色。这是因为第二个样式规则覆盖了第一个样式规则。
另一个例子是特殊性的影响。假设我们有以下样式规则：
p {
color: red;
}
#special-paragraph {
color: blue;
}
在这种情况下，我们有一个具有ID选择器的样式规则，它的特殊性更高。因此，带有ID special-paragraph 的段落元素将应用蓝色样式，而其他段落元素将应用红色样式。
最后，我们来看一下!important修饰符的影响。假设我们有以下样式规则：
p {
color: red !important;
}
p {
color: blue;
}
由于第一个样式规则使用了!important修饰符，它具有最高的优先级。因此，无论后面定义了多少个样式规则，该段落元素始终会应用红色样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>层叠性</title>
<style>
/* 当有相同标签选择器的时候会体现出CSS的层叠性。并且有就近原则。*/
div {
color: red;
font-size: 20px;
}
div {
color: #000000;
}
</style>
</head>
<body>
<div>
<p>你好</p>
</div>
</body>
</html>
继承性
CSS的继承性是指某些样式属性在父元素上设置后，会自动应用到其子元素上。这意味着子元素会继承父元素的样式，而无需显式地为子元素设置相同的样式。
以下是一些常见的CSS属性具有继承性的例子：
- 字体属性：
font-family、font-size、font-weight等字体相关属性会被子元素继承。 - 文本属性：
color、text-align、text-decoration等文本相关属性会被子元素继承。 - 盒模型属性：
padding、margin、border等盒模型相关属性在某些情况下会被子元素继承。 - 部分背景属性：
background-color、background-image等背景相关属性在某些情况下会被子元素继承。 - 部分列表属性：
list-style-type、list-style-image等列表相关属性在某些情况下会被子元素继承。
需要注意的是，并非所有的CSS属性都具有继承性。例如，width、height、position等属性通常不会被子元素继承。
如果希望禁止继承，可以使用inherit关键字来显式地指定属性的值。例如，color: inherit;将使子元素继承父元素的文本颜色。
继承性可以简化样式的设置，使得在某些情况下无需为每个子元素单独设置样式。但需要注意继承性的影响范围和特定属性的继承规则，以确保样式的预期应用。
<!DOCTYPE html>
<html>
<head>
<title>CSS继承性示例</title>
<style>
body {
font-family: Arial, sans-serif;
color: blue;
}
h1 {
font-size: 24px;
}
p {
font-size: 16px;
}
</style>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
</body>
</html>
在上面的示例中，我设置了全局样式，将body元素的字体颜色设置为蓝色。然后，定义了h1和p元素的字体大小分别为24px和16px。由于CSS的继承性，h1和p元素会继承body元素的字体颜色。因此，标题和段落中的文本都会显示为蓝色。通过在父元素上设置样式，子元素可以继承这些样式，从而实现一致的外观和样式。这样可以减少重复的样式定义，并提高代码的可维护性。
盒子模型
CSS盒子模型是用于布局和定位HTML元素的基本概念。它将每个HTML元素视为一个矩形的盒子，由内容区域、内边距、边框和外边距组成。
盒子模型的组成部分如下：
- 内容区域（Content）：盒子的实际内容，例如文本、图像等。
- 内边距（Padding）：内容区域与边框之间的空白区域。可以使用padding属性来设置内边距的大小。
- 边框（Border）：内边距和外边距之间的边界线。可以使用border属性来设置边框的样式、宽度和颜色。
- 外边距（Margin）：边框与相邻元素之间的空白区域。可以使用margin属性来设置外边距的大小。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子模型</title>
<style>
div {
width: 200px;
height: 200px;
border-color: aqua;
border-style: dotted;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
盒子模型表格
当应用盒子模型到表格时，每个单元格（<td>）都可以被视为一个盒子，而整个表格则是由这些单元格组成的。
<!DOCTYPE html>
<html>
<head>
<title>盒子模型表格示例</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 10px;
border: 1px solid #000;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>城市</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td>Jane</td>
<td>30</td>
<td>London</td>
</tr>
</table>
</body>
</html>
盒子模型margin
margin属性用于设置元素的外边距，控制元素与相邻元素之间的间距。它可以接受一个或多个值，用空格分隔，分别表示上、右、下和左方向的外边距。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>margin</title>
<style>
div {
width: 100px;
height: 100px;
background-color: aqua;
margin: 50px auto;
}
</style>
</head>
<body>
<diV></diV>
<diV></diV>
</body>
</html>
盒子阴影
要为盒子添加阴影效果，可以使用CSS的box-shadow属性。box-shadow属性允许您在元素周围创建一个或多个阴影效果。
具体参数的含义如下：
- h-shadow：水平阴影的位置，可以是正值（向右偏移）或负值（向左偏移）。
- v-shadow：垂直阴影的位置，可以是正值（向下偏移）或负值（向上偏移）。
- blur：可选，模糊半径，用于创建阴影的模糊效果。
- spread：可选，阴影的尺寸扩展。
- color：阴影的颜色。
- inset：可选，指定阴影是否为内阴影（在盒子内部）。
以下是一些示例，展示了如何使用box-shadow属性来创建不同的阴影效果：
.box {
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.box {
box-shadow: 0 0 10px #000;
}
.box {
box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.2);
}
.box {
box-shadow: 0 0 10px 5px #f00 inset;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子阴影</title>
<style>
div {
margin: 30px auto;
width: 100px;
height: 100px;
background-color: yellow;
}
div:hover {
box-shadow: 10px 10px 10px 2px rgba(0, 0, 0, 0.3);
}
.box1 {
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.box2 {
box-shadow: 0 0 10px #000;
}
.box3 {
box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.2);
}
.box4 {
box-shadow: 0 0 10px 5px #f00 inset;
}
</style>
</head>
<body>
<div></div>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>
