Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

line-height小记 #5

Open
fengma1992 opened this issue Aug 2, 2018 · 0 comments
Open

line-height小记 #5

fengma1992 opened this issue Aug 2, 2018 · 0 comments

Comments

@fengma1992
Copy link
Owner

fengma1992 commented Aug 2, 2018 •
edited
Loading

字面意思

行高（行间距）指的是文本行的基线间的距离或者说是两行文字之间的垂直距离。
基线并不是汉字的下端沿，而是英文字母"x"的下端沿。具体英文字母x的角色可见张鑫旭大神的博客字母’x’在CSS世界中的角色和故事

line-height在CSS中书写

CSS中起高度作用的应该就是height以及line-height了吧！如果一个标签没有定义height属性(包括百分比高度)，那么其最终表现的高度一定是由line-height起作用
默认状态，浏览器使用1.0 - 1.2 line-height，这是一个初始值。
line-height有五种定义方式：

line-height: normal;
line-height: inherit; // 继承
line-height: 120%;  // 百分比
line-height: 20px;  // 长度值(单位px, em等)
line-height: 1.2;  // 纯数字

五种属性值也可以在CSS的font属性中缩写：
font-size/line-height

body {
  font: 100%/normal sans-serif;
}

body {
  font: 100%/inherit sans-serif;
}

body {
  font: 100%/120% sans-serif;
}

body {
  font: 100%/20px sans-serif;
}

body {
  font: 100%/1.2 sans-serif;
}

line-height计算

有些CSS属性是可继承(inherited)(从层叠的元素里传递), 如color属性是可继承的，如果body定义了color属性，那么其内部的所有元素的color属性均默认会继承
下面举例line-height属性值继承之间的差别

  • 百分比(200%)
/* HTML */

<body>
  <h1>百分比行高: font-size=32px, line-height=16px*200%(继承父级)</h1>
  <p>百分比行高: font-size=24px, line-height=16px*200%(继承父级)</p>
  <div class="footer">百分比行高: font-size=12px, line-height=16px*200%(继承父级)</div>
</body>

/* CSS */
body {
  display: flex; // 仅为方便在同一行进行行高对比
  font-size: 16px;
  line-height: 200%;
}
h1 {
  font-size: 32px;
  background-color: #aaaaaa;
}
p {
  font-size: 24px;
  background-color: #bbbbbb;
}
.footer {
  font-size: 12px;
  background-color: #cccccc;
    }

百分比

line-height的百分比(200%)和body的文字大小(16px)被用来计算值(16px * 200% = 32px)，这个计算出来的值会被层叠下去的元素所继承，所有继承下来的元素会忽略本身的font-size而使用相同的、body计算出来的line-height

element font-size line-height 最终值
body 16px 200% 16px*200%=32px
h1 32px 继承值-32px 32px
p 24px 继承值-32px 32px
.footer 12px 继承值-32px 32px
line-height不会随着元素自身font-size做相应比例缩放
  • 长度值(20px)
/* HTML */

<body>
  <h1>长度值行高: font-size=32px, line-height=20px(继承父级)</h1>
  <p>长度值行高: font-size=24px, line-height=20px(继承父级)</p>
  <div class="footer">长度值行高: font-size=12px, line-height=20px(继承父级)</div>
</body>

/* CSS */
body {
  display: flex; // 仅为方便在同一行进行行高对比
  font-size: 16px;
  line-height: 20px;
}
h1 {
  font-size: 32px;
  background-color: #aaaaaa;
}
p {
  font-size: 24px;
  background-color: #bbbbbb;
}
.footer {
  font-size: 12px;
  background-color: #cccccc;
    }

长度值

body的line-height长度值(20px)会被层叠下去的元素所继承，所有继承下来的元素会忽略本身的font-size而使用相同的、body设定的line-height值

element font-size line-height 最终值
body 16px 20px 20px
h1 32px 继承值-20px 20px
p 24px 继承值-20px 20px
.footer 12px 继承值-20px 20px
line-height不会随着元素自身font-size做相应比例缩放
  • normal(视不同浏览器而定，一般为1.2)
/* HTML */

<body>
  <h1>normal行高: font-size=32px, line-height=32px*1.2</h1>
  <p>normal行高: font-size=24px, line-height=24px*1.2</p>
  <div class="footer">normal行高: font-size=12px, line-height=12px*1.2</div>
</body>

/* CSS */
body {
  display: flex; // 仅为方便在同一行进行行高对比
  font-size: 16px;
  line-height: normal;
}
h1 {
  font-size: 32px;
  background-color: #aaaaaa;
}
p {
  font-size: 24px;
  background-color: #bbbbbb;
}
.footer {
  font-size: 12px;
  background-color: #cccccc;
    }

normal

现在所有继承body的line-height属性的元素不会忽略本身的font-size，使用基于自身font-size计算出来的line-height

element font-size line-height 最终值
body 16px normal 16px*1.2=19.2px
h1 32px 继承值-normal 32px*1.2=38.4px
p 24px 继承值-normal 24px*1.2=28.8px
.footer 12px 继承值-normal 12px*1.2=14.4px
line-height会随着元素自身font-size做相应比例缩放
  • 纯数字(2)
/* HTML */

<body>
  <h1>纯数字行高: font-size=32px, line-height=32px*2</h1>
  <p>纯数字行高: font-size=24px, line-height=24px*2</p>
  <div class="footer">纯数字行高: font-size=12px, line-height=12px*2</div>
</body>

/* CSS */
body {
  display: flex; // 仅为方便在同一行进行行高对比
  font-size: 16px;
  line-height: 2;
}
h1 {
  font-size: 32px;
  background-color: #aaaaaa;
}
p {
  font-size: 24px;
  background-color: #bbbbbb;
}
.footer {
  font-size: 12px;
  background-color: #cccccc;
    }

纯数字

现在所有继承body的line-height属性的元素不会忽略本身的font-size，使用基于自身font-size计算出来的line-height

element font-size line-height 最终值
body 16px 2 16px*2=32px
h1 32px 继承值-2 32px*2=64px
p 24px 继承值-2 24px*2=48px
.footer 12px 继承值-2 12px*2=24px
line-height会随着元素自身font-size做相应比例缩放

最好的方式？

一般来说，设置行高值为纯数字是最理想的方式，因为其会随着元素对应的font-size而缩放。
WCAG 2.0规定

段落中的行距至少要1.5倍

// TODO: 待续
@fengma1992 fengma1992 reopened this Aug 2, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@fengma1992