跳到主要内容

HTML/CSS 知识速查表

本页面汇总了 HTML 和 CSS 编程中最常用的语法和知识点，方便快速查阅。

HTML 基础​

文档结构​

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面标题</title>
</head>
<body>
    <!-- 内容 -->
</body>
</html>

常用标签​

标签说明
<html>根元素
<head>头部信息
<body>主体内容
<h1> - <h6>标题
<p>段落
<a href="">链接
<img src="" alt="">图片
<ul> / <ol> / <li>列表
<div>块级容器
<span>行内容器
<br>换行
<hr>水平线

表格标签​

<table>
    <caption>标题</caption>
    <thead>
        <tr><th>表头1</th><th>表头2</th></tr>
    </thead>
    <tbody>
        <tr><td>数据1</td><td>数据2</td></tr>
    </tbody>
    <tfoot>
        <tr><td>脚注</td><td></td></tr>
    </tfoot>
</table>

表单元素​

<form action="" method="POST">
    <input type="text" name="username">
    <input type="password" name="password">
    <input type="email" name="email">
    <input type="number" name="age">
    <input type="checkbox" name="agree">
    <input type="checkbox" name="darkmode" switch>  <!-- 开关样式 -->
    <input type="radio" name="gender" value="male">
    <input type="radio" name="gender" value="female">
    <select name="country">
        <option value="cn">中国</option>
        <option value="us">美国</option>
    </select>
    <textarea name="message"></textarea>
    <button type="submit">提交</button>
    <button type="reset">重置</button>
    <button type="button" popovertarget="menu">打开菜单</button>  <!-- Popover控制 -->
</form>

input type 类型​

type说明
text文本输入
password密码输入
email邮箱输入
number数字输入
tel电话输入
urlURL输入
search搜索框
date日期选择
time时间选择
datetime-local日期时间选择
month月份选择
week周选择
color颜色选择
range范围滑块
file文件上传
hidden隐藏字段

现代表单属性​

<!-- inputmode: 移动端虚拟键盘提示 -->
<input type="text" inputmode="numeric" placeholder="验证码">
<input type="text" inputmode="email" placeholder="邮箱">
<input type="text" inputmode="tel" placeholder="电话">

<!-- switch: 复选框开关样式 -->
<input type="checkbox" switch>

<!-- popovertarget: 控制弹出框 -->
<button popovertarget="menu">打开菜单</button>
<div popover id="menu">菜单内容</div>

<!-- dirname: 提交文本方向 -->
<input type="text" name="comment" dirname="comment-dir">

<!-- form: 表单外部元素关联 -->
<input type="text" name="extra" form="myForm">

全局属性​

属性说明
id唯一标识
class样式类名
style内联样式
title提示文本
data-*自定义数据
lang语言代码
dir文本方向

语义化标签​

标签说明
<header>页面头部
<nav>导航区域
<main>主内容区
<article>文章内容
<section>章节区块
<aside>侧边栏
<footer>页面底部
<figure>插图区域
<figcaption>插图标题

多媒体​

<!-- 图片 -->
<img src="image.jpg" alt="描述" width="500" height="300">

<!-- 音频 -->
<audio controls>
    <source src="music.mp3" type="audio/mpeg">
</audio>

<!-- 视频 -->
<video controls width="640" height="480">
    <source src="video.mp4" type="video/mp4">
</video>

<!-- 嵌入网页 -->
<iframe src="https://example.com" width="500" height="400"></iframe>

CSS 基础​

引入方式​

/* 外部样式表 */
<link rel="stylesheet" href="styles.css">

