这是一份关于 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; + 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
.classname
#idname
div,p
#idname *
另见: 元素 / 类 / ID / 通配 选择器
div.classname
div#idname
div p
div > p
div + p
div ~ p
另见: 相邻兄弟 / 通用兄弟 / 子 选择器
a[target]
a[target="_blank"]
a[href^="/index"]
[class|="chair"]
[class*="chair"]
[title~="chair"]
a[href$=".doc"]
[type="button"]
另见: 属性选择器
a:link
a:active
a:hover
a:visited
p::after
p::before
p::first-letter
p::first-line
::selection
::placeholder
:root
:target
div:empty
p:lang(en)
:not(span)
input:checked
input
input:disabled
input:enabled
input:focus
input:in-range
input:out-of-range
input:valid
input:invalid
input:optional
input:required
input:read-only
input:read-write
input:indeterminate
p:first-child
p:last-child
p:first-of-type
p:last-of-type
p:nth-child(2)
p:nth-child(3n42)
p:nth-last-child(2)
p:nth-of-type(2)
p:nth-last-of-type(2)
p:only-of-type
p:only-child
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:
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-between +
flex-start：左对齐(默认值)
flex-start
╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ +┆╭┈┈╮╭┈╮╭┈┈┈╮ ┆ +┆╰┈┈╯╰┈╯╰┈┈┈╯ ┆ +╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯ +
flex-end：右对齐
flex-end
╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ +┆ ╭┈┈╮╭┈╮╭┈┈┈╮┆ +┆ ╰┈┈╯╰┈╯╰┈┈┈╯┆ +╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯ +
center： 居中
center
╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ +┆ ╭┈┈╮╭┈╮╭┈┈┈╮ ┆ +┆ ╰┈┈╯╰┈╯╰┈┈┈╯ ┆ +╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯ +
space-between：两端对齐，项目之间的间隔都相等
space-between
╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ +┆╭┈┈╮ ╭┈╮ ╭┈┈┈╮┆ +┆╰┈┈╯ ╰┈╯ ╰┈┈┈╯┆ +╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯ +
space-around：每个项目两侧的间隔相等，项目之间的间隔比项目与边框的间隔大一倍
space-around
╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ +┆ ╭┈┈╮ ╭┈╮ ╭┈┈┈╮ ┆ +┆ ╰┈┈╯ ╰┈╯ ╰┈┈┈╯ ┆ +╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯ +
上面示例，假设主轴为从左到右
flex-wrap: nowrap | wrap | wrap-reverse; +
nowrap：不换行(默认)
nowrap
╭1╮╭2╮╭3╮╭4╮╭5╮╭6╮╭7╮╭8╮╭9╮╭10╮ +╰┈╯╰┈╯╰┈╯╰┈╯╰┈╯╰┈╯╰┈╯╰┈╯╰┈╯╰┈┈╯ +
wrap：换行，第一行在 上方
wrap
上方
╭1┈╮ ╭2┈╮ ╭3┈╮ ╭4┈╮ ╭5┈╮ ╭6┈╮ ╭7┈╮ +╰┈┈╯ ╰┈┈╯ ╰┈┈╯ ╰┈┈╯ ╰┈┈╯ ╰┈┈╯ ╰┈┈╯ +╭8┈╮ ╭9┈╮ ╭10╮ +╰┈┈╯ ╰┈┈╯ ╰┈┈╯ +
wrap-reverse：换行，第一行在 下方
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
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 语法:
.item { + grid-row: 1 / span 2; +} +
#grid-container { + display: block; +} +
#grid-container { + display: inline-grid; +} +
grid-row-gap: length; +
任何合法的长度值，例如 px 或 %。0 是默认值
px
%
.item1 { + grid-area: 2 / 1 / span 2 / span 3; +} +
.grid { + display: grid; + grid-template-columns: 100px minmax(100px, 500px) 100px; +} +
定义了一个长宽范围的闭区间
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, ".") " "; +} +
html { + scroll-behavior: smooth; +} +
点击我页面会平滑滚动到入门
br + br { + display: none; +} +
:empty { + display: none; +} +
html { + box-sizing: border-box; +} +*, *::before, *::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} +
有助于在不同的浏览器之间强制样式一致性，并为样式元素提供干净的盒子
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 属性值时执行计算
calc()
.sticky { + position: sticky; + top: 0; +} +
属性 sticky 能在滚动到顶部的位置固定住元素
a[href^="http"]:empty::before { + content: attr(href); +} +
如果你的 <a> 标签里面没有内容，将 href 的值作为内容展示
<a>
href
响应式布局中的字体大小应该能够根据每个视口进行调整，您可以使用 :root 根据视口高度和宽度计算字体大小
:root { + font-size: calc(1vw + 1vh + .5vmin); +} +
现在您可以根据 :root 计算的值使用根 em 单位：
em
body { + font: 1rem/1.6 sans-serif; +} +
此 HTML 快速参考备忘单以可读布局列出了常见的 HTML 和 HTML5 标记。
HTML
HTML5
这是您可以在 Quick Reference 备忘单上使用的样式参考，快速参与贡献！
+ + + +CSS 3 + @@ -88,8 +92,8 @@ Styled Components - - + + HTML @@ -198,9 +202,9 @@
+ + +CSS 3 + @@ -88,8 +92,8 @@ Styled Components - - + + HTML @@ -198,9 +202,9 @@
- - - + + + Quick Reference diff --git a/style/style.css b/style/style.css index 698eaaa2..31498423 100644 --- a/style/style.css +++ b/style/style.css @@ -1,3 +1,6 @@ +html { + scroll-behavior: smooth; +} body { -webkit-text-size-adjust: 100%; tab-size: 4; @@ -298,6 +301,9 @@ body.home .h1wrap .wrap-body p { text-indent: 2rem; } +body:not(.home) .h2wrap > .wrap-body > ul { + list-style: initial; +} body.home .h1wrap p { text-align: left; @@ -493,22 +499,21 @@ body:not(.home) .h3wrap > h3 a::after { font-size: 1rem; display: none; } -body:not(.home) .h3wrap > h3:hover a::after { +body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after { display: initial; } .wrap-header.h3wrap { z-index: 0; - display: flex; - height: 100%; width: 100%; - flex-direction: column; + flex: 1; } .wrap-header.h3wrap > h3 { + position: sticky; + float: right; + margin-top: -24px; color: rgb(226 232 240/1); - position: absolute; - right: 0px; top: 0px; z-index: 10; border-top-right-radius: 0.5rem;