以上是一些常见的 HTML 标签及其在 CSS 中的应用方式。通过选择器和样式规则，可以对 HTML 中的各种标签进行样式化，从而实现网页的美化和布局。

（2）组合选择器

• 组合选择器是 CSS 中一种强大的选择器，它允许你选择同时满足多个条件的元素，从而更精确地定位目标元素。常见的组合选择器有以下几种：

1. 后代选择器（Descendant Selector）：

后代选择器使用空格分隔不同元素，表示选取某个元素的后代元素。例如：

div p {
  /* 选择 <div> 元素内部的所有 <p> 元素 */
  color: blue;
}

2. 子代选择器（Child Selector）：

子代选择器使用 > 符号，表示选取某个元素的直接子元素。例如：

ul > li {
  /* 选择 <ul> 元素下直接的 <li> 元素 */
  list-style-type: square;
}

3. 相邻兄弟选择器（Adjacent Sibling Selector）：

相邻兄弟选择器使用 + 符号，表示选取紧接在另一个元素后的同级元素。例如：

h2 + p {
  /* 选择紧接在 <h2> 元素后的同级 <p> 元素 */
  font-weight: bold;
}

4. 通用兄弟选择器（General Sibling Selector）：

通用兄弟选择器使用 ~ 符号，表示选取与指定元素同级的所有元素。例如：

h2 ~ p {
  /* 选择 <h2> 元素后所有同级的 <p> 元素 */
  color: green;
}

这些组合选择器可以根据元素之间的关系、位置等条件来选择目标元素，使得 CSS 的选择更加灵活和精确。

（3）属性选择器

• 属性选择器是 CSS 中一种用于选择具有特定属性的元素的选择器。它允许你根据元素的属性值来选择目标元素，从而更精确地应用样式。常见的属性选择器有以下几种：

1. 存在选择器（Existence Selector）：

存在选择器使用方括号（[]）表示，选择具有指定属性的元素。例如：

input[type] {
  /* 选择所有具有 type 属性的 <input> 元素 */
  border: 1px solid #ccc;
}

2. 等值选择器（Equality Selector）：

等值选择器使用方括号和等号（[attr=value]）表示，选择具有指定属性值的元素。例如：

a[href="https://www.baidu.com"] {
  /* 选择 href 属性值为 https://www.baidu.com 的所有 <a> 元素 */
  color: blue;
}

3. 包含选择器（Containment Selector）：

包含选择器使用方括号和星号（[attr*=value]）表示，选择属性值包含指定字符串的元素。例如：

img[alt*="logo"] {
  /* 选择 alt 属性值中包含 "logo" 的所有 <img> 元素 */
  width: 100px;
}

4. 起始选择器（Beginning Selector）：

起始选择器使用方括号和插入符号（[attr^=value]）表示，选择属性值以指定字符串开头的元素。例如：

a[href^="https://"] {
  /* 选择 href 属性值以 "https://" 开头的所有 <a> 元素 */
  text-decoration: none;
}

5. 结尾选择器（Ending Selector）：

结尾选择器使用方括号和美元符号（[attr$=value]）表示，选择属性值以指定字符串结尾的元素。例如：

a[href$=".pdf"] {
  /* 选择 href 属性值以 ".pdf" 结尾的所有 <a> 元素 */
  font-weight: bold;
}

6. 精确值选择器（Exact Value Selector）：

精确值选择器使用方括号和等号（[attr=value]）表示，选择属性值与指定字符串完全相同的元素。例如：

input[type="checkbox"] {
  /* 选择 type 属性值为 "checkbox" 的所有 <input> 元素 */
  margin-right: 5px;
}

这些属性选择器可以根据元素的属性及其值来选择目标元素，使得 CSS 的选择更加灵活和精确。

分组与嵌套

（1）介绍

分组（Grouping）和嵌套（Nesting）是 CSS 中用于组织样式规则的两种常见技术，它们可以帮助你更有效地管理和组织样式表。

1. 分组：

分组允许你将多个选择器组合在一起，并为它们应用相同的样式规则。这样可以减少重复的样式代码，提高代码的可维护性。分组时，选择器之间用逗号分隔。例如：

h1, h2, h3 {
  color: blue;
  font-family: Arial, sans-serif;
}

