1 选择器

• 通用选择器：匹配所有元素

*{
  }

• 标签选择器

一般选择
header{
  }
递推选择  选择header下的nav
header nav{
}

• 类选择器

.a{
  }
<div class="a"> </div>
// 选择同时包含多个类名的元素
.a.b.c {}

• ID选择器 唯一

#a{
  }
<div id="a"> </div>

• 空格后代选择器 选到所有的p后代，无视嵌套深度
• >后代选择器，仅选取直接子元素

div p {
}
<div>
    <p></p>
</div>
div > p {
}

• 多选择器

a,b,c{
}

• 类名筛选选择 *:包含abc ^:以abc开头 $:以abc结尾

[clss*="abc"] {}

• 添加剔除条件的选择器

*:not(任意选择器) {
}

• 子元素奇偶选择

#markdown-output tr:nth-child(even) {
        background-color: #f2f2f2; /* 偶数行的背景色 */
    }

    #markdown-output tr:nth-child(odd) {
        background-color: #ffffff; /* 奇数行的背景色 */
    }

2 CSS属性样式

*{ margin: 0; padding: 0;}

边框厚度为0 内部填充为0

header {
    display: flex; justify-content: space-between; align-items: center;
}

• 显示方式：弹性盒子布局；
• 主轴（水平轴）元素对齐方式：左边第一元素紧贴左边，右边第一元素紧贴右边，中间间隔均匀；
• 主轴水平：垂直居中 主轴垂直：水平居中 （示例主轴水平）由flex-direction: column决定主轴方向
  flex-direction决定主轴方向： row（默认值）
  justify-content控制主轴对齐方式
  align-items控制交叉轴对齐方式 或者align-content（多行时）

自定义属性

data-xxx

弹性盒子的空间比例

flex:1 /*占据剩余空间*/
flex:1;
flex:2;/*按1：2比例占据剩余空间*/

3 对象大小设置

一种更方便的字体设置

html { font-size: 12px;}  /*后续推荐使用rem单位*/
html {
  
}

*,
*::before,
*::after {
  box-sizing: inherit;
}
a { font-size: 1.5rem}  /*一个rem表示一个12px*/

4 一般的CSS前置模板

/* 重置样式 *号代表通用选择器 匹配所有元素 */
*{ margin: 0; padding: 0;}
html { font-size: 12px;
    box-sizing: border-box;
}  /*后续推荐使用rem单位*/
*,
*::before,
*::after {
    box-sizing: inherit;
}
/* 恢复列表项的样式 */
ol, ul {
    margin-left: 40px; /* 或其他适当的值 */
    padding-left: 20px; /* 或其他适当的值 */
}

5 全局更改标准盒模型为代替盒模型

标准盒模型：元素宽度=内容+2*内边距+2*边框宽度

代替盒模型：元素宽/高度=width/height； 其他内边距调节不影响，只要width、height不变，宽、高就不变

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

6 CSS样式优先级及继承

标签选择器 < 类选择器 < id选择器

父元素的属性可集成到子元素，但前提是子元素没有该属性
但是使用通配符会提前给所有元素设置一个对应属性，原本没有该属性的子元素提前拥有了该属性

* {
    font-family = "宋体";
}
父元素 {
  font-family = "微软雅黑";
}

则父元素的字体设置会向子元素继承失败，因为子元素由通配符提前设置了属性
解决办法是强制继承属性

父元素 {
   font-family = "宋体";
}
父元素<一个空格>* {
  font-family:inherit;
}

7 百分比单位的计算依据

在CSS中，margin、padding、width、left、right、text-indent 等属性的百分比值都是相对于其父元素的宽度来计算的。以下是一些常见的例子：

1. margin 和 padding：

   • margin-top: 10% 和 padding-top: 10% 都是基于父元素的宽度来计算，而不是高度。

2. width：

   • width: 50% 是基于父元素的宽度来计算。

3. left 和 right：

   • left: 20% 和 right: 20% 是基于父元素的宽度来计算。

4. text-indent：

   • text-indent: 10% 是基于父元素的宽度来计算。

需要注意的是，height、top、bottom 等属性的百分比值则是相对于其父元素的高度来计算的。例如：

• height: 50% 是基于父元素的高度来计算。
• top: 10% 和 bottom: 10% 也是基于父元素的高度来计算。

8 img标签的样式细节

object-fit: 'contain'  // 保持宽高比 保持原图不缩放显示 可能会在容器中留下空白区域
object-fit: cover      // 保持图片的原始宽高比 图片会填满整个容器 可能会裁剪掉图片的部分内容相当于"填满容器但可能裁剪"

9 CSS的移动坐标系 translateX translateY

经典的和父元素中心重合方法：
将父元素的position设置为：relative
子元素设置：

