zoukankan      html  css  js  c++  java
  • 行高不设单位的好处 line-height:1.8

    今天无意间看了到了line-height:1.8 感觉挺有意思的,然后翻了下行高的知识,发现还挺有文章的,不妨温故而知新。

    先回顾下:顶线、中线、基线、底线

    vertical-align是元素的垂直对齐方式,也依赖于这些线,分别有top(顶线对齐)、middle(中线对齐)、baseline(基线对齐)、bottom(底线对齐)

    行距与行高(文本行的基线间的距离):

    为了更方便在效果图上测量行高数值,一般我会选择文字底到文字底这方式测量,与上图的高度是一样的。

    ===================================================================================

     那么话说回来line-height:1.8这个有什么用呢?

    行高是可继承的,但继承的是计算值,如:

    <div style="background:#ddd;height:100px;line-height:180%;font-size:15px;">
                    <p style="font-size: 30px">
                        中文 English<br/>
                        中文 English
                    </p>
    </div>

    这里div的行高为180%*15px=27px

    而p的行高为计算后的27px 而非180%*30px=54px

    通过上面的例子我们知道文本之间的空白距离不仅仅是行高决定的,同时也受字号的影响,

    如果继承的是计算值,那么当元素内的文字字体尺寸不一样的时候,就有可能造成字体的重叠,

    为了避免这种情况,可以定义一个没有单位的值作为缩放因子来统一控制行高,缩放因子是直接继承的,而不是继承计算值:

    <div style="background:#ddd;height:100px;line-height:1.8;font-size:15px;">
                    <p style="font-size: 30px;">
                        中文 English<br/>
                        中文 English
                    </p>
    </div>

    这里的p行高就是1.8x30px=54px  ,也就是说跟下面代码的效果是一样的。

    <div style="background:#ddd;height:100px;font-size:15px;">
                    <p style="font-size: 30px;line-height: 54px">
                        中文 English<br/>
                        中文 English
                    </p>
    </div>
  • 相关阅读:
    Windows编译openssl3
    【转】FFmpeg采集设备
    构建FFmpeg项目时链接报错avformat_alloc_context未定义
    anaconda代理设置
    静态链接导致的一个bug分析
    Qt如果发送信号过快会如何?
    关闭Edge浏览器多窗口Alt+Tab组合键切换
    [转]Windows上的valgrinddeleaker
    在qt项目中编译错误error ::clock未声明
    使用单元测试驱动开发的方式编写flask应用
  • 原文地址:https://www.cnblogs.com/tinyphp/p/5367420.html
Copyright © 2011-2022 走看看