line-height属性的细节
与大多数CSS属性不同,line-height支持属性值设置为无单位的数字。有无单位在子元素继承属性时有微妙的不同。

语法
line-height: normal | <number> | <length> | <percentage>
normal 根据浏览器决定,一般为1.2。
number 仅指定数字时(无单位),实际行距为字号乘以该数字得出的结果。可以理解为一个系数,子元素仅继承该系数,子元素的真正行距是分别与自身元素字号相乘的计算结果。大多数情况下推荐使用,可以避免一些意外的继承问题。
length 具体的长度,如px/em等。
percentage 百分比,100%与1em相同。

有单位(包括百分比)与无单位之间的区别
有单位时,子元素继承了父元素计算得出的行距;无单位时继承了系数,子元素会分别计算各自行距(推荐使用)。

其实区别就在于继承的问题上。

150%是根据父元素的字体大小计算出行高,并且子元素依然沿用这个计算后的行高(例如30px行高值,而不是按照比例去重新计算)。
而1.5则是根据子元素自己字体的大小去乘以1.5来计算行高。
另,1.5em等也是按照150%的情况来算的。

line-height属性的更多相关文章

  1. 深入了解css的行高Line Height属性

    什么是行间距? 古时候我们使用印刷机来出来文字.印刷出来的每个字,都位于独立的一个块中. 行间距,即传说中控制两行文字垂直距离的东东.在CSS中,line-height被用来控制行与行之间垂直距离. ...

  2. 25.按要求编写一个Java应用程序: (1)编写一个矩形类Rect,包含: 两个属性:矩形的宽width;矩形的高height。 两个构造方法: 1.一个带有两个参数的构造方法,用于将width和height属性初化; 2.一个不带参数的构造方法,将矩形初始化为宽和高都为10。 两个方法: 求矩形面积的方法area() 求矩形周长的方法perimeter() (2)通过继承Rect类编写一个具有

    package zhongqiuzuoye; //自己写的方法 public class Rect { public double width; public double height; Rect( ...

  3. DedeCMS文章页去img图片width和height属性

    方法一:正则匹配去除 打开include/ arc.archives.class.php,查找代码: //设置全局环境变量 $this->Fields['typename'] = $this-& ...

  4. 如何理解VB窗体中的scale类属性及width height属性之间的关系

    如何理解VB窗体中的scale类属性及width height属性之间的关系 VB中的SCALEHIEGT,SCALEWIDTH,与窗体中的WIDTH,HEIGHT的区别及关系是许多VB初学者难以理解 ...

  5. 解决BootstrapTable设置height属性后,表格不对齐的问题

    解决BootstrapTable设置height属性后,表格不对齐的问题 2018年03月06日 09:56:54 nb7474 阅读数 5920     一般在使用BootstrapTable 插件 ...

  6. 使用@property 添加width 和 height 属性

    @property Python内置的@property装饰器就是负责把一个方法变成属性调用的: class Screen(object): def isint(self,px): if not is ...

  7. CSS基础学习(一) 之 line-height 与 height 属性区别

    官方定义: height:定义了了元素的高度.默认情况下,该属性订了 content area(内容区域) 的高度.如果box-sizing属性设置为 border-box,那么height就表示bo ...

  8. 按要求编写一个Java应用程序: (1)编写一个矩形类Rect,包含: 两个属性:矩形的宽width;矩形的高height。 两个构造方法: 1.一个带有两个参数的构造方法,用于将width和height属性初化; 2.一个不带参数的构造方法,将矩形初始化为宽和高都为10。 两个方法: 求矩形面积的方法area() 求矩形周长的方法perimeter() (2)通过继承Rect类编写一个具有确定位

    package com.hanqi.test; public class Rect { ; ; public double getWidth() { return width; } public vo ...

  9. height属性

    高度属性: height:长度值|百分比|auto 最大高度:max-height 最小高度:min-height 说明:设置块级元素和替换元素的内容高度.

  10. CSS中详解height属性

    目录结构: contents structure [+] hight属性值类型一览表 height的%的使用 定义 实例 需要注意的 参考文章 hight属性值类型一览表 value describt ...

随机推荐

  1. PHP面相对象编程-重载、覆盖(重写) 多态、接口

    http://www.ctolib.com/topics-21262.html http://cnn237111.blog.51cto.com/2359144/1284085 http://blog. ...

  2. 各IDE代码自用开头模板

    Pycharm #!/usr/bin/env python # -*- coding: utf-8 -*- # @version : 1.0 # @Time : ${DATE} ${TIME} # @ ...

  3. 一看就懂-Docker容器化

    一.Docker简介 1.1 什么是docker docker的英文意思是 码头工人,意思就是搬运东西的意思,其实这和docker的特点是一样的,docker提供的就是一种容器化搬运东西(我们的软件. ...

  4. Spring Boot 2.0 教程 | 快速集成整合消息中间件 Kafka

    欢迎关注个人微信公众号: 小哈学Java, 每日推送 Java 领域干货文章,关注即免费无套路附送 100G 海量学习.面试资源哟!! 个人网站: https://www.exception.site ...

  5. 【基准测试】JMH 简单入门

    JMH 简单入门 什么是 JMH JMH 是 Java Microbenchmark Harness 的缩写.中文意思大致是 "JAVA 微基准测试套件".首先先明白什么是&quo ...

  6. Taro框架下qq小程序开发体验

    qq小程序发布了,作为第一批体验者 .还是发现了和微信小程序很多不同的地方. 最新的小程序我这里都是用Taro开发的,体验较为不错.数据管理用的是redux.JS用的ES6加async等. 微信小程序 ...

  7. python科学计算与可视化视频教程

    目录: 下载链接:https://www.yinxiangit.com/616.html 第一单元TVTK入门-1.mp4第一单元TVTK入门-2.mp4第一单元TVTK入门-3.mp4 第一单元TV ...

  8. Docker详解(二)

    目录 1.Docker常用命令 1.1 镜像命令 1.2 容器命令 1.2.1 常用的容器命令 1.2.2 重要的容器命令 序言:上一章我们初步介绍了一下Docker的概念,那么这次我们着手于Dock ...

  9. FreeSql (十二)更新数据时指定列

    var connstr = "Data Source=127.0.0.1;Port=3306;User ID=root;Password=root;" + "Initia ...

  10. Springboot+Shiro+Mybatis+mysql

    一 .shiro框架 Shiro是Apache 的一个强大且易用的Java安全框架,执行身份验证.授权.密码学和会话管理.Shiro 主要分为两个部分就是认证和授权两部分 1.Subject代表了当前 ...