父元素设置ling-height;子元素继承父元素的line-height

1.ling-height:固定像素

   body{
font-size:20px;
line-height: 24px;
}
p{
font-size: 16px;
}

此时p元素的line-height = 24px

2.line-height: 百分比

   body{
font-size:20px;
line-height: 200%;
}
p{
font-size: 16px;
}

此时p元素的 行高是body 计算之后的。line-height = 200% * 20 = 40px;

3.line-height:数值

body{
font-size:20px;
line-height: 1.5;
}
p{
font-size: 16px;
}

此时页面上的 p 原素的行高是 1.5*16px=24px;

4、line-height: em

   body{
font-size:20px;
line-height: 1.5em;
}
p{
font-size: 16px;
}

此时p元素的 行高是body 计算之后的。line-height =1.5 * 20 = 24px;

line-height继承的更多相关文章

  1. 剖析width、height继承

    在CSS这个一切皆为框的世界里,我们今天再来探究探究width与height. 我靠,width与height有什么好探究的,不就是设定元素的宽.高吗?大不了还要区分标准盒子模型和IE盒子模型的区别, ...

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

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

  3. How to Take Control of Your Line Height in Outlook.com

    Reference to: http://www.emailonacid.com/blog/details/C13/line_height_and_outlook.com

  4. height与line-height

    1.网页的所有元素可以分为块元素和行元素.一行文字所在的一个逻辑区域是行元素,其他的元素就都是块元素line-height只针对行元素,height针对其他所有元素 2. width,height对于 ...

  5. JavaScript面向对象编程指南(六) 继承

    第6章 继承 6.1 原型链 6.1.1原型链示例 原型链法:Child.prototype=new Parent(); <script> function Shape(){ this.n ...

  6. Java编程的逻辑 (15) - 初识继承和多态

    本系列文章经补充和完善,已修订整理成书<Java编程的逻辑>,由机械工业出版社华章分社出版,于2018年1月上市热销,读者好评如潮!各大网店和书店有售,欢迎购买,京东自营链接:http:/ ...

  7. 真正的能理解CSS中的line-height,height与line-height

    https://blog.csdn.net/a2013126370/article/details/82786681 在最近的项目中,常常用到line-height,只是简单的理解为行高但并没有深层次 ...

  8. CSS3与页面布局学习总结(二)——Box Model、边距折叠、内联与块标签、CSSReset

    一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...

  9. CSS学习笔记——视觉格式化模型 visual formatting model

    CSS 视觉格式化模型(visual formatting model)是用来处理文档并将它显示在视觉媒体上的机制.他有一套既定的规则(也就是W3C规范),规定了浏览器该怎么处理每一个盒子.以下内容翻 ...

  10. 浅析CSS中的BFC和IFC

    1. 为什么会有BFC和IFC 首先要先了解两个概念:Box和formatting context: Box:CSS渲染的时候是以Box作为渲染的基本单位.Box的类型由元素的类型和display属性 ...

随机推荐

  1. 题解 P1017 【进制转换】

    我赶jio这个题难道是让我们写快写? 不管了,赶紧把咕咕咕了一万年的题解写出来. 这个题就是考察负进制和在mod意义下的除法运算的基础运算. (其实也没多大问题) 首先我们先假设一个原始数据\(num ...

  2. 测开之路四十五:Django之最小程序

    安装Django库 Django最小程序 import sysfrom django.conf.urls import urlfrom django.conf import settingsfrom ...

  3. 微众银行c++选择题后记

    一个类的成员可以有:另一个类的对象,类的自身指针,自身类对象的引用(私有的如何初始化呢,所以不行,换成静态的可以),自身类对象(构造时如何初始化呢?) class A{ public: A(){} A ...

  4. 如何为元组中的每个元素命名,提高程序可读性---Python数据结构与算法相关问题与解决技巧

    实际案例: 学生信息系统中,数据为固定格式:(名字,年龄,性别,邮箱) ,通常使用元组来存储 使用优点: 使用元组最大的优点在于节省空间,存储相同的数据,使用元组比使用字典,空间小很多 使用缺点: 访 ...

  5. javaIO流(一)--File类的基本使用

    一.File文件操作类 在java语言中提供有对于文件操作系统的支持,这个支持就在java.io.File类中进行了定义,也就是说在整个java.io包中File类是唯一一个与文件本身操作有关的类(创 ...

  6. min-element & max_element

    C++ STL之min_element()与max_element()(取容器中的最大最小值) min_element()和max_element 头文件:#include<algorithm& ...

  7. vue - blog开发学习4

    1.新建页面的修改,集成富文本编辑 edit-post.vue(新建和修改都用该组件) <template> <div class="editor"> &l ...

  8. maxim - Android UI压力测试

    项目介绍 项目地址:https://github.com/zhangzhao4444/Maxim 与monkey对比优势: 快 稳:只进行有意义的操作,防误点状态栏,不会乱断网.卸载应用 支持脱机运行 ...

  9. Hadoop本地环境安装

    一.服务器环境 本人用的是阿里云的ECS的入门机器,配置1核2G,1M带宽,搭了个Hadoop单机环境,供参考 Linux发行版本:Centos7 JDK:阿里云镜像市场中选择JDK8 二.安装步骤 ...

  10. tcpdump 与 抓包分析

    在Windows下一般使用WireShark 抓包软件,tcpdump 是 Linux 系统的抓包软件.它可以抓取 TCP/IP 协议族的数据包,支持针对网络层.协议.主机.端口的过滤,并提供 and ...