/* 内部样式表 */
<style>
    body { background: #fff; }
</style>

/* 内联样式 */
<div style="color: red;"></div>

选择器​

/* 元素选择器 */
p { color: blue; }

/* 类选择器 */
.highlight { background: yellow; }

/* ID选择器 */
#header { height: 60px; }

/* 后代选择器 */
article p { line-height: 1.6; }

/* 子选择器 */
ul > li { list-style: none; }

/* 相邻兄弟 */
h1 + p { font-size: 18px; }

/* 伪类 */
a:hover { color: red; }
li:first-child { font-weight: bold; }

/* 伪元素 */
p::before { content: "»"; }
p::after { content: "«"; }

/* 属性选择器 */
input[type="text"] { border: 1px solid #ccc; }

/* 现代伪类选择器 */
:is(h1, h2, h3) { margin: 1rem 0; }  /* 匹配任意 */
:where(h1, h2, h3) { color: #333; }  /* 优先级为0 */
a:has(img) { display: block; }       /* 父选择器 */
button:focus-visible { outline: 2px solid blue; }  /* 键盘焦点 */
.form:has(input:focus) { border-color: blue; }     /* 包含焦点 */
input:placeholder-shown { opacity: 0.5; }           /* 显示占位符 */
my-element:state(checked) { border-color: blue; }  /* 自定义元素状态 */

/* 现代伪元素选择器 */
::target-text { background: yellow; }  /* 文本片段高亮 */

/* 选择器优先级（ID-CLASS-TYPE） */
#header { }           /* 1-0-0 */
.nav .item { }        /* 0-2-0 */
ul li a { }           /* 0-0-3 */
:where(#id) { }       /* 0-0-0（优先级为0） */

常用属性​

/* 文本 */
color: #333;                    /* 文字颜色 */
font-size: 16px;               /* 字号 */
font-family: Arial, sans-serif; /* 字体 */
font-weight: bold;             /* 字重 */
line-height: 1.6;              /* 行高 */
text-align: center;           /* 对齐 */
text-decoration: underline;   /* 装饰线 */
letter-spacing: 2px;          /* 字间距 */

/* 背景 */
background-color: #f5f5f5;
background-image: url(bg.jpg);
background-size: cover;
background-position: center;

/* 边框 */
border: 1px solid #333;
border-radius: 5px;
border-width: 2px;
border-style: solid;
border-color: red;

/* 尺寸 */
width: 100%;
height: 200px;
max-width: 1200px;
min-height: 100px;

/* 外边距 */
margin: 10px;
margin: 10px 20px;
margin-top: 10px;
margin: auto;

/* 内边距 */
padding: 15px;
padding: 10px 20px;
padding-left: 20px;

/* 显示 */
display: block;
display: inline;
display: inline-block;
display: flex;
display: grid;
display: none;
display: contents;

/* 定位 */
position: static;
position: relative;
position: absolute;
position: fixed;
position: sticky;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 100;

/* 浮动 */
float: left;
float: right;
clear: both;

/* 溢出 */
overflow: hidden;
overflow: auto;
overflow: scroll;

/* 透明度 */
opacity: 0.5;

/* 鼠标样式 */
cursor: pointer;
cursor: not-allowed;

盒模型​

/* 标准盒模型 */
box-sizing: content-box;  /* 默认 */

div {
    width: 200px;
    padding: 20px;
    border: 5px solid black;
    margin: 10px;
    /* 总宽度 = 200 + 20*2 + 5*2 + 10*2 = 270px */
}

/* IE盒模型 */
box-sizing: border-box;  /* 推荐 */

div {
    width: 200px;
    padding: 20px;
    border: 5px solid black;
    margin: 10px;
    /* 内容区域自动缩小，总宽度 = 200px */
}

Flexbox 布局​

.container {
    display: flex;
    flex-direction: row;           /* 主轴方向 */
    flex-wrap: wrap;              /* 换行 */
    justify-content: center;       /* 主轴对齐 */
    align-items: center;          /* 交叉轴对齐 */
    align-content: space-between; /* 多行对齐 */
    gap: 20px;                    /* 间距 */
}

.item {
    flex-grow: 1;     /* 放大比例 */
    flex-shrink: 0;    /* 缩小比例 */
    flex-basis: 200px; /* 初始大小 */
    flex: 1;          /* 简写 */
    align-self: center; /* 单项对齐 */
}

/* flex-direction 值 */
row | row-reverse | column | column-reverse

/* justify-content 值 */
flex-start | flex-end | center | space-between | space-around | space-evenly

/* align-items 值 */
stretch | flex-start | flex-end | center | baseline

Grid 布局​

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);  /* 列 */
    grid-template-rows: 100px 200px;       /* 行 */
    gap: 20px;                             /* 间距 */
    grid-template-areas:                    /* 命名区域 */
        "header header header"
        "sidebar main main"
        "footer footer footer";
}

.item {
    grid-column: 1 / 3;      /* 列位置 */
    grid-row: 1;             /* 行位置 */
    grid-area: header;        /* 命名区域 */
    justify-self: center;     /* 水平对齐 */
    align-self: start;        /* 垂直对齐 */
}

/* fr 单位 - 比例份数 */
grid-template-columns: 1fr 2fr 1fr;

/* auto-fill/auto-fit - 自动填充 */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

锚点定位 Anchor Positioning​

/* 定义锚点元素 */
.anchor-element {
    anchor-name: --my-anchor;
}

/* 定位元素绑定到锚点 */
.positioned-element {
    position: fixed;
    position-anchor: --my-anchor;
    
    /* 使用 anchor() 函数定位 */
    top: anchor(bottom);        /* 定位在锚点下方 */
    left: anchor(center);       /* 水平居中于锚点 */
    
    /* 或使用 position-area */
    position-area: bottom;      /* 简单定位 */
    position-area: top right;   /* 锚点右上角 */
}

/* 尺寸跟随锚点 */
.dropdown {
    width: anchor-size(width);  /* 宽度等于锚点宽度 */
}

/* 居中对齐 */
.tooltip {
    top: anchor(bottom);
    justify-self: anchor-center;  /* 水平居中于锚点 */
}

/* 回退定位 */
.tooltip {
    position-area: bottom;
    position-try-fallbacks: flip-block;  /* 空间不足时翻转到上方 */
}

/* 锚点作用域 */
.card {
    anchor-scope: --card-anchor;  /* 限制锚点名称只在本容器内有效 */
}

响应式​

/* 媒体查询 */
@media screen and (max-width: 768px) {
    .container { flex-direction: column; }
}

@media (min-width: 1024px) {
    .container { max-width: 1200px; }
}

/* 移动优先 */
.mobile-first {
    font-size: 14px;
}
@media (min-width: 768px) {
    .mobile-first { font-size: 16px; }
}
@media (min-width: 1024px) {
    .mobile-first { font-size: 18px; }
}

常用颜色值​

格式示例
十六进制#FF5733 / #F53
RGBrgb(255, 87, 51)
RGBArgba(255, 87, 51, 0.5)
HSLhsl(11, 100%, 60%)
颜色名red, blue, white
oklaboklab(0.7 0.1 0.1)
oklchoklch(70% 0.2 150)
color-mixcolor-mix(in srgb, red 30%, blue)
light-darklight-dark(#333, #ccc)
/* 现代颜色函数 */

/* oklab/oklch - 更符合人眼感知的颜色空间 */
.accent {
    color: oklab(0.7 0.1 0.1);
    background: oklch(70% 0.2 150);
}

/* color-mix - 混合颜色 */
.mixed {
    background: color-mix(in srgb, red 30%, blue);
}

/* light-dark - 自动主题适配 */
:root {
    color-scheme: light dark;
}
.text {
    color: light-dark(#333, #ccc);  /* 浅色模式用 #333，深色模式用 #ccc */
}

常用单位​

单位说明
px像素，绝对单位
%百分比，相对单位
em当前字体大小倍数
rem根元素字体大小倍数
vw/vh视口宽/高的1%
vmin/vmax视口最小/大值
ch/ex字符/字x高度

CSS 变量​

:root {
    --primary-color: #3498db;
    --font-size-base: 16px;
    --spacing: 10px;
}

.button {
    background-color: var(--primary-color);
    font-size: var(--font-size-base);
    padding: var(--spacing);
}

CSS 嵌套​

/* 原生嵌套语法 */
.card {
    background: white;
    
    .title {
        font-size: 20px;
    }
    
    &:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
    
    &.featured {
        border: 2px solid #3498db;
    }
    
    @media (min-width: 768px) {
        padding: 24px;
    }
}

/* 注意事项 */
/* 1. 复合选择器必须使用 & */
.notice.warning { }     /* 错误：会变成后代选择器 */
.notice { &.warning }   /* 正确：生成 .notice.warning */

/* 2. 不能拼接字符串（不像 Sass） */
/* .card { &__title } */  /* 不支持 */

/* 3. & 可追加在末尾（反转上下文） */
h2 {
    .featured & {  /* 等价于 .featured h2 */
        color: red;
    }
}

@layer 层叠层​

/* 声明层顺序 */
@layer base, components, utilities;

/* 定义层内容 */
@layer base {
    h1 { font-size: 2rem; }
}

@layer components {
    .button { padding: 10px 20px; }
}

/* 导入外部样式到层 */
@import "normalize.css" layer(base);

/* 嵌套层 */
@layer framework {
    @layer base, theme;
}
@layer framework.theme {
    .button { background: #3498db; }
}

/* 优先级规则：
   正常样式：先声明层 < 后声明层 < 未分层
   !important：未分层 < 后声明层 < 先声明层
*/

/* 实际应用：组织项目样式 */
@layer reset, base, layout, components, utilities, overrides;

现代 CSS 特性​

/* clamp() - 响应式值 */
font-size: clamp(1rem, 2.5vw, 2rem);
width: clamp(300px, 80%, 1200px);

/* min() / max() */
width: min(50%, 400px);
padding: max(1rem, 5vw);

/* aspect-ratio - 宽高比 */
.video { aspect-ratio: 16 / 9; }
.avatar { aspect-ratio: 1; }

/* gap - 间距 */
.container { display: flex; gap: 20px; }
.grid { display: grid; gap: 20px 10px; }

/* 容器查询 */
.card-container {
    container: card / inline-size;
}
@container (min-width: 400px) {
    .card { display: grid; }
}

/* 滚动捕捉 */
.slider {
    scroll-snap-type: x mandatory;
    overflow-x: auto;
}
.slide { scroll-snap-align: start; }

/* 逻辑属性 */
margin-inline: auto;      /* 水平居中 */
padding-block: 20px;      /* 垂直内边距 */
border-inline-start: 1px; /* 行首边框 */

/* text-wrap 文本换行优化 */
h1, h2, h3 { text-wrap: balance; }  /* 标题平衡换行 */
article p { text-wrap: pretty; }    /* 正文优化排版 */

/* view-transition-name 视图过渡 */
.card { view-transition-name: card-item; }
::view-transition-old(card-item) { animation: fade-out 0.3s; }
::view-transition-new(card-item) { animation: fade-in 0.3s; }

/* interpolate-size 和 calc-size() - 动画到 auto */
html { interpolate-size: allow-keywords; }

.accordion-content {
    height: 0;
    transition: height 0.3s;
}
.accordion-content.expanded {
    height: auto;  /* 启用 interpolate-size 后可动画 */
}

/* 或使用 calc-size() 函数 */
.content.expanded {
    height: calc-size(auto, size);
    height: calc-size(auto, size + 20px);  /* 带额外间距 */
}

过渡​

/* 简写语法 */
transition: property duration timing-function delay behavior;

/* 子属性 */
transition-property: all;           /* 过渡的属性 */
transition-duration: 0.3s;          /* 过渡时长 */
transition-timing-function: ease;   /* 时间函数 */
transition-delay: 0s;               /* 延迟时间 */
transition-behavior: normal;        /* 离散属性过渡行为 */

/* 时间函数 */
transition-timing-function: ease;           /* 慢-快-慢 */
transition-timing-function: linear;         /* 匀速 */
transition-timing-function: ease-in;        /* 慢开始 */
transition-timing-function: ease-out;       /* 慢结束 */
transition-timing-function: ease-in-out;    /* 慢开始和结束 */
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);  /* 自定义贝塞尔曲线 */
transition-timing-function: steps(4, end);  /* 步进函数 */

/* 示例 */
.button {
    transition: background-color 0.3s ease, transform 0.2s ease;
}
.button:hover {
    background-color: #2980b9;
    transform: translateY(-2px);
}

离散属性过渡​

/* transition-behavior: 允许离散属性过渡 */
transition-behavior: normal;         /* 默认：不过渡 */
transition-behavior: allow-discrete; /* 允许过渡 display、overlay 等 */

/* 简写形式 */
.modal {
    transition: opacity 0.3s, display 0.3s allow-discrete;
}

/* @starting-style: 定义元素首次显示时的起始样式 */
@starting-style {
    .modal.show {
        opacity: 0;
        transform: scale(0.9);
    }
}

/* 嵌套写法 */
.modal.show {
    opacity: 1;
    
    @starting-style {
        opacity: 0;
    }
}

Popover/Dialog 动画​

/* Popover 完整动画示例 */
[popover] {
    opacity: 0;
    transform: scale(0.9);
    transition: 
        opacity 0.3s,
        transform 0.3s,
        display 0.3s allow-discrete,
        overlay 0.3s allow-discrete;
}

[popover]:popover-open {
    opacity: 1;
    transform: scale(1);
}

@starting-style {
    [popover]:popover-open {
        opacity: 0;
        transform: scale(0.9);
    }
}

/* Dialog 模态框动画 */
dialog {
    opacity: 0;
    transform: translateY(-20px);
    transition: 
        opacity 0.3s,
        transform 0.3s,
        display 0.3s allow-discrete,
        overlay 0.3s allow-discrete;
}

dialog:modal {
    opacity: 1;
    transform: translateY(0);
}

@starting-style {
    dialog:modal {
        opacity: 0;
        transform: translateY(-20px);
    }
}

/* 背景遮罩动画 */
dialog::backdrop {
    background-color: transparent;
    transition: background-color 0.3s;
}
dialog:modal::backdrop {
    background-color: rgba(0, 0, 0, 0.5);
}

可过渡属性​

/* 高性能（推荐）：不触发布局重排 */
transform: translateX(100px);
transform: scale(1.2);
transform: rotate(45deg);
opacity: 0.5;

/* 颜色和背景 */
color, background-color, border-color, box-shadow, text-shadow

/* 尺寸和盒模型 */
width, height, margin, padding, border-width, border-radius

/* 定位 */
top, left, right, bottom

/* 文本 */
font-size, font-weight, letter-spacing, line-height

/* 离散属性（需 transition-behavior: allow-discrete） */
display, overlay, visibility

/* 不可过渡 */
position, float, font-family, background-image

动画​

/* 定义关键帧 */
@keyframes slideIn {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

/* 多关键帧 */
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-30px); }
}

/* 应用动画 */
.animated {
    animation: slideIn 0.5s ease-out;
}

滚动驱动动画​

/* 滚动进度时间线 */
.progress-bar {
    animation: scale-x linear;
    animation-timeline: scroll(root);  /* 基于页面滚动 */
}

@keyframes scale-x {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

/* 视图进度时间线 */
.fade-up {
    animation: fadeUp linear;
    animation-timeline: view();  /* 基于元素可见性 */
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(50px); }
    to { opacity: 1; transform: translateY(0); }
}

/* scroll() 函数参数 */
animation-timeline: scroll();           /* 最近滚动容器，块方向 */
animation-timeline: scroll(root);       /* 页面滚动 */
animation-timeline: scroll(inline);     /* 行内方向 */
animation-timeline: scroll(self);       /* 元素自身滚动 */

/* view() 函数参数 */
animation-timeline: view();             /* 块方向，无偏移 */
animation-timeline: view(block 20%);    /* 块方向，20%偏移 */
animation-timeline: view(inline);       /* 行内方向 */

/* animation-range 控制范围 */
animation-range: entry 0% entry 100%;   /* 进入视口时 */
animation-range: contain 0% contain 100%; /* 完全可见时 */
animation-range: exit 0% exit 100%;     /* 离开视口时 */

常用技巧​

/* 居中 */
.center {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 清除浮动 */
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

/* 文本省略 */
.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 多行文本省略 */
.multi-line-ellipsis {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 保持宽高比 */
.aspect-ratio {
    aspect-ratio: 16 / 9;
}

/* 三角形 */
.triangle {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}

CSS 重置​

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

滤镜效果​

/* filter 滤镜 */
filter: blur(5px);           /* 模糊 */
filter: brightness(1.2);     /* 亮度 */
filter: contrast(1.1);       /* 对比度 */
filter: grayscale(1);        /* 灰度 */
filter: saturate(1.5);       /* 饱和度 */
filter: hue-rotate(90deg);   /* 色相旋转 */
filter: invert(1);           /* 反转 */
filter: sepia(0.8);          /* 棕褐色 */
filter: opacity(0.5);        /* 透明度 */
filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));  /* 投影 */

/* 组合滤镜 */
filter: grayscale(1) brightness(1.1);

/* backdrop-filter 背景滤镜 */
.glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

混合模式​

/* mix-blend-mode 元素混合 */
mix-blend-mode: multiply;    /* 正片叠底 */
mix-blend-mode: screen;      /* 滤色 */
mix-blend-mode: overlay;     /* 叠加 */
mix-blend-mode: difference;  /* 差值 */
mix-blend-mode: color;       /* 颜色 */

/* background-blend-mode 背景混合 */
background: 
    linear-gradient(to right, #3498db, #e74c3c),
    url('photo.jpg');
background-blend-mode: overlay;

图片适配​

object-fit: fill;       /* 填充，可能变形 */
object-fit: cover;      /* 覆盖，可能裁剪 */
object-fit: contain;    /* 包含，可能留白 */
object-fit: none;       /* 原始大小 */
object-fit: scale-down; /* 按比例缩小 */

object-position: center center;  /* 位置对齐 */
object-position: top;
object-position: 25% 75%;

裁剪路径​

clip-path: circle(50%);                           /* 圆形 */
clip-path: ellipse(50% 30% at center);           /* 椭圆 */
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);  /* 三角形 */
clip-path: inset(10px 20px 30px 40px);           /* 矩形内边距 */

/* 常用形状 */
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);  /* 菱形 */
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);  /* 六边形 */

