From 9a2cbcd3590ee39c3dbe0af03d55719726e4b07f Mon Sep 17 00:00:00 2001
From: jaywcjlove <398188662@qq.com>
Date: Sat, 10 Dec 2022 12:16:31 +0800
Subject: [PATCH] doc: update css.md
---
docs/css.md | 147 ++++++++++++++++++++++++++++++++++++++++++++++++++-
package.json | 2 +-
2 files changed, 146 insertions(+), 3 deletions(-)
diff --git a/docs/css.md b/docs/css.md
index 4ae148b..731548d 100644
--- a/docs/css.md
+++ b/docs/css.md
@@ -13,8 +13,6 @@ CSS 功能丰富，不仅仅是布局页面
#### 外部样式表 ``
-`
-
```html
`、`` 等添加行高。相反，将其添加到正文：
+
+```css
+body {
+ line-height: 1.5;
+}
+```
+
+这样文本元素可以很容易地从 `body` 继承
+
### 使用图像作为光标
```css
@@ -1652,6 +1687,114 @@ div {
属性 [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()` 的优点
+
+### 为更好的移动体验，为表单元素设置字体大小
+
+当触发 `