css 修改文字基准线_HTML5之CSS-网页文本美化-文本样式

1.前言

上篇文章，仅仅是介绍了CSS是如何设置字符本身的，font-style/font-weight/font-variant /font-famaliy/font-size.这篇文章是介绍如何设置文字的布局的。css 使用text- xx|| font-xx  来区分是设置文本还是设置字体。

2.文本样式

只需要明确一点，文本样式是针对整篇文章的布局。

2.1文本是如何对齐的？-水平方向text-align: left |right |center |justify |inherit

对应中文： 文章-排列(对齐方式) : 左对齐|右对齐|居中对齐|继承

提醒：继承指的是继承父元素的字体对齐方式；居中对齐，指的是随着窗口大小的调整.(疑问：如果一个单词足够长，当窗口的长度小于该单词的长度时，单词的容器元素会被撑开，并不会再随着窗口的缩小而缩小，这应该是浏览器的一种默认处理方式，猜测)

2.2

文本是如何对齐的？-垂直方向vertical-align: auto | baseline | sub | super | top | text-top | middle|buttom|text-buttom|%

auto: layout-flow属性的值来定义的(注意  layout-flow:horizontal|vertical-ideographic  这些属性只有IE支持，用来操作是一列一列显示文本，还是一行一行显示文本。)

baseline:标准值，也是默认值，平行于基准线。

sub/supper/top/text-top  向上移动，移动多少，纯在浏览器解析差别。

middle:居中 ，middle其实略低于baseline，并不代表baseline就是居中的，可理解为父元素的中部。

buttom/text-buttom/  向下移动，移动多少，纯在浏览器解析差别。

%：百分比的值是用来相对于line-height来设定的。0%代表baseline。

2.3如何定义单词以及字母的间距？letter-spacing  字母间距 (中文有效)

word-spacing 单词间距(中文无效)

这两个属性，虽然用的比较少，但是感觉是实现一些酷炫文字效果的基础。

2.4如何定义行高？

行高，可以理解为一行文字的容器，它是文字的寄生场所。也正因为如此，它的大小对文章的布局展示十分关键。css是如何去操作它的呢？line-height:  length

中文翻译：行-高 ：具体长度值

(一般使用使用相对值，不推荐不使用绝对值，如果它的值小于文字本身的像素大小是会发生重叠的。)

2.5如何定义首行缩进？

中文习惯在段落首行缩进两个字符。(有一些新闻文章也是通过该值去实现一些悬垂效果。)text-indent:2em ;

中文翻译：文本-缩进 ： 2个字符