文本样式---雀雀老师

基线对齐

基线产生的原因, 在设计英文对起的时候,按照四线三格对齐设计的.但是,汉

子是没法和英文一样的.

vertical-align:

如何解决基线没有对齐的问题?

两个值都给上:  top属性.

中部对齐

底部对齐  是相对于 行框盒子 来对齐的.

是根据几个行框行子的最高点和最低点来计算的. 不是按照父级的底部来到 .

不能给一个 middle  来实现图片文字 居中对齐.只是行框元素的对齐

为什么要给两个加上相同的属性呢

如果只给 span .则效果是:

如果是给span 顶部加 top 则

父级还会重新移动.

中部对齐:   比较绕.

这里的笔记 不好记录,只理解到位就可以了. 几张图片,只提供回忆老师讲解的思路/

基线对齐的调整:

使用在input 区域 和span 的对齐,使用具体的像素值来实现

空的div 会自动找到 文本的内容基线对齐 所以不用 inline-block 来布局.会有很多问题产生

给了 line-height

行高对元素的影响

文字属性


文本默认的大小是 16px.

最小的文字大小是12px

px 是具体的单位

其他的都是相对单位

font-familiy 字体族

天猫中的字体, 具有备胎作用.看用户的浏览器是否有这种字体.如果没有,会选择最好看的出现.

不同字体的大小,会不同.会造成布局的混乱.所以会统一设置 字体族/

最好是写英文. 有的汉子字体,可以识别,有的则不行.

衬线字体  终极备胎

字体是有版权的,是不能乱用的.会侵权的.公司里会对字体的使用进行规定的.

字体粗细  font-weight

字体的倾斜

如果有现成的倾斜字体 则使用.如果没有倾斜字体.则可以使用 """使文字倾斜"

使文字倾斜

复合写法

两端对齐:  Justify

单行文字左右,上下,居中

首行缩进 text-indent

控制大小写

文本修饰

主要使用: underline  和 none

字间距

词间距

字体 文本 list-style  都是有继承性的 

知识点多.慢慢消化吧..

猜你喜欢

转载自blog.csdn.net/liliming86575513/article/details/89341509