position：absolute
top:50%
left:50%
transform(-50%, -50%)

10 ::after ::before 伪元素

有.katex::after 和 .katex::before ，在.katex的渲染位置之前或之后插入新元素，但新元素没有类名，所以无视CSS中:not(.katex *)的约束
可以使用content变量插入

• 字符串
• 图片
• 空白
• 计数器

11 正确的deep()用法

.layout-demo :deep(.arco-layout-header)  {
  height: 64px;
  line-height: 64px;
  background: var(--color-bg-3);
}

12 在按钮:hover伪类中的颜色修改无法传递到内部SVG

原因是按钮的color颜色直接继承给了SVG，而hover无法继承
直接用后代选择器更改即可

.voice-listen-btn:hover svg{
    cursor: pointer;
    transition: all 0.3s ease;
    color: #019a32;
}

13 增加选择器的特殊性

当有多个选择器选择同一个元素时，多个选择器中特殊性最大的选择器最终决定元素的样式，其他选择器的样式都会被覆盖。
如何增加选择器的特殊性？

• 增加选择器的数量
  每增加一个类选择器（class）、属性选择器（[attr]） 或 伪类（:hover），特殊性都会提高。

/* 特殊性：10 (1个类) */
.my-class { color: red; }

/* 特殊性：20 (2个类) */
.container .my-class { color: blue; }

/* 特殊性：30 (3个类) */
body .container .my-class { color: green; }

• 使用 ID 选择器（特殊性最高）
  ID 选择器（#id） 的特殊性远高于类选择器（100 vs 10）

/* 特殊性：10 (1个类) */
.my-class { color: red; }

/* 特殊性：100 (1个ID) */
#my-id { color: blue; } /* 这个会覆盖上面的.my-class */

• 内联样式（特殊性最高，但不推荐）
  直接在 HTML 元素上写 style=""的特殊性最高（1000），但会破坏 CSS 的可维护性

<div style="color: red;">这个优先级最高</div>

• 使用 !important（慎用）
  !important 会强制覆盖其他样式，但滥用会导致维护困难。
  .my-class { color: red !important; /* 强制生效 */ }
• 组合选择器提高特殊性
  结合 类、ID、属性选择器 来增加特殊性

/* 特殊性：110 (1个ID + 1个类) */
#header .my-class { color: blue; }

/* 特殊性：111 (1个ID + 1个类 + 1个属性选择器) */
#header .my-class[data-active] { color: green; }

14 常见伪类辨析

15 网格布局

Grid 布局，即网格布局，是一种强大的 CSS 布局模型，它让你能够轻松地创建二维网格容器和项目。下面为你详细介绍 Grid 布局的使用方法：

1. 创建网格容器

要使用 Grid 布局，首先要把一个元素指定为网格容器。这可以通过设置其 display 属性为 grid 或者 inline-grid 来实现。

.grid-container {
  display: grid;
}

2. 定义网格轨道

网格轨道指的是网格的行和列。你可以使用 grid-template-columns 和 grid-template-rows 属性来定义它们。

.grid-container {
  display: grid;
  grid-template-columns: 100px 200px 100px; /* 定义三列，宽度分别为 100px、200px 和 100px */
  grid-template-rows: 50px 100px; /* 定义两行，高度分别为 50px 和 100px */
}

你还能使用 fr 单位（分数单位）来按比例分配空间。

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* 三列，中间列宽度是两边列的两倍 */
}

3. 定义网格间距

你可以使用 grid-column-gap、grid-row-gap 或者 grid-gap（在 CSS Grid Level 2 中已被 column-gap、row-gap 和 gap 替代）来设置网格项之间的间距。

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px; /* 设置行和列之间的间距为 10px */
}

4. 放置网格项

网格项是网格容器的子元素。你可以使用 grid-column 和 grid-row 属性来指定网格项在网格中的位置。

.grid-item {
  grid-column: 1 / 3; /* 从第 1 列线开始，到第 3 列线结束  也就是占据1-2列*/
  grid-row: 1 / 2; /* 从第 1 行线开始，到第 2 行线结束 */
  grid-row: 1 / span 2;  占据1-2行
}

5. 示例代码

以下是一个完整的 HTML 和 CSS 示例，展示了如何使用 Grid 布局创建一个简单的网格。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 10px;
    }

    .grid-item {
      background-color: #e0e0e0;
      padding: 20px;
      text-align: center;
    }
  </style>
</head>

<body>
  <div class="grid-container">
    <div class="grid-item">Item 1</div>
    <div class="grid-item">Item 2</div>
    <div class="grid-item">Item 3</div>
    <div class="grid-item">Item 4</div>
    <div class="grid-item">Item 5</div>
    <div class="grid-item">Item 6</div>
  </div>
</body>

</html>

