From 99fe72ef73b104d5fdc4fd510fee9c0963e58f88 Mon Sep 17 00:00:00 2001
From: jaywcjlove <398188662@qq.com>
Date: Sun, 20 Nov 2022 18:14:46 +0800
Subject: [PATCH] doc: update css.md
---
docs/css.md | 180 ++++++++++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 180 insertions(+)
diff --git a/docs/css.md b/docs/css.md
index d466841..c890ef9 100644
--- a/docs/css.md
+++ b/docs/css.md
@@ -1260,6 +1260,186 @@ li::before {
}
```
+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 技巧
------------