• 技术文章 >web前端 >css教程

    Css之line-height计算

    高洛峰高洛峰2017-02-09 16:47:25原创798
    line-height表示行高,即两行文字基线间的距离。

    行框盒子 -> 内联盒子(内联元素) -> 匿名内联盒子(内容区域/文本/行内框),依次包含,一行为一个行框,多行为多个行框累加。

    Css之line-height计算

    行间距是两行文字间,第一行文字底线到第二行文字顶线的距离。

    半行间距,是行间距的一半。

    行高 = 内容区域 + 行间距 , (某些字体下,内容区域高度等于字体大小,如SimSun宋体)

    Css之line-height计算

    一、块级元素的高度和字体大小,没有关系,是由行高撑开的

    Css之line-height计算

    Css之line-height计算

    Css之line-height计算

    二、内联元素的高度是由字体大小撑开的,设置的行高不影响元素高度

    Css之line-height计算

    Css之line-height计算

    Css之line-height计算

    Css之line-height计算

    三、两行文字,设置行高,值越小,由于内容区域大小不变,则行间距越小,会出现重叠现象,行高最小为0。反之同理。

    Css之line-height计算

    Css之line-height计算

    四、在块级容器中,使内联元素垂直居中(只是看上去居中,实际上不是居中)的原理就是:

    设置行高时,内容区域高度不变(一般由font-size和font-family决定),半行间距分别增加/减少(负的半行间距)到内容区域的上下两边

    Css之line-height计算Css之line-height计算

    Css之line-height计算 Css之line-height计算

                               (查看span时,IE浏览器有offset值,此值为41是因为没有计算p的1px边框)

    更多Css之line-height计算相关文章请关注PHP中文网!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:Css
    上一篇:css单位总结 下一篇:css link和@import的区别
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【腾讯云】年中优惠,「专享618元」优惠券!• css3怎样实现不是直角的菱形效果• css样式中有文字描边吗• 12个值得收藏的 CSS 技巧!!• css3怎样实现翻转2次效果• css中圆角属性值能用百分比吗
    1/1

    PHP中文网