; /* default 0 */
}
```
---
```css
╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
┆ ╭┈┈1┈┈╮╭┈┈2┈┈╮╭┈┈1┈┈╮ ┆
┆ ╰┈┈┈┈┈╯╰┈┈┈┈┈╯╰┈┈┈┈┈╯ ┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
┆ ╭┈1┈╮╭┈┈┈┈2┈┈┈┈╮╭┈1┈╮ ┆
┆ ╰┈┈┈╯╰┈┈┈┈┈┈┈┈┈╯╰┈┈┈╯ ┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
```
属性 [flex-grow](https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-grow) 定义项目的放大比例，默认为`0`，即如果存在剩余空间，也不放大
CSS Flexbox 技巧
--------------
### 垂直中心
```css
.container {
display: flex;
}
.container > div {
width: 100px;
height: 100px;
margin: auto;
}
```
### 垂直中心 (2)
```css
.container {
display: flex;
/* 垂直的 */
align-items: center;
/* 水平的 */
justify-content: center;
}
```
### 重新排序
```css
.container > .top {
order: 1;
}
.container > .bottom {
order: 2;
}
```
### 移动布局
```css
.container {
display: flex;
flex-direction: column;
}
.container > .top {
flex: 0 0 100px;
}
.container > .content {
flex: 1 0 auto;
}
```
一个固定高度的顶部栏和一个动态高度的内容区域
### Table-like 像表格
```css
.container {
display: flex;
}
/* 这里的“px”值只是建议的百分比 */
.container > .checkbox { flex: 1 0 20px; }
.container > .subject { flex: 1 0 400px; }
.container > .date { flex: 1 0 120px; }
```
这会创建具有不同宽度的列，但会根据情况相应地调整大小
### Vertical 垂直的
```css
.container {
align-items: center;
}
```
垂直居中所有项目
### 左和右
```css
.menu > .left { align-self: flex-start; }
.menu > .right { align-self: flex-end; }
```
CSS Grid 网格布局
------------
### 网格模板列
```css
#grid-container {
display: grid;
width: 100px;
grid-template-columns: 20px 20% 60%;
}
```
### fr 相对单位
```css
.grid {
display: grid;
width: 100px;
grid-template-columns: 1fr 60px 1fr;
}
```
### Grid Gap 网格间隙
```css
/* 行间距为 20px */
/* 列之间的距离是 10px */
#grid-container {
display: grid;
grid-gap: 20px 10px;
}
```
### CSS 网格行
CSS 语法:
- grid-row: grid-row-start / grid-row-end;
#### 实例
```css
.item {
grid-row: 1 / span 2;
}
```
### CSS 块级网格
```css
#grid-container {
display: block;
}
```
### CSS 内联级别网格
```css
#grid-container {
display: inline-grid;
}
```
### CSS 网格行间隙
```css
grid-row-gap: length;
```
任何合法的长度值，例如 `px` 或 `%`。`0` 是默认值
### CSS 网格区域
```css
.item1 {
grid-area: 2 / 1 / span 2 / span 3;
}
```
### minmax() 函数
```css
.grid {
display: grid;
grid-template-columns: 100px minmax(100px, 500px) 100px;
}
```
定义了一个长宽范围的闭区间
### grid-row-start & grid-row-end
CSS 语法:
- grid-row-start: auto|row-line;
- grid-row-end: auto|row-line|span n;
#### 实例
```css
grid-row-start: 2;
grid-row-end: span 2;
```
### 对齐项目
```css
#container {
display: grid;
justify-items: center;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
}
```
### CSS 网格模板区域
```css
.item {
grid-area: nav;
}
.grid-container {
display: grid;
grid-template-areas:
'nav nav . .'
'nav nav . .';
}
```
### Justify Self
```css
#grid-container {
display: grid;
justify-items: start;
}
.grid-items {
justify-self: end;
}
```
网格项目位于行的右侧（末尾）
### 对齐项目
```css
#container {
display: grid;
align-items: start;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
}
```
CSS 动态内容
------------
### 变量
定义 CSS 变量
```css
:root {
--first-color: #16f;
--second-color: #ff7;
}
```
变量用法
```css
#firstParagraph {
background-color: var(--first-color);
color: var(--second-color);
}
```
另见: [CSS Variable](https://developer.mozilla.org/zh-CN/docs/Web/CSS/--*)
### 计数器
```css
/* Set "my-counter" to 0 */
counter-set: my-counter;
```
```css
/* Increment "my-counter" by 1 */
counter-increment: my-counter;
```
```css
/* Decrement "my-counter" by 1 */
counter-increment: my-counter -1;
```
```css
/* Reset "my-counter" to 0 */
counter-reset: my-counter;
```
另见: [Counter set](https://developer.mozilla.org/en-US/docs/Web/CSS/counter-set)
### 使用计数器
```css
body { counter-reset: section; }
h3::before {
counter-increment: section;
content: "Section." counter(section);
}
```
```css
ol {
counter-reset: section;
list-style-type: none;
}
li::before {
counter-increment: section;
content: counters(section, ".") " ";
}
```
CSS 函数
-----------
### calc()
```css
width: calc(100% - 80px);
```
声明 CSS 属性值时执行一些计算
### clamp()
```css
font-size: clamp(1rem, 10vw, 2rem);
```
设置随窗口大小改变的字体大小
### attr()
```css
p:before {
content: attr(data-foo) " ";
}
```
获取选择到的元素的某一 HTML 属性值
### counter()
返回一个代表计数器的当前值的字符串
```html
```
```css
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]
```
### counters()
```css
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);
}
```
嵌套计数器，返回表示指定计数器当前值的连接字符串
### env()
```html
```
---
```css
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()
```css
fit-content(200px)
fit-content(5cm)
fit-content(30vw)
fit-content(100ch)
```
将给定大小夹紧为可用大小
### max()
从一个逗号分隔的表达式列表中选择最大（正方向）的值作为属性的值
```css
width: max(10vw, 4em, 80px);
```
例子中，宽度最小会是 80px，除非视图宽度大于 800px 或者是一个 em 比 20px 宽
### min()
```css
width: min(1vw, 4em, 80px);
```
从逗号分隔符表达式中选择一个最小值作为 CSS 的属性值
### minmax()
```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() 轨道列表的重复片段
```css
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])
```
定义了一个长宽范围的闭区间
### url()
```css
background: url("topbanner.png") #00D no-repeat fixed;
list-style: square url(http://www.example.com/redball.png)
```
### var()
```css
:root {
--main-bg-color: pink;
}
body {
background-color: var(--main-bg-color);
}
```
代替元素中任何属性中的值的任何部分
CSS 技巧
------------
### 强制不换行
```css
p {
white-space:nowrap;
}
```
### 强制换行
```css
p {
word-break:break-all; /* 英文 */
white-space:pre-wrap; /* 中文 */
}
```
### 滚动条平滑
```css
html {
scroll-behavior: smooth;
}
```
[点击我](#入门)页面会平滑滚动到入门
### 忽略用作间距的换行符 \
```css
br + br {
display: none;
}
```
### 使用 :empty 隐藏空 HTML 元素
```css
:empty {
display: none;
}
```
### CSS 重置
```css
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
```
有助于在不同的浏览器之间强制样式一致性，并为样式元素提供干净的盒子
### 设置光标样式
```css
body {
caret-color: red;
}
```
### 设置整个页面灰色
```css
html {
-webkit-filter: grayscale(.95);
}
```
上面示例设置了当前卡片灰色
### 使用 unset 而不是重置所有属性
使用 `all` 速记来指定元素的所有属性。将值设置为 `unset` 会将元素的属性更改为其初始值：
```css
button {
all: unset;
}
```
注意：`IE11` 不支持 `all` 和 `unset` 速记
### 超出显示省略号
```css
p {
overflow: hidden;/*超出部分隐藏*/
/* 超出部分显示省略号 */
text-overflow:ellipsis;
/* 规定段落中的文本不进行换行 */
white-space: nowrap;
width: 250px;/*需要配合宽度来使用*/
}
```
### 给正文添加行高
您不需要为每个 ``、`` 等添加行高。相反，将其添加到正文：
```css
body {
line-height: 1.5;
}
```
这样文本元素可以很容易地从 `body` 继承
### 使用图像作为光标
```css
div {
cursor: url('path-to-image.png'), url('path-to-fallback-image.png'), auto;
/* 表情符号作为光标 */
cursor: url("data:image/svg+xml;utf8,"), auto;
}
```
### 文本溢出显示省略号
```css
.overflow-ellipsis {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
```
一行文本截断显示省略号 _(...)_
### 将文本截断到特定的行数
```css
.overflow-truncate {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
```
多行文本截断到特定的行数，末尾显示省略号 _(...)_
### 计算函数
```css
div {
width: calc(100% - 30px);
height: calc(100% - 30px);
}
```
[`calc()`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/calc) CSS 函数允许您在指定 CSS 属性值时执行计算
### 粘性定位元素
```css
.sticky {
position: sticky;
top: 0;
}
```
属性 [sticky](https://developer.mozilla.org/zh-CN/docs/Web/CSS/position#sticky) 能在滚动到顶部的位置固定住元素
### 使用带有空链接的属性选择器
```css
a[href^="http"]:empty::before {
content: attr(href);
}
```
如果 `` 标签里面没有内容，将 `href` 的值作为内容展示
### 使用 :root 表示灵活类型
响应式布局中的字体大小应该能够根据每个视口进行调整，您可以使用 `:root` 根据视口高度和宽度计算字体大小
```css
:root {
font-size: calc(1vw + 1vh + .5vmin);
}
```
您可以根据 `:root` 计算的值使用根 `em` 单位：
```css
body {
font: 1rem/1.6 sans-serif;
}
```
### 吸附滚动
```css {5,12}
.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;
}
```
可用于 `轮播图` 效果，[效果预览](https://codesandbox.io/embed/pensive-leftpad-w9p8rk?fontsize=14&hidenavigation=1&theme=dark)
### 类似 contenteditable 的样式
```css
div {
-webkit-user-modify:
read-write-plaintext-only;
}
```
通过样式来控制一个元素 `div` 是否可以编辑
### 定义容器的长宽比
```css
div {
aspect-ratio: 1/1
}
```
属性 [aspect-ratio](https://developer.mozilla.org/zh-CN/docs/Web/CSS/aspect-ratio) 可以非常容易的定义一个容器的长宽比
### 等宽表格单元格
尝试使用 `table-layout: fixed` 以保持单元格宽度相等：
```css
table {
table-layout: fixed;
}
```
### 利用属性选择器来选择空链接
当 `` 元素没有文本内容，但有 `href` 属性的时候，显示它的 `href` 属性：
```css
a[href^="http"]:empty::before {
content: attr(href);
}
```
### 给 “默认” 链接定义样式
给 “默认” 链接定义样式：
```css
a[href]:not([class]) {
color: #008000;
text-decoration: underline;
}
```
通常没有 `class` 属性，以上样式可以甄别它们，而且不会影响其它样式
### 用 rem 调整全局大小；用 em 调整局部大小
在根元素设置基本字体大小后 (`html { font-size: 100%; }`), 使用 em 设置文本元素的字体大小:
```css
h2 {
font-size: 2em;
}
p {
font-size: 1em;
}
```
然后设置模块的字体大小为 rem:
```css
article {
font-size: 1.25rem;
}
aside .module {
font-size: .9rem;
}
```
现在，每个模块变得独立，更容易、灵活的样式便于维护
### 隐藏没有静音、自动播放的影片
这是一个自定义用户样式表的不错的技巧。避免在加载页面时自动播放。如果没有静音，则不显示视频：
```css
video[autoplay]:not([muted]) {
display: none;
}
```
再次，我们利用了 `:not()` 的优点
### 为更好的移动体验，为表单元素设置字体大小
当触发 `