CSS基本网页排版
1. 字体大小与行高
1.1 字体大小
绝大多数的浏览器默认字体大小都是 16px
1.1.1 em 单位
em 单位用于 font-size 属性时，实际上是一个相应元素继承的 font-size 缩放因子
例如，h3 元素，字型大小是 1.314*16 = 21px
虽然可以直接将 h3 字体设置成 21px，但使用 em 会更加灵活
使用 em 单位后，如果用户修改偏好中的默认字体大小，则相应元素的大小也会相应调整
1.2 % 单位
对于 font-size 属性，百分比单位可用于替代 em 单位，与 em 的计算规则完全一致
1.3 rem 单位
rem 始终基于根元素的 em 大小缩放，也就是基于 html 元素的 font-size 缩放
1.4 基于比例缩放的字型大小
标题的大小大致符合 “纯四度” 的数学比例
即上一级标题会比下一级标题的字型大小大自身尺寸的 1/4 （也就是1.3333...倍）
1.2 行高
1.2.1 行高
指的是行盒子的总高度，还可以叫作铅空，就是排字员用来隔开字符行的铅块，CSS 中的“铅空”始终都会同时应用到行盒子的上方和下方
一般来说，行高的取值范围在 1.2 ~ 1.5 范围内
对于 x 高度比较大的字体，行间距应该稍大一些
line-height: 1.5;
给 line-height 设置 1.5，意思就是行高是当前 font-size 的 1.5 倍
也可以给行高设置 % 或 em，其子元素会继承的都是计算后得到的像素值
设置无单位的值就不会导致这个结果
so，如果给 line-height 设置没有单位的值，那么子元素继承的是一个系数，永远与自己的 font-size 成比例
1.2.2 垂直对齐
text-top 或 text-bottom 会让当前元素的内容区与父行盒子的内容区顶部或底部对齐，但只有在行内盒子的 font-size 或 line-height 与其父元素不同时才会有影响
1.3 小型大写变体
font-variant 属性
可以通过值 small-caps 把英文文本转换成 “小型大写字母”，即字型和正常小写字母一样大小的大写字母
2. 版心宽度、律动和毛边
主体内容的文本行长通常是 45~75 字符，平均 66 字符
对于小屏幕，行长至少也应该有 40 字符
2.1 文本缩进与对齐
以下排版方式主要用于英文文章
默认情况下，文本是左对齐的（英文文章第一段一般不用缩进）。对于连续的段落，为了保证用户的阅读节奏，通常会给相邻段落设置 1 行的外边距，或者设置段首缩进
以下代码是使用相邻组合符设置 text-indent 属性：
p + p {
text-indent: 1.25em;
}
毛边，指的是文章内容左对齐后，右边部分出现的参差不齐情况
毛边效果在文章内容居中对齐时影响最大
2.2 连字符
当一个较长的单词出现在文章的换行处时，浏览器一般会把单词放到下一行显示，想要实现将单词分行显示（中间接上连接符 ‘-‘ ），可以使用 ­ 软连字符
只有当浏览器需要断行换行时才会显示这个连字符
自动连字符功能
实现自动连字符功能，需要两步：
-
在 html 元素中设置语言代码
<html lang="en"> -
在需要的标签中使用 hyphens 属性
p { hyphens: auto; }目前 hyphens 属性仍然不被 Chrome 支持，支持它的浏览器还是少数，详见 MDN 文档
2.3 多栏文本
article {
max-width: 70em; // 总栏宽度
columns: 20em; // 单栏栏宽
column-gap: 1.5em; // 栏间间隙
}
这里的 columns 属性时 column-count 和 column-width 属性的简写形式。
- 如果只设置了
columns-count属性，浏览器会严格生成指定数量的栏，不管宽度如何。 - 如果同时设置了
column-count和column-width，则前者会作为最大栏数，后者会作为最小栏宽
后背宽度，在不支持多栏属性的浏览器中确保行长不会超过限度，可以在段落元素上应用
max-width属性，即在页面上只显示一栏，但也能保证页面可读性
2.3.1 跨栏
当文章中的所有元素都排在了栏文本流中，其实可以让某些元素排到该文本流之外，强制他们伸长已达到跨栏效果
.h1 {
column-span: all;
// 或 column-span: none; 关闭跨栏特性
}
给文本流内部的元素应用 column-span: all 会垂直切分多栏文本流
几乎所有浏览器都需要使用合适的开发商前缀
2.3.2 关于对齐
让标题的上外边距、行高和下外边距加起来恰好等于文本内容的 line-height 值的整数倍，即可让所有栏的文本基线对齐
3. web 字体
免费 web 字体库：Google Fonts
http://www.googlefonts.cn/english?category=Sans+Serif
4 高级排版特性（OpenType 特性）
CSS 字体规范中有着许多与 OpenType 对应的属性
详见 MDN 相关文档
4.1 数字
- 老式数字，和字母一样，有上伸部分和下伸部分
.old-style {
font-varient-numeric: oldstyle-nums;
font-feature-settings: "onum"; // oldnum
}
- 线性数字，所有数字都位于基线上（默认）
.lining-nums {
font-varient-numeric: lining-nums;
font-feature-settings: "lnum"; // liningnum
}
4.2 字距
高品质字体中通常包含用于调整某些字形间距的数据，这种微调间距的过程叫作字距调整（kerning）
即有些字母需要加大间隔才不会显得拥挤，同时也有些字母需要缩小间隔才不会显得疏远
.kern {
font-kerning: normal; // 直接使用font-kerning属性
// 或者启用OpenType的kern特性：font-feature-settings: ‘kern‘;
}
MDN 文档：https://developer.mozilla.org/zh-CN/docs/Web/CSS/font-kerning
5. 其他布局单位
vh 与 vw
两者都基于 view 视窗大小来决定的
-
vw，指viewWidth，视窗宽度
如果使用vw单位设置wrap类宽度，会在页面出现高度滚动条时，同时出现宽度滚动条
原因：在出现高度滚动条时，页面宽度已经被高度滚动条占用了一部分，而vw获取的是页面原始的宽度，因此会出现宽度溢出问题
-
vh，指viewHeight，视窗高度
vw和vh的1个单位值，指的是视窗大小的1%。
例如在处理宽高时，就可以采用
vh: 100;来设置高度占满屏幕