上面的样式规则将同时应用于 <h1>、<h2> 和 <h3> 元素，它们的文本颜色都会被设置为蓝色，并且使用 Arial 或 sans-serif 字体。

2. 嵌套：

嵌套允许你在一个选择器中嵌套另一个选择器，这样可以更清晰地表示 HTML 结构中的层级关系，减少选择器的复杂度。例如：

.container {
  width: 100%;
  padding: 20px;
  background-color: #f0f0f0;
}

.container p {
  font-size: 16px;
  color: #333;
}

上面的样式规则中，.container p 表示选择 .container 元素内部的所有 <p> 元素，并为它们设置字体大小为 16 像素，颜色为 #333。通过嵌套，可以更清晰地表达出段落是容器内部的一部分。

分组和嵌套可以结合使用，以便更有效地管理样式表。但要注意不要过度使用嵌套，以免造成样式表过于复杂和难以维护。

盒子模型

（1）介绍

• 盒子模型描述了在网页布局中每个HTML元素所占据的空间。这个模型将每个元素表示为一个矩形盒子，包含了内容(content)、内边距(padding)、边框(border)和外边距(margin)四个部分。

1. 内容(Content)：指的是元素包含的实际内容，比如文本、图片等。内容的大小由元素的宽度(width)和高度(height)属性来确定。
2. 内边距(Padding)：内边距是内容与边框之间的空间，可以用来控制元素内部内容与边框之间的距离。内边距的大小可以通过CSS的padding属性进行设置。
3. 边框(Border)：边框是围绕在内容和内边距外部的线条，用来界定元素的边界。边框的大小、样式和颜色可以通过CSS的border属性进行设置。
4. 外边距(Margin)：外边距是元素与其他元素之间的空间，用来控制元素与其周围元素之间的距离。外边距的大小可以通过CSS的margin属性进行设置。

• body默认自带8px外边距margin，可以重置

    <style>
        body {
            margin: 0;
        }
    </style>

（2）Margin

在CSS中，margin属性用于设置元素的外边距，即控制元素与其周围元素之间的空白区域。margin属性可以接受一个值、两个值、三个值或四个值，每个值代表元素的上、右、下、左四个方向的外边距大小。

• 如果提供一个值，那么该值将应用于四个方向的外边距；
• 如果提供两个值，第一个值将应用于上下外边距，第二个值将应用于左右外边距；
• 如果提供三个值，第一个值将应用于上外边距，第二个值将应用于左右外边距，第三个值将应用于下外边距；
• 如果提供四个值，分别对应上、右、下、左四个方向的外边距。

/* 一个值 */
margin: 10px;

/* 两个值 */
margin: 10px 20px;

/* 三个值 */
margin: 10px 20px 15px;

/* 四个值 */
margin: 10px 20px 15px 5px;

此外，margin属性还可以使用以下取值：

• auto：浏览器根据上下文自动计算外边距值，通常用于水平居中元素。
• inherit：继承父元素的外边距值。

/* 水平居中 */
margin: 0 auto;

/* 继承父元素的外边距 */
margin: inherit;

margin属性也可以单独应用于每个方向的外边距，例如：

/* 分别设置上下左右外边距 */
margin-top: 10px;
margin-right: 20px;
margin-bottom: 15px;
margin-left: 5px;

margin属性的合理使用可以实现各种布局效果，比如控制元素之间的间距、居中对齐等。

（3）Border

• 在CSS中，border属性用于设置元素的边框样式、宽度和颜色。border属性可以分别设置边框的样式、宽度和颜色，也可以使用缩写形式一次性设置这三个属性。

• 分别设置边框的样式、宽度和颜色：

border-style: solid; /* 边框样式：solid, dashed, dotted, double, none 等 */
border-width: 1px;   /* 边框宽度，可以使用像素(px)、em、rem等单位 */
border-color: #000; /* 边框颜色，可以使用十六进制、RGB、颜色名称等 */

• 缩写形式设置边框：

border: 1px solid #000; /* 宽度 样式 颜色 */

• 可以在上面的缩写形式中选择性地指定样式、宽度和颜色，比如：

border: solid #000; /* 只设置样式和颜色 */
border: 1px solid;   /* 只设置宽度和样式 */
border: 2px dotted #f00; /* 设置宽度、样式和颜色 */

• 使用单独的属性设置边框的每一边：

