发表于: 2021-07-19 20:38:49

1 1003


今天完成的事情:

完成了任务五,预习任务六。

明天计划的事情:

写任务六代码,思考一下深度思考的事情。
遇到的问题:

雪碧图不会使用,今天一直在尝试,已经差不多了。
收获:

一.如何理解vertical-align与line-height?

line-height定义是什么:

 1.1 是指文本行基线baseline之间的垂直距离

 1.2 基线并不是汉字的下端沿,而是英文字母“x”的下端沿。


2.line-height的属性值有哪些

normal默认。设置合理的行间距。
number设置数字,此数字会与当前的字体尺寸相乘来设置行间距。
length设置固定的行间距。
%基于当前字体尺寸的百分比行间距。
inherit规定应该从父元素继承 line-height 属性的值。

行高是可以被继承的,数字可以直接被继承,然后在计算行高;而百分比是先计算出行高,再以px继承。单位除了像素以外,行高都是文字大小的乘积。

1.vertical-align定义是什么:

1.1 使行内元素的基线相对于该元素所在行的基线的垂直对齐。

1.2 vertical-align默认对齐是baseline, 也就是基线对齐。


2.vertical-align属性有哪些:

baseline默认。元素放置在父元素的基线上。
sub垂直对齐文本的下标。
super垂直对齐文本的上标
top把元素的顶端与行中最高元素的顶端对齐
text-top把元素的顶端与父元素字体的顶端对齐
middle把此元素放置在父元素的中部。
bottom把元素的底端与行中最低的元素的顶端对齐。
text-bottom把元素的底端与父元素字体的底端对齐。
length
%使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit规定应该从父元素继承 vertical-align 属性的值。

二.为什么我的弹性盒子会影响到整体布局,他的特性是什么?

答:弹性盒子影响整体布局,应该是你的某些参数用错或者冲突,弹性盒子本身不会有问题,顾名思义,他的特性就是很弹性,很灵活,相比较传统布局使用更加方便简洁



返回列表 返回列表
评论

    分享到