在这个示例中，我们创建了一个包含三列的网格容器，并且在容器中放置了六个网格项。每个网格项都有一个灰色的背景和一些内边距。

6. 其他高级特性

• 网格区域：你可以使用 grid-template-areas 属性定义网格区域，并使用 grid-area 属性将网格项放置到这些区域中。
• 自动布局：使用 grid-auto-columns 和 grid-auto-rows 属性来定义自动生成的行和列的大小。
• 对齐和分布：使用 place-items、place-content、align-items、align-content、justify-items 和 justify-content 属性来控制网格项和内容的对齐方式。

通过以上步骤，你就可以使用 Grid 布局创建出复杂而灵活的网页布局。

7 所有块级元素和行内元素

• 块级元素
  默认占满父容器宽度
  高度由内容撑开
  可设置 width、height、padding、border、margin，且所有方向（上下左右）均生效

结构类
<div>  <header>  <footer>   
<main>  <section>  <article>
<aside> <nav>

文本容器类
<p> <h1> ~ <h6> <blockquote>
<pre>

列表类
<ul>、<ol>、<li>
<dl>、<dt>、<dd>

表格类
<table>
<tr>、<thead>、<tbody>、<tfoot>

表单类
<form>
<hr>（水平线）
<address>

• 行内元素
  默认不可设置宽度，其宽度由内容决定
  高度由内容撑开
  设置display: inline-block; /* 保留行内特性，同时支持宽高 */

文本类
<span>   <a>（超链接）
<strong>、<b>（加粗）
<em>、<i>（斜体）
<code>（代码）
<br>（换行）

表单类
<input>  <button>  <label>
<select>  <textarea>

媒体类
<img>
<svg>

其他
<sup>、<sub>（上标/下标）
<time>

8 CSS层叠上下文

9 Grid布局产生的隐藏层叠关系

我想给父元素的背景创建一个毛玻璃滤镜：

<a-layout-content class="contact-content" :style="{
    backgroundImage: backgroundImageUrl ? `url(${backgroundImageUrl})`: 'unset',
    backgroundSize: 'cover',
    backgroundAttachment: 'fixed',  // 固定背景图片
    backgroundPosition: 'center',   // 确保居中定位
    overflow: 'hidden',
    position: 'relative',
    }">
    <RoleInfo></RoleInfo>
    <div class="test">
        <p class="test-content">测试内容</p>
    </div>
        <button class="test-btn">testButton</button>
</a-layout-content>

使用伪类创建毛玻璃滤镜：

.contact-content::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*filter: blur(10px);*/
    backdrop-filter: blur(100px);
    z-index: 0;
}

一般的方式先在父元素处创建层叠上下文

position: 'relative';
z-index:0;

然后给伪类设置z-index;

position:'absolute'
z-index:-1;

因为伪类的z-index -1高于父元素的背景层级，但又小于其他子元素（z-Index:auto），所以可以实现只针对父元素背景的虚化，而子元素不受影响，如下所示

<a-layout-content class="contact-content" :style="{
            backgroundImage: backgroundImageUrl ? `url(${backgroundImageUrl})`: 'unset',
            backgroundSize: 'cover',
            backgroundAttachment: 'fixed',  // 固定背景图片
            backgroundPosition: 'center',   // 确保居中定位
            overflow: 'hidden',
            position: 'relative'
        }">

其他不变，伪类就会失去虚化效果

如果把伪类改为z-index:0，伪类就会虚化几乎所有子元素：

• Grid的特殊情况
  在删除父元素z-index的情况下，设置滤镜z-index:0,其他子元素设置为：

.contact-content  * {
    position: relative;
    z-index: 1;
}

也能实现只虚化背景

.contact-content  * {
    z-index: 1;
}

虚化效果为：

Grid子元素只有背景被虚化，说明z-index属性在Grid布局的元素中生效了，而且只有背景被虚化
但其他block元素没有设置position属性，又不是grid布局，所以z-index无效，仍是z-index: auto，在DOM中，处于滤镜下方，就被虚化了

将block元素的改为grid布局后，其他不变

应用场景：当背景虚化影响子元素阅读时，可以把子元素改为grid布局，同增加一个纯色背景，滤镜会把子元素的纯色背景和父元素的背景一起虚化，美观的同时，子元素的纯色虚化背景还能增强其阅读性。

10 父block div控制子元素居中

父元素设置为display: block时，可以通过text-align属性控制其行内级子元素的水平对齐方式
但text-align 只能直接影响父元素内的行内级子元素（如inline, inline-block, inline-flex, 文字等）。
如果子元素是block或float布局，text-align 无效

• 控制单行文本垂直居中 父元素block

.element {
  height: 40px;      /* 容器高度 */
  line-height: 40px; /* 行高 = 容器高度 */
}