CSS 计数器​

/* 创建计数器 */
body {
    counter-reset: section;
}

/* 递增计数器 */
h2 {
    counter-increment: section;
}

/* 显示计数器 */
h2::before {
    content: "第 " counter(section) " 章 ";
}

/* 嵌套计数器 */
h3::before {
    content: counter(section) "." counter(subsection) " ";
}

/* 嵌套列表编号 */
li::before {
    content: counters(item, ".") " ";
}

多列布局​

/* 列数 */
column-count: 3;

/* 列宽 */
column-width: 200px;

/* 简写 */
columns: 3 200px;

/* 列间距 */
column-gap: 30px;

/* 列分隔线 */
column-rule: 1px solid #ddd;

/* 跨列 */
column-span: all;

/* 内容填充 */
column-fill: balance;  /* 平衡列高 */
column-fill: auto;     /* 顺序填充 */

/* 防止分割 */
break-inside: avoid;

性能优化​

/* will-change 性能提示 */
will-change: transform, opacity;

/* content-visibility 内容可见性 */
content-visibility: auto;
contain-intrinsic-size: 500px;  /* 预估高度 */

/* contain 包含 */
contain: layout;    /* 布局包含 */
contain: paint;     /* 绘制包含 */
contain: strict;    /* 严格包含 */
contain: content;   /* 内容包含 */