文本样式---雀雀老师
基线对齐
基线产生的原因, 在设计英文对起的时候,按照四线三格对齐设计的.但是,汉
子是没法和英文一样的.
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 都是有继承性的
知识点多.慢慢消化吧..