feat: ✨ 添加 CSS 文档

enson0131 · Feb 2, 2024 · 45ee71a · 45ee71a
1 parent 7e8f133
commit 45ee71a
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 0 deletions.
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
@@ -108,6 +108,9 @@ function sidebarGuide(): DefaultTheme.SidebarItem[] {
           { text: 'display', link: 'css相关/display' },
           { text: 'position', link: 'css相关/position' },
           { text: 'BFC', link: 'css相关/BFC' },
+          { text: '隐藏元素的方法', link: 'css相关/隐藏元素的方法' },
+          { text: 'display、visibility、opacity区别', link: 'css相关/display、visibility、opacity区别' },
+          { text: 'display、float、position的关系', link: 'css相关/display、float、position的关系'}
         ]
       },
       {

diff --git a/docs/guide/css相关/display、float、position的关系.md b/docs/guide/css相关/display、float、position的关系.md
@@ -0,0 +1,45 @@
+# display、float、position的关系
+
+- 如果元素的 display 为 none 直接隐藏
+- 如果元素的 position 为 absolute 或者 fixed 时，float 失效，display 会提升块级元素
+- 如果元素的 position 为 relative, 会在浮动后的元素进行定位，display 会被提升成块级元素
+- 如果是根元素，display 会被提升为块级元素 
+- 浮动元素会将 display 提升为块级元素
+
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        /* 如果 float 置为 none，判断元素是否为根元素，如果是根元素，display 会被提升为块级元素 */
+        html {
+            display: inline;
+            width: 500px;
+            height: 500px;
+        }
+
+        #app {
+            display: inline;
+            position: relative;
+            width: 50px;
+            height: 50px;
+            background-color: aqua;
+            float: left;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="app">
+    </div>
+</body>
+
+</html>
+
+```
diff --git a/docs/guide/css相关/display、visibility、opacity区别.md b/docs/guide/css相关/display、visibility、opacity区别.md
@@ -0,0 +1,22 @@
+# display、visibility、opacity区别
+
+- 占据空间
+  - opacity、visibility 占据空间，不会引起回流，但是会重绘
+  - display 不占据空间，但会引起页面的回流和重绘
+
+- 绑定事件
+  - display、visibility 不会触发绑定事件
+  - opacity 会触发绑定事件
+
+
+# display: none 和 visibility: hidden 的区别
+
+- 从渲染树上看
+  - display: none 不存在渲染树中
+  - visibility: hidden 的元素存在渲染树中，还会占据空间
+- 从继承上看
+  - display 不会被继承
+  - visibility 会被继承
+- 从渲染上看
+  - display 会影响回流重绘
+  - visibility 只会引起重绘
diff --git a/docs/guide/css相关/隐藏元素的方法.md b/docs/guide/css相关/隐藏元素的方法.md
@@ -0,0 +1,8 @@
+# 隐藏元素的方法
+
+- 1. display: none - 不会显示在渲染树上，不占据空间，无法监听事件
+- 2. visibility: hidden - 占据空间，无法监听事件
+- 3. opacity: 0 - 占据空间，可以监听事件
+- 4. transform: scale(0, 0)
+- 5. 绝对定位
+- 6. z-index 为负数