feat: ✨ 添加 line-height 的理解

enson0131 · Feb 2, 2024 · 56b3115 · 56b3115
1 parent 45ee71a
commit 56b3115
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 1 deletion.
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
@@ -110,7 +110,9 @@ function sidebarGuide(): DefaultTheme.SidebarItem[] {
           { 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的关系'}
+          { text: 'display、float、position的关系', link: 'css相关/display、float、position的关系'},
+          { text: '对 line-height 的理解及其赋值方式', link: 'css相关/对 line-height 的理解及其赋值方式'},
+          { text: 'link和import的区别', link: 'css相关/link和import的区别'}
         ]
       },
       {

diff --git a/docs/guide/css相关/对 line-height 的理解及其赋值方式.md b/docs/guide/css相关/对 line-height 的理解及其赋值方式.md
@@ -0,0 +1,26 @@
+# 对 line-height 的理解及其赋值方式
+
+## 概念
+
+line-height 指一行文本的高度，包含了字间距，实际上是下一行基线到上一行基线的距离
+
+line-height 和 height 都能撑开元素高度 （如果 line-height 和 height 一致时可以实现单行文字的垂直居中）
+
+
+## 计算方式
+
+### 带单位的px
+
+line-height 为 固定值
+
+### 纯数字
+
+直接 line-height 会把比例传递给后代
+
+例如，父级行高为 1.5，子元素字体为 18px，则子元素行高为 1.5 * 18 = 27px
+
+### 百分比
+
+父元素将计算后的值传递给后代
+
+例如，父元素行高为 200%，父元素字体为 18px，那么子元素行高为 18 * 200% = 36px