border-top: 1px solid #000;
border-right: 2px dashed #f00;
border-bottom: 3px dotted #00f;
border-left: 4px double #0f0;

• 这些属性可以应用于任何HTML元素，用来定义元素的边框样式、宽度和颜色。通过合理设置边框，可以美化元素的外观，增强网页的视觉效果。

（4）Padding

• 在CSS中，padding属性用于设置元素的内边距，即元素内容与边框之间的空间。padding属性可以分别设置元素的上、右、下、左四个方向的内边距，也可以使用缩写形式一次性设置所有方向的内边距。

• 分别设置内边距：

padding-top: 10px;    /* 上内边距 */
padding-right: 20px;  /* 右内边距 */
padding-bottom: 15px; /* 下内边距 */
padding-left: 5px;    /* 左内边距 */

• 缩写形式设置内边距：

padding: 10px 20px 15px 5px; /* 上 右 下 左 */

• 这里的四个值分别代表了上、右、下、左四个方向的内边距大小。可以通过调整这些值来控制元素内部内容与边框之间的间距。

• 设置统一的内边距：如果希望所有方向的内边距都一样，可以使用单个值来设置，这个值将被用于上、右、下、左四个方向的内边距：

padding: 10px; /* 统一的内边距 */

• 使用百分比设置内边距：内边距也可以使用百分比来指定，相对于父元素的宽度计算：

padding: 5% 10%; /* 上下内边距为父元素宽度的5%，左右内边距为父元素宽度的10% */

• 通过合理设置内边距，可以控制元素内部内容的布局和排列，使得网页的结构更加美观和易读。

浮动

（1）介绍

CSS中的浮动（float）是一种布局技术，它允许元素沿着其父容器的左侧或右侧浮动，使得其他元素能够环绕在它周围。浮动通常用于实现多栏布局、图文混排等效果。以下是关于CSS浮动的一些重要概念和用法：

1. 浮动的属性值：

   • float: left;：使元素向左浮动。
   • float: right;：使元素向右浮动。
   • float: none;：取消元素的浮动状态，使其恢复正常文档流中的位置。

2. 浮动的特性：

   • 浮动的元素会尽可能地靠近包含它们的父容器的边缘，直到碰到另一个浮动的元素或父容器的边缘。
   • 浮动元素会脱离正常的文档流，不再占据父容器的空间，因此会导致父容器塌陷（高度塌陷）。
   • 浮动的元素会影响其他元素的布局，特别是在没有清除浮动的情况下。

3. 清除浮动：

   为了避免浮动元素对其他元素造成的影响，通常需要在父容器的尾部添加一个清除浮动的元素，或者使用clear属性清除浮动效果。

   .clearfix::after {
       content: "";
       display: table;
       clear: both;
   }
   

4. 多栏布局：

   使用浮动可以很容易地实现多栏布局。将内容区块设置为浮动，使得多个内容区块并排显示。

5. 注意事项：

   • 浮动元素可能会导致父容器的高度塌陷，需要合适地清除浮动以保证布局的正确性。
   • 使用浮动布局时，应该考虑响应式设计，以适应不同尺寸的屏幕和设备。

溢出属性

（1）介绍

CSS中的overflow属性用于控制元素内容溢出时的处理方式。当元素的内容超出了其指定的尺寸时，就会发生溢出。overflow属性可以指定四种值：

1. visible：默认值，内容会溢出元素框之外，显示在其周围。

   overflow: visible;
   

2. hidden：内容会被裁剪，超出元素框的部分将被隐藏，不显示在视图中。

   overflow: hidden;
   

3. scroll：如果内容溢出，元素会显示滚动条，用户可以滚动以查看溢出的内容。

   overflow: scroll;
   

4. auto：浏览器会自动添加滚动条，只有在内容溢出时才会显示滚动条。

   overflow: auto;
   

这些值可以分别应用于水平溢出和垂直溢出，例如overflow-x: auto;和overflow-y: scroll;。

overflow属性常用于容器元素，例如<div>，用来控制其内部内容溢出时的表现方式。这可以用于创建可滚动的区域或者隐藏溢出的内容。

定位

（1）介绍

• 在CSS中，定位（Positioning）是一种布局技术，用于控制元素在网页中的精确位置。常用的定位属性包括position、top、right、bottom和left。

