如何理解行高和高度? |
您所在的位置:网站首页 › 地震如何测定高度和高度 › 如何理解行高和高度? |
行高 行高的测量: 当行高加载在行内元素如span标签(inline box)上时,一组inline box组成了一个line box即一整行的元素,而这个line box 的高度,会以inline box中最大的行高作为值,line box最终会影响当前元素的父元素的高度,使其产逼近于line box 的高度值,但会产生不到1px的误差。默认的行高是22px
行高的构成是由line box决定的,line box是由inline box组成的。Line box 的高度由inline box中行高最大值。
Inline-box元素中是没有设置高度这个概念的,想要改变高度,设置当前元素设置的字体大小,font-size:14px,对应的元素高度为18.29。默认字体大小font-size:16px,对应的元素高度为21.14,不同浏览器,大小可能会不相同。
对于一组inline box来说,无论你设置line-height为多少,都不会影响当前inline元素的高度。通过统一的字体大小的改变,可以影响当前inline元素的高度。当当前inline元素的高度,大于一组inline box设置的行高时,父元素的高度也会接近于inline元素的高度值
文本与文本的对齐 文本的垂直方向的对齐,对齐的对象以高度最高的元素g为标准,所有元素设置完对齐方式后,应向g对齐,比如vertical-align:middle,设置给所有文本元素,所有元素在垂直方向应以最高元素的中线对齐。 默认情况下文字的垂直对齐是以baseline对齐的。
文字与图片的对齐 当span的中的文字,和img中的图片放在一个容器中时,图片底部会产生空隙,这个空隙因文字的字体大小而定,14px大小的文字,会产生底部3px的距离。 解决方法:因为img的垂直方向对齐方式为baseline对齐,将其改为bottom对齐即可。 |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |