【每日前端】em / rem / line-height / SCSS guide

[jctang1202]

EM / REM 单位值

https://webdesign.tutsplus.com/zh-hans/tutorials/comprehensive-guide-when-to-use-em-vs-rem--cms-23984

line-height

The line-height property in CSS controls the space between lines of text.

The line-height property defines the amount of space above and below inline elements. That is, elements that are set to display: inline or display: inline-block.

the amount of space above and below 可以理解为行内元素的 lines of text 的上半行距和下半行距。

https://css-tricks.com/almanac/properties/l/line-height/
https://segmentfault.com/a/1190000003038583

文章给出示例图：

半行距 = （line-height - font-size）/ 2

给行内元素设置 line-height 相当于添加了上半行距和下半行距

行盒的高度由其内容最高的一个决定。如果是都是纯 inline 元素，则其高度由最高的 line-height 计算值决定；而如果包括了 inline-block，则 inline-block 的 margin（上下），border（上下），padding（上下），height 都会影响整体行盒的高度

http://coding.imweb.io/demo/p3/vfm/ifc-height.html

SCSS

• Variables
• Nesting
• Partials
• Import
• Mixins
• Inheritance
• Operators

http://sass-lang.com/guide