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