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个字符
网友评论