zoukankan      html  css  js  c++  java
  • 设置line-height:1.5和line-height:150%或者line-height:150px的区别

    直接正题:

    看一下line-height可能的值:

       

    其实可以分为两类:

      (1)不带单位的(如line-height:1.5),这种是推荐使用的;

      (2)带单位的(如line-heigth:30px/1.5em/150%);

    这两种有什么区别呢?

    其实只要记住:

    一. 设置的如果是不带单位的(第一种),那它就是“缩放因子”,后代元素会继承这个缩放因子而不是继承父级的计算后的值,例如:

    1 <div style="line-height:1.5;font-size:12px; background-color: red;  200px; margin:0 auto;">
    2     <span>父元素内容</span>
    3     <div style="font-size:30px; background-color: #1CADB7;">
    4         <span>子元素内容</span>
    5     </div>
    6 </div>

    得到的结果如图:

    此时红色部分的高是:12*1.5=18px,而子元素的高是:30*1.5=45px; 

    二. 设置的如果是带单位的 如果是 "px" 那就是死值,子元素继承父元素的 “死值” ,如果是 “%或者em” 那就是父级先于font-size相乘得到具体的 “死值”,子元素再继承这个死值,例如:

    1 <div style="line-height:150%;font-size:12px; background-color: red;  200px; margin:0 auto;">
    2     <span>父元素内容</span>
    3     <div style="font-size:30px; background-color: #1CADB7;">
    4         <span>子元素内容</span>
    5     </div>
    6 </div>

    得到的结果如图:

    此时红色部分的高是:12*150%=18px, 而子元素的高是:继承父级的18px, 而且还错位了。所以如果子元素设置的字体 大于 了父元素,就有可能出现错位等问题,这也是为什么推荐使用第一种方式。

  • 相关阅读:
    COJ 1002 WZJ的数据结构(二)(splay模板)
    生成网络流图
    最小费用最大流MCMF zkw费用流
    COJ 2003 选根 (树的重心)
    最小费用最大流MCMF 最小增广
    PDO 基础知识
    使 用 Jquery 全选+下拉+单选+事件+挂事件
    搜 房 网 站 设 计 练 习
    百分比进度条
    在PHP系统里连接MySQL 数据访问,+ + + + + 数据删除
  • 原文地址:https://www.cnblogs.com/zhangkunweb/p/6141053.html
Copyright © 2011-2022 走看看