这是一份关于 CSS 优点的快速参考备忘单，列出了选择器语法、属性、单位和其他有用的信息
CSS 功能丰富，不仅仅是布局页面
<link
href="./path/to/stylesheet/style.css"
rel="stylesheet"
type="text/css"
><style>
body {
background-color: linen;
}
</style><h2 style="text-align: center;">
居中文本
</h2>
<p style="color: blue; font-size: 18px;">
蓝色，18像素文本
</p><div class="classname"></div>
<div class="class1 ... classn"></div>支持一个元素上的多个类
.post-title {
color: blue !important;
}覆盖所有以前的样式规则
h1 { }
#job-title { }
div.hero { }
div > p { }查看: CSS 选择器
color: #2a2aff;
color: green;
color: rgb(34, 12, 64, 0.6);
color: hsla(30 100% 50% / 0.6);查看: Colors
background-color: blue;
background-image: url("nyan-cat.gif");
background-image: url("../image.png");查看: Backgrounds
.page-title {
font-weight: bold;
font-size: 30px;
font-family: "Courier New";
}查看: Fonts
.box {
position: relative;
top: 20px;
left: 20px;
}另见: Position
animation: 300ms linear 0s infinite;
animation: bounce 300ms linear infinite;查看: Animation
/* 这是一行注释 */
/* 这是
多行注释 */div {
display: flex;
justify-content: center;
}
div {
display: flex;
justify-content: flex-start;
}查看: Flexbox | Flex Tricks
#container {
display: grid;
s grid: repeat(2, 60px) / auto-flow 80px;
}
#container > div {
background-color: #8ca0ff;
width: 50px;
height: 50px;
}查看: Grid Layout
counter-set: subsection;
counter-increment: subsection;
counter-reset: subsection 0;
:root {
--bg-color: brown;
}
element {
background-color: var(--bg-color);
}查看: 动态内容
h1, h2 {
color: red;
}h3.section-heading {
color: blue;
}div[attribute="SomeValue"] {
background-color: red;
}p:first-child {
font-weight: bold;
}.box:empty {
background: lime;
height: 80px;
width: 80px;
}| 选择器 | 说明 |
|---|---|
* |
所有元素 |
div |
所有 div 标签 |
.classname |
具有类的所有元素 |
#idname |
带 ID 的元素 |
div,p |
所有 div 和段落 |
#idname * |
#idname 中的所有元素 |
| 选择器 | 说明 |
|---|---|
div.classname |
具有特定类名的 div |
div#idname |
具有特定 ID 的 div |
div p |
div 中的所有段落 |
div > p |
父元素是 div 的 P 标签 |
div + p |
div 之后的第一个同级 P 标签 |
div ~ p |
div 之后所有的同级 P 标签 |
| 选择器 | 说明 |
|---|---|
a[target] |
带有 target 属性 # |
a[target="_blank"] |
在新标签中打开 # |
a[href^="/index"] |
以 /index 开头 # |
[class|="chair"] |
以chair开头 # |
[class*="chair"] |
包含chair # |
[title~="chair"] |
包含单词 chair # |
a[href$=".doc"] |
以 .doc 结尾 # |
[type="button"] |
指定类型 # |
另见: 属性选择器
| 选择器 | 说明 |
|---|---|
a:link |
链接正常 # |
a:active |
链接处于点击状态 # |
a:hover |
鼠标悬停链接 # |
a:visited |
访问链接 # |
/* 未访问链接 */
a:link { color: blue; }
/* 已访问链接 */
a:visited { color: purple; }
/* 用户鼠标悬停 */
a:hover { background: yellow; }
/* 激活链接 */
a:active { color: red; } | 选择器 | 说明 |
|---|---|
p::after |
在 p 之后添加内容 # |
p::before |
在 p 之前添加内容 # |
p::first-letter |
p中的第一个字母 # |
p::first-line |
p 中的第一行 # |
::selection |
由用户选择 # |
::placeholder |
占位符 属性 # |
:root |
文档根元素 # |
:target |
突出显示活动锚点 # |
div:empty |
没有子元素的元素 # |
p:lang(en) |
带有 en 语言属性的 P # |
:not(span) |
不是跨度的元素 # |
:host |
shadowDOM 中选择自定义元素 # |
::backdrop |
处于全屏模式的元素样式 # |
::marker |
li 项目符号或者数字 # |
::file-selector-button |
type="file" input 按钮 # |
| 选择器 | 说明 |
|---|---|
input:checked |
检查 input # |
input:disabled |
禁用 input # |
input:enabled |
启用的 input # |
input:default |
有默认值的元素 # |
input:blank |
空的输入框 # |
input:focus |
input 有焦点 # |
input:in-range |
范围内的值 # |
input:out-of-range |
input 值超出范围 # |
input:valid |
input 有效值 # |
input:invalid |
input 无效值 # |
input:optional |
没有必需的属性 # |
input:required |
带有必需属性的 input # |
input:read-only |
具有只读属性 # |
input:read-write |
没有只读属性 # |
input:indeterminate |
带有 indeterminate 状态 # |
| 选择器 | 说明 |
|---|---|
p:first-child |
第一个孩子 # |
p:last-child |
最后一个孩子 # |
p:first-of-type |
第一个 p 类型的元素 # |
p:last-of-type |
某种类型的最后一个 # |
p:nth-child(2) |
其父母的第二个孩子 # |
p:nth-child(3n42) |
Nth-child(an + b) 公式 # |
p:nth-last-child(2) |
后面的二孩 # |
p:nth-of-type(2) |
其父级的第二个 p # |
p:nth-last-of-type(2) |
...从后面 # |
p:only-of-type |
其父级的唯一性 # |
p:only-child |
其父母的唯一孩子 # |
:is(header, div) p |
可以选择的元素 # |
:where(header, div) p |
与 :is 相同 # |
a:has(> img) |
包含 img 元素的 a 元素 # |
::first-letter |
第一行的第一个字母 # |
::first-line |
第一行应用样式 # |
| 属性 | 说明 |
|---|---|
font-family: |
字体族名或通用字体族名 # |
font-size: |
字体的大小 # |
letter-spacing: |
文本字符的间距 # |
line-height: |
多行文本间距 # |
font-weight: |
粗细程度 # |
font-style: |
字体样式 # |
text-decoration: |
文本的修饰线外观 # |
text-align: |
相对它的块父元素对齐 # |
text-transform: |
指定文本大小写 # |
另见: Font
font: italic 400 14px / 1.5 sans-serif
┈┈┬┈┈┈ ┈┬┈ ┈┬┈┈ ┈┬┈ ┈┬┈┈┈┈┈┈┈┈
样式 粗细 大小(必需的) 行高 字体(必需的)font-family: Arial, sans-serif;
font-size: 12pt;
letter-spacing: 0.02em;div {
/* 首字母大写 Hello */
text-transform: capitalize;
/* 字母大写 HELLO */
text-transform: uppercase;
/* 字母小写 hello */
text-transform: lowercase;
}@font-face {
font-family: 'Glegoo';
src: url('../Glegoo.woff');
}color: red;
color: orange;
color: tan;
color: rebeccapurple;更多标准颜色名称
color: #090;
color: #009900;
color: #090a;
color: #009900aa;color: rgb(34, 12, 64, 0.6);
color: rgba(34, 12, 64, 0.6);
color: rgb(34 12 64 / 0.6);
color: rgba(34 12 64 / 0.3);
color: rgb(34.0 12 64 / 60%);
color: rgba(34.6 12 64 / 30%);color: hsl(30, 100%, 50%, 0.6);
color: hsla(30, 100%, 50%, 0.6);
color: hsl(30 100% 50% / 0.6);
color: hsla(30 100% 50% / 0.6);
color: hsl(30.0 100% 50% / 60%);
color: hsla(30.2 100% 50% / 60%);color: inherit;
color: initial;
color: unset;
color: transparent;
color: currentcolor; /* 关键字 *//* 全局值 */
color: inherit;
color: initial;
color: unset;| 属性 | 说明 |
|---|---|
background: |
(速记) |
background-color: |
查看: Colors |
background-image: |
一个或者多个背景图像 |
background-position: |
背景图片设置初始位置 |
background-size: |
背景图片大小 |
background-clip: |
背景(图片或颜色)是否延伸到边框、内边距盒子、内容盒子下面 |
background-repeat: |
图像重复方式 |
background-attachment: |
scroll/fixed/local |
background: #ff0 url(a.jpg) left top / 100px auto no-repeat fixed;
#abc url(b.png) center center / cover repeat-x local;
┈┬┈┈ ┈┬┈┈┈┈┈┈┈ ┈┬┈┈ ┈┬┈ ┈┈┬┈┈┈┈┈┈┈ ┈┈┬┈┈┈┈┈┈ ┈┈┬┈┈┈
颜色 图片 位置x 位置x 图片大小 图像重复方式 位置是在视口内固定background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
background: url(img_man.jpg) no-repeat center;
background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%,
rgba(13,232,230,1) 35%,
rgba(0,212,255,1) 100%);.column {
max-width: 200px; /* 最大宽度 200 像素 */
width: 500px; /* 宽度 500 像素 */
}另见: max-width / min-width / max-height / min-height
.block-one {
margin: 20px; /* 边距 20 像素 */
padding: 10px; /* 补白 10 像素 */
}另见: 边距(margin) / 补白(padding)
.container {
/* 设置的边框和补白的值是包含在 width 内的 */
box-sizing: border-box;
}另见: box-sizing
.invisible-elements {
visibility: hidden; /* 隐藏元素 */
}另见: Visibility
div {
/* 览器自己选择一个合适的外边距 */
margin: auto;
}另见: 边距(margin)
.small-block {
/* 浏览器总是显示滚动条 */
overflow: scroll;
}另见: 溢出(overflow)
animation: bounce 300ms linear 100ms infinite alternate-reverse both reverse
┈┬┈┈ ┈┬┈┈┈ ┈┬┈┈┈┈ ┈┈┬┈┈ ┈┈┈┬┈┈┈┈ ┈┈┬┈┈┈┈┈┈┈┈┈┈┈┈┈┈ ┈┈┬┈┈┈ ┈┈┬┈┈┈
动画名 动画时间 缓动函数 延迟 运行的次数 动画是否反向播放 如何将样式应用于其目标 是否运行或者暂停| 属性 | 说明 |
|---|---|
animation: |
(速记) |
animation-name: |
动画名 # |
animation-duration: |
动画周期的时长 # |
animation-timing-function: |
缓动函数 # |
animation-delay: |
延迟 # |
animation-iteration-count: |
运行的次数 # |
animation-direction: |
动画是否反向播放 # |
animation-fill-mode: |
如何将样式应用于其目标 # |
animation-play-state: |
是否运行或者暂停 # |
另见: 动画(Animation)
/* @keyframes duration | timing-function | delay |
iteration-count | direction | fill-mode | play-state | name */
animation: 3s ease-in 1s 2 reverse both paused slidein;
/* @keyframes duration | timing-function | delay | name */
animation: 3s linear 1s slidein;
/* @keyframes duration | name */
animation: 3s slidein;
animation: 4s linear 0s infinite alternate move_eye;
animation: bounce 300ms linear 0s infinite normal;
animation: bounce 300ms linear infinite;
animation: bounce 300ms linear infinite alternate-reverse;
animation: bounce 300ms linear 2s infinite alternate-reverse forwards normal;.one('webkitAnimationEnd oanimationend msAnimationEnd animationend').container {
display: flex;
}.container > div {
flex: 1 1 auto;
}.container {
display: flex;
display: inline-flex;
flex-direction: row; /* ltr - 行(左向右) ▶ */
flex-direction: row-reverse; /* rtl - 行(右向左) ◀ */
flex-direction: column; /* top-bottom ▼ */
flex-direction: column-reverse; /* bottom-top ▲ */
flex-wrap: nowrap; /* 摆放到一行 */
flex-wrap: wrap; /* 被打断到多个行中 */
align-items: flex-start; /* 垂直对齐 - 顶部 */
align-items: flex-end; /* 垂直对齐 - 底部 */
align-items: center; /* 垂直对齐 - 中间 */
align-items: stretch; /* 所有人都一样的高度 (默认) */
justify-content: flex-start; /* [◀◀◀ ] */
justify-content: center; /* [ ■■■ ] */
justify-content: flex-end; /* [ ▶▶▶] */
justify-content: space-between; /* [◀ ■ ▶] */
justify-content: space-around; /* [ ■ ■ ■ ] */
justify-content: space-evenly; /* [ ■ ■ ■ ] */
}.container > div {
/* 这个: */
flex: 1 0 auto;
/* 相当于这个： */
flex-grow: 1;
flex-shrink: 0;
flex-basis: auto;
order: 1;
align-self: flex-start; /* left */
margin-left: auto; /* right */
}justify-content: flex-start | flex-end | center | space-betweenflex-start：左对齐(默认值)
╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
┆╭┈┈╮╭┈╮╭┈┈┈╮ ┆
┆╰┈┈╯╰┈╯╰┈┈┈╯ ┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯flex-end：右对齐
╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
┆ ╭┈┈╮╭┈╮╭┈┈┈╮┆
┆ ╰┈┈╯╰┈╯╰┈┈┈╯┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯center： 居中
╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
┆ ╭┈┈╮╭┈╮╭┈┈┈╮ ┆
┆ ╰┈┈╯╰┈╯╰┈┈┈╯ ┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯space-between：两端对齐，项目之间的间隔都相等
╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
┆╭┈┈╮ ╭┈╮ ╭┈┈┈╮┆
┆╰┈┈╯ ╰┈╯ ╰┈┈┈╯┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯space-around：每个项目两侧的间隔相等，项目之间的间隔比项目与边框的间隔大一倍
╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
┆ ╭┈┈╮ ╭┈╮ ╭┈┈┈╮ ┆
┆ ╰┈┈╯ ╰┈╯ ╰┈┈┈╯ ┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯上面示例，假设主轴为从左到右
flex-wrap: nowrap | wrap | wrap-reverse;nowrap：不换行(默认)
╭1╮╭2╮╭3╮╭4╮╭5╮╭6╮╭7╮╭8╮╭9╮╭10╮
╰┈╯╰┈╯╰┈╯╰┈╯╰┈╯╰┈╯╰┈╯╰┈╯╰┈╯╰┈┈╯wrap：换行，第一行在 上方
╭1┈╮ ╭2┈╮ ╭3┈╮ ╭4┈╮ ╭5┈╮ ╭6┈╮ ╭7┈╮
╰┈┈╯ ╰┈┈╯ ╰┈┈╯ ╰┈┈╯ ╰┈┈╯ ╰┈┈╯ ╰┈┈╯
╭8┈╮ ╭9┈╮ ╭10╮
╰┈┈╯ ╰┈┈╯ ╰┈┈╯wrap-reverse：换行，第一行在 下方
╭8┈╮ ╭9┈╮ ╭10╮
╰┈┈╯ ╰┈┈╯ ╰┈┈╯
╭1┈╮ ╭2┈╮ ╭3┈╮ ╭4┈╮ ╭5┈╮ ╭6┈╮ ╭7┈╮
╰┈┈╯ ╰┈┈╯ ╰┈┈╯ ╰┈┈╯ ╰┈┈╯ ╰┈┈╯ ╰┈┈╯项目都排在一条线（又称"轴线"）上
flex-direction: row | row-reverse | column | column-reverse;╭┈┈╮ ▲ ╭┈┈╮ ┆
╰┈┈╯ ┆ ╰┈┈╯ ┆
╭┈┈╮ ┆ ╭┈┈╮ ┆
╰┈┈╯ ┆ ╰┈┈╯ ┆ ┈┈┈┈┈┈┈┈┈┈┈▶ ◀┈┈┈┈┈┈┈┈┈┈┈
╭┈┈╮ ┆ ╭┈┈╮ ┆ ╭┈┈╮ ╭┈┈╮ ╭┈┈╮ ╭┈┈╮ ╭┈┈╮ ╭┈┈╮
╰┈┈╯ ┆ ╰┈┈╯ ▼ ╰┈┈╯ ╰┈┈╯ ╰┈┈╯ ╰┈┈╯ ╰┈┈╯ ╰┈┈╯
┈┬┈┈┈┈┈┈ ┈┬┈┈┈┈┈┈ ┈┬┈┈┈┈┈┈┈┈┈┈┈ ┈┬┈┈┈┈┈┈┈┈┈┈┈
column-reverse column row row-reverse属性决定主轴的方向（即项目的排列方向）
align-items: flex-start | flex-end | center | baseline | stretch; ▶ flex-start(起点对齐) ▶ flex-end(终点对齐)
╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
┆ ╭┈┈╮ ╭┈┈╮ ╭┈┈╮ ╭┈┈╮ ┆ ┆ ┆
┆ ┆ ┆ ┆ ┆ ╰┈┈╯ ┆ ┆ ┆ ┆ ╭┈┈╮ ┆
┆ ╰┈┈╯ ┆ ┆ ╰┈┈╯ ┆ ┆ ╭┈┈╮ ┆ ┆ ╭┈┈╮ ┆
┆ ╰┈┈╯ ┆ ┆ ┆ ┆ ┆ ┆ ╭┈┈╮ ┆ ┆ ┆
┆ ┆ ┆ ╰┈┈╯ ╰┈┈╯ ╰┈┈╯ ╰┈┈╯ ┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
▶ center(中点对齐) ▶ stretch(占满整个容器的高度)
╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
┆ ╭┈┈╮ ┆ ┆ ╭┈┈╮ ╭┈┈╮ ╭┈┈╮ ╭┈┈╮ ┆
┆ ╭┈┈╮ ┆ ┆ ╭┈┈╮ ┆ ┆ ┆ ┆ ┆ ┆ ┆ ┆ ┆ ┆ ┆
┆ ┆ ┆ ┆ ┆ ╭┈┈╮ ┆ ┆ ┆ ┆ ┆ ┆ ┆ ┆ ┆ ┆ ┆ ┆ ┆
┆ ┆ ┆ ┆ ┆ ╰┈┈╯ ┆ ┆ ┆ ┆ ┆ ┆ ┆ ┆ ┆ ┆ ┆ ┆ ┆
┆ ╰┈┈╯ ┆ ┆ ╰┈┈╯ ┆ ┆ ┆ ┆ ┆ ┆ ┆ ┆ ┆ ┆ ┆
┆ ╰┈┈╯ ┆ ┆ ╰┈┈╯ ╰┈┈╯ ╰┈┈╯ ╰┈┈╯ ┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
▶ baseline(第一行文字的基线对齐)
╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
┆ ╭┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈╮ ┆
┆ ┆ ┆ ╭┈┈┈┈╮ ╭┈┈┈┈╮ ┆ ┆ ╭┈┈┈┈╮╭┈┈┈┈╮┆
┆ ┆ text ┆ ┆text┆ ┆text┆ ┆ text ┆ ┆text┆┆text┆┆
┆ ┆ ┆ ╰┈┈┈┈╯ ┆ ┆ ┆ ┆ ╰┈┈┈┈╯┆ ┆┆
┆ ╰┈┈┈┈┈┈╯ ╰┈┈┈┈╯ ╰┈┈┈┈┈┈╯ ╰┈┈┈┈╯┆
┆ ┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯align-content: flex-start | flex-end | center | space-between | space-around | stretch; ▶ flex-start(起点对齐) ▶ flex-end(终点对齐)
╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
┆ ╭┈┈╮╭┈╮╭┈┈┈╮╭╮╭┈┈┈┈╮ ┆ ┆ ┆
┆ ╰┈┈╯╰┈╯╰┈┈┈╯╰╯╰┈┈┈┈╯ ┆ ┆ ╭┈┈╮╭┈╮╭┈┈┈╮╭╮╭┈┈┈┈╮ ┆
┆ ╭┈┈┈╮╭╮ ┆ ┆ ╰┈┈╯╰┈╯╰┈┈┈╯╰╯╰┈┈┈┈╯ ┆
┆ ╰┈┈┈╯╰╯ ┆ ┆ ╭┈┈┈╮╭╮ ┆
┆ ┆ ┆ ╰┈┈┈╯╰╯ ┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
▶ center(中点对齐) ▶ stretch(满整个交叉轴)
╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
┆ ┆ ┆ ╭┈┈╮╭┈╮╭┈┈┈╮╭╮╭┈┈┈┈╮ ┆
┆ ╭┈┈╮╭┈╮╭┈┈┈╮╭╮╭┈┈┈┈╮ ┆ ┆ ┆ ┆┆ ┆┆ ┆┆┆┆ ┆ ┆
┆ ╰┈┈╯╰┈╯╰┈┈┈╯╰╯╰┈┈┈┈╯ ┆ ┆ ╰┈┈╯╰┈╯╰┈┈┈╯╰╯╰┈┈┈┈╯ ┆
┆ ╭┈┈┈╮╭╮ ┆ ┆ ╭┈┈┈╮╭╮╭┈╮ ┆
┆ ╰┈┈┈╯╰╯ ┆ ┆ ┆ ┆┆┆┆ ┆ ┆
┆ ┆ ┆ ╰┈┈┈╯╰╯╰┈╯ ┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
▶ space-between(两端对齐) ▶ space-around(均匀分布项目)
╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
┆ ╭┈┈╮╭┈┈╮╭┈┈╮╭┈┈╮╭┈┈╮ ┆ ┆ ┆
┆ ╰┈┈╯╰┈┈╯╰┈┈╯╰┈┈╯╰┈┈╯ ┆ ┆ ╭┈┈╮╭┈┈╮╭┈┈╮╭┈┈╮╭┈┈╮ ┆
┆ ┆ ┆ ╰┈┈╯╰┈┈╯╰┈┈╯╰┈┈╯╰┈┈╯ ┆
┆ ┆ ┆ ┆
┆ ┆ ┆ ╭┈┈╮ ┆
┆ ╭┈┈╮ ┆ ┆ ╰┈┈╯ ┆
┆ ╰┈┈╯ ┆ ┆ ┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯ .item {
order: <integer>;
}╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈╮
┆ ╭1┈╮ ╭1┈┈╮ ╭1┈╮ ╭2┈╮ ╭3┈┈┈┈┈┈╮ ┆ ┆ ╭2┈┈┈┈╮ ┆
┆ ╰┈┈╯ ╰┈┈┈╯ ╰┈┈╯ ╰┈┈╯ ╰┈┈┈┈┈┈┈╯ ┆ ┆ ╰┈┈┈┈┈╯ ┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯ ┆ ╭2┈┈┈┈╮ ┆
╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ ┆ ╰┈┈┈┈┈╯ ┆
┆ ╭-┈┈╮ ╭┈┈┈╮ ╭┈┈┈┈┈┈┈┈╮ ╭┈┈┈╮ ┆ ┆ ╭99┈┈┈╮ ┆
┆ ┆-1 ┆ ┆ 1 ┆ ┆ 2 ┆ ┆ 5 ┆ ┆ ┆ ┆ ┆ ┆
┆ ╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈┈┈┈┈┈╯ ╰┈┈┈╯ ┆ ┆ ╰┈┈┈┈┈╯ ┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈╯属性 order 定义项目的排列顺序。数值越小，排列越靠前，默认为 0
.item {
flex-grow: <number>; /* default 0 */
}╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
┆ ╭┈┈1┈┈╮╭┈┈2┈┈╮╭┈┈1┈┈╮ ┆
┆ ╰┈┈┈┈┈╯╰┈┈┈┈┈╯╰┈┈┈┈┈╯ ┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
┆ ╭┈1┈╮╭┈┈┈┈2┈┈┈┈╮╭┈1┈╮ ┆
┆ ╰┈┈┈╯╰┈┈┈┈┈┈┈┈┈╯╰┈┈┈╯ ┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯属性 flex-grow 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
.container {
display: flex;
}
.container > div {
width: 100px;
height: 100px;
margin: auto;
}.container {
display: flex;
/* 垂直的 */
align-items: center;
/* 水平的 */
justify-content: center;
}.container > .top {
order: 1;
}
.container > .bottom {
order: 2;
}.container {
display: flex;
flex-direction: column;
}
.container > .top {
flex: 0 0 100px;
}
.container > .content {
flex: 1 0 auto;
}一个固定高度的顶部栏和一个动态高度的内容区域
.container {
display: flex;
}
/* 这里的“px”值只是建议的百分比 */
.container > .checkbox { flex: 1 0 20px; }
.container > .subject { flex: 1 0 400px; }
.container > .date { flex: 1 0 120px; }这会创建具有不同宽度的列，但会根据情况相应地调整大小
.container {
align-items: center;
}垂直居中所有项目
.menu > .left { align-self: flex-start; }
.menu > .right { align-self: flex-end; }#grid-container {
display: grid;
width: 100px;
grid-template-columns: 20px 20% 60%;
}.grid {
display: grid;
width: 100px;
grid-template-columns: 1fr 60px 1fr;
}/* 行间距为 20px */
/* 列之间的距离是 10px */
#grid-container {
display: grid;
grid-gap: 20px 10px;
}CSS 语法:
- grid-row: grid-row-start / grid-row-end;
.item {
grid-row: 1 / span 2;
}#grid-container {
display: block;
}#grid-container {
display: inline-grid;
}grid-row-gap: length;任何合法的长度值，例如 px 或 %。0 是默认值
.item1 {
grid-area: 2 / 1 / span 2 / span 3;
}.grid {
display: grid;
grid-template-columns: 100px minmax(100px, 500px) 100px;
}定义了一个长宽范围的闭区间
CSS 语法:
- grid-row-start: auto|row-line;
- grid-row-end: auto|row-line|span n;
grid-row-start: 2;
grid-row-end: span 2;#container {
display: grid;
justify-items: center;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
}.item {
grid-area: nav;
}
.grid-container {
display: grid;
grid-template-areas:
'nav nav . .'
'nav nav . .';
}#grid-container {
display: grid;
justify-items: start;
}
.grid-items {
justify-self: end;
}网格项目位于行的右侧（末尾）
#container {
display: grid;
align-items: start;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
}定义 CSS 变量
:root {
--first-color: #16f;
--second-color: #ff7;
}变量用法
#firstParagraph {
background-color: var(--first-color);
color: var(--second-color);
}另见: CSS Variable
/* Set "my-counter" to 0 */
counter-set: my-counter;/* Increment "my-counter" by 1 */
counter-increment: my-counter;/* Decrement "my-counter" by 1 */
counter-increment: my-counter -1;/* Reset "my-counter" to 0 */
counter-reset: my-counter;另见: Counter set
body { counter-reset: section; }
h3::before {
counter-increment: section;
content: "Section." counter(section);
}ol {
counter-reset: section;
list-style-type: none;
}
li::before {
counter-increment: section;
content: counters(section, ".") " ";
}width: calc(100% - 80px);声明 CSS 属性值时执行一些计算
font-size: clamp(1rem, 10vw, 2rem);设置随窗口大小改变的字体大小
p:before {
content: attr(data-foo) " ";
}获取选择到的元素的某一 HTML 属性值
返回一个代表计数器的当前值的字符串
<ol>
<li></li>
<li></li>
<li></li>
</ol>ol {
counter-reset: listCounter;
}
li {
counter-increment: listCounter;
}
li::after {
content: "[" counter(listCounter) "] == ["
counter(listCounter, upper-roman) "]";
}显示
1. [1]==[I]
2. [2]==[II]
3. [3]==[III]
ol {
counter-reset: count;
}
li {
counter-increment: count;
}
li::marker {
content: counters(count, '.', upper-alpha) ') ';
}
li::before {
content: counters(count, ".", decimal-leading-zero) " == " counters(count, ".", lower-alpha);
}嵌套计数器，返回表示指定计数器当前值的连接字符串
<meta name="viewport" content="... viewport-fit=cover">body {
padding:
env(safe-area-inset-top, 20px)
env(safe-area-inset-right, 20px)
env(safe-area-inset-bottom, 20px)
env(safe-area-inset-left, 20px);
}用户代理定义的环境变量值插入你的 CSS 中
fit-content(200px)
fit-content(5cm)
fit-content(30vw)
fit-content(100ch)将给定大小夹紧为可用大小
从一个逗号分隔的表达式列表中选择最大（正方向）的值作为属性的值
width: max(10vw, 4em, 80px);例子中，宽度最小会是 80px，除非视图宽度大于 800px 或者是一个 em 比 20px 宽
width: min(1vw, 4em, 80px);从逗号分隔符表达式中选择一个最小值作为 CSS 的属性值
minmax(200px, 1fr)
minmax(400px, 50%)
minmax(30%, 300px)
minmax(100px, max-content)
minmax(min-content, 400px)
minmax(max-content, auto)
minmax(auto, 300px)
minmax(min-content, auto)repeat(auto-fill, 250px)
repeat(auto-fit, 250px)
repeat(4, 1fr)
repeat(4, [col-start] 250px [col-end])
repeat(4, [col-start] 60% [col-end])定义了一个长宽范围的闭区间
background: url("topbanner.png") #00D no-repeat fixed;
list-style: square url(http://www.example.com/redball.png):root {
--main-bg-color: pink;
}
body {
background-color: var(--main-bg-color);
}代替元素中任何属性中的值的任何部分
p {
white-space:nowrap;
}p {
word-break:break-all; /* 英文 */
white-space:pre-wrap; /* 中文 */
}html {
scroll-behavior: smooth;
}点击我页面会平滑滚动到入门
input[type="text"]:autofill {
box-shadow: 0 0 0 1000px #000 inset;
-webkit-text-fill-color: white;
}另见: :autofill
br + br {
display: none;
}:empty {
display: none;
}html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}有助于在不同的浏览器之间强制样式一致性，并为样式元素提供干净的盒子
body {
caret-color: red;
}html {
-webkit-filter: grayscale(.95);
}上面示例设置了当前卡片灰色
使用 all 速记来指定元素的所有属性。将值设置为 unset 会将元素的属性更改为其初始值：
button {
all: unset;
}注意：IE11 不支持 all 和 unset 速记
p {
overflow: hidden;/*超出部分隐藏*/
/* 超出部分显示省略号 */
text-overflow:ellipsis;
/* 规定段落中的文本不进行换行 */
white-space: nowrap;
width: 250px;/*需要配合宽度来使用*/
}您不需要为每个 <p>、<h*> 等添加行高。相反，将其添加到正文：
body {
line-height: 1.5;
}这样文本元素可以很容易地从 body 继承
div {
cursor: url('path-to-image.png'), url('path-to-fallback-image.png'), auto;
/* 表情符号作为光标 */
cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>🚀</text></svg>"), auto;
}.overflow-ellipsis {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}一行文本截断显示省略号 (...)
.overflow-truncate {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}多行文本截断到特定的行数，末尾显示省略号 (...)
div {
width: calc(100% - 30px);
height: calc(100% - 30px);
}calc() CSS 函数允许您在指定 CSS 属性值时执行计算
.sticky {
position: sticky;
top: 0;
}属性 sticky 能在滚动到顶部的位置固定住元素
a[href^="http"]:empty::before {
content: attr(href);
}如果 <a> 标签里面没有内容，将 href 的值作为内容展示
响应式布局中的字体大小应该能够根据每个视口进行调整，您可以使用 :root 根据视口高度和宽度计算字体大小
:root {
font-size: calc(1vw + 1vh + .5vmin);
}您可以根据 :root 计算的值使用根 em 单位：
body {
font: 1rem/1.6 sans-serif;
}.container {
height: 250px;
overflow-x: scroll;
display: flex;
scroll-snap-type: x mandatory;
column-gap: 10px;
}
.child {
flex: 0 0 66%;
width: 250px;
background-color: #663399;
scroll-snap-align: center;
}可用于 轮播图 效果，效果预览
div {
-webkit-user-modify:
read-write-plaintext-only;
}通过样式来控制一个元素 div 是否可以编辑
div {
aspect-ratio: 1/1
}属性 aspect-ratio 可以非常容易的定义一个容器的长宽比
尝试使用 table-layout: fixed 以保持单元格宽度相等：
table {
table-layout: fixed;
}当 <a> 元素没有文本内容，但有 href 属性的时候，显示它的 href 属性：
a[href^="http"]:empty::before {
content: attr(href);
}给 “默认” 链接定义样式：
a[href]:not([class]) {
color: #008000;
text-decoration: underline;
}通常没有 class 属性，以上样式可以甄别它们，而且不会影响其它样式
在根元素设置基本字体大小后 (html { font-size: 100%; }), 使用 em 设置文本元素的字体大小:
h2 {
font-size: 2em;
}
p {
font-size: 1em;
}然后设置模块的字体大小为 rem:
article {
font-size: 1.25rem;
}
aside .module {
font-size: .9rem;
}现在，每个模块变得独立，更容易、灵活的样式便于维护
这是一个自定义用户样式表的不错的技巧。避免在加载页面时自动播放。如果没有静音，则不显示视频：
video[autoplay]:not([muted]) {
display: none;
}再次，我们利用了 :not() 的优点
当触发 <select> 的下拉列表时，为了避免表单元素在移动浏览器（iOS Safari 和其它）上的缩放，加上font-size：
input[type="text"],
input[type="number"],
select,
textarea {
font-size: 16px;
}指针事件允许您指定鼠标如何与其触摸的元素进行交互。要禁用按钮上的默认指针事件，例如：
button:disabled {
opacity: .5;
pointer-events: none;
}就这么简单
div:has(img) {
background: black;
}设置包含子元素 img 的 div 元素样式，还可以嵌套：
div:has(h2):has(ul) {
background: black;
}用户使用额外的换行符
br + br {
display: none;
}body {
line-height: 1.5;
}您不需要为每个 <p>、<h*> 等分别添加行高。相反，将其添加到正文
@font-face {
font-family: "Dank Mono";
src:
/* Full name */
local("Dank Mono"),
/* Postscript name */
local("Dank-Mono"),
/* 否则，请下载它！ */
url("//...a.server/DankMono.woff");
}
code {
font-family: "Dank Mono",
system-ui-monospace;
}您可以在远程获取字体之前检查是否在本地安装了字体，这也是一个很好的性能提示
<a href="https://example.com">超链接</a>attr HTML 元素的属性名。
a:after {
content: " (" attr(href) ")";
}a:focus, button:focus, input:focus,
select:focus, textarea:focus {
box-shadow: none;
outline: #000 dotted 2px;
outline-offset: .05em;
}有视力的键盘用户依靠焦点来确定键盘事件在页面中的位置。使表单元素的焦点比浏览器的默认实现更加突出和一致
html, body {
height: 100%;
margin: 0;
}
body {
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-flex;
display: flex;
}...还有 CSS 网格：
body {
display: grid;
height: 100vh;
margin: 0;
place-items: center center;
}ul > li:not(:last-child)::after {
content: ",";
}使列表项看起来像一个真实的逗号分隔列表，使用 :not() 伪类，最后一项不会添加逗号