CSS -层叠性、继承性、盒子模型、盒子模型表格、盒子模型margin、盒子阴影

最新推荐文章于 2024-05-03 15:15:35 发布

Miaow.Y.Hu

最新推荐文章于 2024-05-03 15:15:35 发布

阅读量1.5k

点赞数 30

分类专栏： # CSS 文章标签： css 前端 css3

本文链接：https://blog.csdn.net/qq_45922256/article/details/137520508

版权

CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

层叠性

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>

在这里插入图片描述

Miaow.Y.Hu

关注

30
点赞
踩
27

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS -层叠性、继承性、盒子模型、盒子模型表格、盒子模型margin、盒子阴影

CSS层叠性（Cascading）是指在网页中应用多个样式规则时，根据一定的规则来确定最终应用的样式。层叠性使得样式可以按照一定的优先级和规则进行组合和覆盖，从而实现对元素的样式控制。
复制链接

扫一扫