文本属性
字体了解之后,接下来我们了解一下文本属性。缩进、角标、间距、排版等。
text-decoration
文本装饰
text-transform
text-indent
文本缩进,设置文本的起点,一般我们进行首行缩进。
tip:这个玩意也会继承。
example
text-algin
文本对齐方式
letter-spacing
字符间距
这个貌似也没啥说的还是过了吧。。。๑乛乛๑
word-spacing
单词间距,亲啊一定要区分清楚啊。 Hi girl!我只能说很少用,毕竟我们不写英文。
line-height
行高,数字。
在css里边最tm难理解的两个东西它就是其中一个。尴尬…
先来个图!
green:top(顶线)
blue:middle(中线)
red:baseline(基线)
pink:bottom(底线)
example
vertical-align
垂直对齐 以基线为参照上下移动文本,但是这个玩意只能影响行内元素
在css里边最tm难理解的另一个。
example
tip:vertical-align通常用来让两个行内元素对齐,虽然我们有时候设置了大小行高,行内的元素有时候也无发正常居中毕竟line-height是对文字的。这里line-height与vertical-align大家知道怎么去使用碰到问题解决问题,不要深究,会死。
last
最后给大家看一下字体与文本的结合,英文的排版样式布局。欣赏一下!
Q&A
发现问题了吗? 行内元素在换行显示之后回车被html解析了。
领取专属 10元无门槛券
私享最新 技术干货