devttl/reference
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

doc: update docs/css.md

Browse Source
This commit is contained in:
jaywcjlove 2023-09-22 08:57:05 +08:00
parent f6cb68debf
commit ecb59d8980
1 changed files with 24 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
docs/css.md
View File

@ -1264,10 +1264,13 @@ CSS 函数
### calc() ### calc()
```css ```css
width: calc(100% - 80px); div {
width: calc(100% - 30px);
height: calc(100% - 30px);
}
``` ```
声明 CSS 属性值时执行一些计算 [`calc()`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/calc) CSS 函数允许您在指定 CSS 属性值时执行计算
### clamp() ### clamp()
@ -1502,6 +1505,7 @@ br + br {
html { html {
box-sizing: border-box; box-sizing: border-box;
} }
*, *::before, *::after { *, *::before, *::after {
box-sizing: border-box; box-sizing: border-box;
margin: 0; margin: 0;
@ -1530,6 +1534,24 @@ html {
上面示例设置了当前卡片灰色 上面示例设置了当前卡片灰色
### `<textarea>`自动增加其高度
```css
textarea {
form-sizing: normal
}
```
### 定义容器的长宽比
```css
div {
aspect-ratio: 1/1
}
```
属性 [aspect-ratio](https://developer.mozilla.org/zh-CN/docs/Web/CSS/aspect-ratio) 可以非常容易的定义一个容器的长宽比
### 使用 unset 而不是重置所有属性 ### 使用 unset 而不是重置所有属性
使用 `all` 速记来指定元素的所有属性。将值设置为 `unset` 会将元素的属性更改为其初始值： 使用 `all` 速记来指定元素的所有属性。将值设置为 `unset` 会将元素的属性更改为其初始值：
@ -1604,17 +1626,6 @@ div {
多行文本截断到特定的行数，末尾显示省略号 _(...)_ 多行文本截断到特定的行数，末尾显示省略号 _(...)_
### 计算函数
```css
div {
width: calc(100% - 30px);
height: calc(100% - 30px);
}
```
[`calc()`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/calc) CSS 函数允许您在指定 CSS 属性值时执行计算
### 粘性定位元素 ### 粘性定位元素
```css ```css
@ -1688,16 +1699,6 @@ div {
通过样式来控制一个元素 `div` 是否可以编辑 通过样式来控制一个元素 `div` 是否可以编辑
### 定义容器的长宽比
```css
div {
aspect-ratio: 1/1
}
```
属性 [aspect-ratio](https://developer.mozilla.org/zh-CN/docs/Web/CSS/aspect-ratio) 可以非常容易的定义一个容器的长宽比
### 等宽表格单元格 ### 等宽表格单元格
尝试使用 `table-layout: fixed` 以保持单元格宽度相等： 尝试使用 `table-layout: fixed` 以保持单元格宽度相等：