1. position 属性：

• static：默认值，元素遵循正常文档流，不会被特殊定位。
• relative：相对定位，元素相对于其正常位置进行定位，但不会脱离文档流。
• absolute：绝对定位，元素相对于其最近的已定位祖先元素进行定位，如果没有已定位的祖先元素，则相对于最初的包含块进行定位。
• fixed：固定定位，元素相对于浏览器窗口进行定位，即使页面滚动，元素也不会移动。
• sticky：粘性定位，元素根据用户滚动的位置进行定位，当元素到达特定位置时，将会固定在那里。

2. top、right、bottom、left 属性：

• 这些属性用于设置元素相对于其包含块（通常是其父元素）的位置。它们与position属性配合使用，用来指定元素的偏移量。

• 示例：

/* 绝对定位 */
.absolute-position {
    position: absolute;
    top: 50px;
    left: 100px;
}

/* 固定定位 */
.fixed-position {
    position: fixed;
    top: 0;
    right: 0;
}

/* 粘性定位 */
.sticky-position {
    position: sticky;
    top: 10px;
}

/* 相对定位 */
.relative-position {
    position: relative;
    top: 20px;
    left: 20px;
}

定位属性常用于创建特定的布局效果，如浮动菜单、固定的导航栏等。然而，需要小心使用，因为过度的绝对定位可能会导致布局混乱和响应性问题。

模态框

（1）介绍

模态框（Modal）是一种常见的用户界面元素，用于在当前页面上以弹出窗口的形式显示额外的内容或功能。模态框通常用于提示信息、表单输入、确认操作等场景。它的特点包括：

1. 弹出性：模态框以覆盖原页面的形式出现，突显其重要性，用户需要与模态框交互完成相关操作后，才能继续操作原页面。

2. 阻塞性：模态框阻止用户与页面上其他元素进行交互，焦点通常被锁定在模态框上，直到用户关闭模态框或执行必要的操作。

3. 交互性：模态框通常包含了交互元素，如按钮、表单等，用户通过与这些元素交互来完成相关操作。

在实现模态框时，可以使用HTML、CSS和JavaScript来创建。以下是一个简单的模态框的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modal Example</title>
    <style>
        /* 模态框样式 */
        .modal {
            display: none; /* 默认隐藏 */
            position: fixed; /* 固定在屏幕上 */
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
            z-index: 9999; /* 层级 */
        }
        .modal-content {
            background-color: #fff;
            width: 300px;
            margin: 100px auto; /* 垂直居中 */
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        }
    </style>
</head>
<body>

<button onclick="openModal()">Open Modal</button>

<!-- 模态框 -->
<div id="myModal" class="modal">
  <div class="modal-content">
    <span onclick="closeModal()" style="float:right;cursor:pointer;">&times;</span>
    <p>This is a modal.</p>
    <button onclick="closeModal()">Close</button>
  </div>
</div>

<script>
// 打开模态框
function openModal() {
  document.getElementById("myModal").style.display = "block";
}

// 关闭模态框
function closeModal() {
  document.getElementById("myModal").style.display = "none";
}
</script>

</body>
</html>

这是一个简单的模态框示例，点击按钮会打开模态框，模态框中包含一些内容和一个关闭按钮，点击关闭按钮或模态框背景可以关闭模态框。实际使用中，模态框还可以包含更多的交互元素和样式，以满足具体的需求。

透明度

（1）介绍

• 透明度（Opacity）是指元素的不透明程度，用于控制元素的可见性。在CSS中，可以使用opacity属性来设置元素的透明度，取值范围从0到1，其中0表示完全透明，1表示完全不透明。

.element {
    opacity: 0.5; /* 50% 透明度 */
}

• 透明度的设置会影响元素以及其内容的可见性，不仅仅是背景颜色或背景图像。需要注意的是，设置了透明度后，元素以及其内容的所有部分（包括文本、图片等）都会受到影响。

• 另外，还可以使用rgba颜色值来控制元素的透明度，这种方法可以针对元素的背景颜色、边框颜色等进行透明度设置，而不影响元素内部的内容。

.element {
    background-color: rgba(255, 0, 0, 0.5); /* 50% 透明的红色背景 */
}

• 这样设置的话，只有背景色是半透明的，元素内部的内容不会受到影响。