发表于: 2021-07-19 20:38:49
1 1004
今天完成的事情:
完成了任务五,预习任务六。
明天计划的事情:
写任务六代码,思考一下深度思考的事情。
遇到的问题:
雪碧图不会使用,今天一直在尝试,已经差不多了。
收获:
一.如何理解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 属性的值。 |
二.为什么我的弹性盒子会影响到整体布局,他的特性是什么?
答:弹性盒子影响整体布局,应该是你的某些参数用错或者冲突,弹性盒子本身不会有问题,顾名思义,他的特性就是很弹性,很灵活,相比较传统布局使用更加方便简洁
评论