发表于: 2021-01-29 19:44:54
1 1027
今天完成的事情:完成了任务八的第一个页面
明天计划的事情:继续任务八
收获:
如何理解vertical-align与line-height?
一.line-height
①定义
line-height行高是指文本行基线之间的距离。行高line-height只影响行内元素和其他行内内容,而不会直接影响块级元素。为一个块级元素设置line-height,可以块级元素的内联内容,也定义了元素文本基线之间的最小距离,即最小行高。
②属性值
默认值为normal,通常为font-size值的1.2倍
<length>设置一个固定的行间距
<number>设置数字,该数字和当前font-size相乘就是行间距
<percentage>设置百分比,当前font-size的百分比为行间距
inherit从父元素继承
二.vertical-align
①定义
vertical-align用来设置元素的垂直对齐方式
②属性值
默认值为baseline,元素的基线和父元素的基线对齐
text-top 元素的顶端和父元素内容区域顶端对齐
text-bottom 元素的底端和父元素内容区域底端对齐
top 元素的顶端和line box顶端对齐
bottom 元素的底端和line box底端对齐
sub 元素的底端和父元素的下标基线对齐
super 元素的底端和父元素的上标基线对齐
middle 将元素盒子的垂直中点与父盒子的baseline加上父盒子的x-height的一半位置对齐
<length>升高(正值)或降低(负值)元素,0px等同于baseline
<percentage>升高(正值)或降低(负值)元素,百分比相对于line-height,0%等同于baseline
inherit从父元素继承
三.常见问题
①图像在块级元素中时,下面会有一段空白
在图像后写上一段字,并给他背景色,可以得到这样的图
因为vertical-align的默认对齐方式为baseline,所以图片下面的空白是预留给文字的基线下的内容,相当于图像后有一个看不见的文字
而zxx的高度是由行高来决定的,所以解决这个问题只要解决vertical-align和line-height
1.让vertical-align失效
图片默认是inline水平的,而vertical-align对块状水平的元素无感。因此,我们只要让图片display水平为block就可以了,我们可以直接设置display或者浮动、绝对定位等。
例如:display:block
2.使用其他vertical-align值
因为这个空隙是基线对齐搞出来的,所以可以用其他的值,比如top bottom middle
3. 修改line-height
下面的空隙高度,实际上是行高值和字母x下边缘的距离。因此,只要line-height≤font-size,实际文字占据的高度的底部就会在x的上面,下面没有了高度区域支撑,自然,图片就会有容器底边贴合在一起了。
4. line-height为相对单位,font-size间接控制
如果line-height是相对单位,例如line-height:1.6或者line-height:160%之类,也可以使用font-size间接控制,比方说font-size设0, 本质上还是改变line-height值
②给图片设置行高和垂直居中后发现只是近似居中
middle中线位置(字符x的中心)并不是字符内容的绝对居中位置。两个位置的偏差就是图片近似居中的偏差。
可以设置font-size:0, 此时content area高度是0,各种线都在高度为0的这条线上,绝对中心线和中线重合,自然垂直居中
评论