父元素设置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. [CSP-S模拟测试]:physics(二维前缀和+二分+剪枝)

    题目传送门(内部题26) 输入格式 第一行有$3$个整数$n,m,q$.然后有$n$行,每行有一个长度为$m$的字符串,$+$表示正电粒子,$-$表示负电粒子.然后有$q$行,每行$2$个整数$x,y ...

  2. flex布局滚动问题,子元素无法全部显示的解决办法

    flex布局使用起来非常方便,对于水平垂直居中的需求,很容易就能实现.但是前不久,在做全屏弹窗遮罩登录的时候,遇到了flex布局滚动的一个问题,在此记录一下. 问题重现 理想情况下,当然是下面的状态, ...

  3. mysql联合查询sql优化

    我们在使用mysql数据库时,经常会使用到mysql的联合查询,联合查询分为内连接和外连接,内连接查询结果是联合的表都存在匹配才会有结果,外连接则根据驱动表是否存在匹配来生成结果集. 这里使用mysq ...

  4. stl源码为什么要大量使用typedef?

    SGI源码download,<stl源码剖析>里展示了vector的部分源码: template <class T, class Alloc = alloc> class ve ...

  5. Linux.中断处理.入口x86平台entry_32.S

    Linux.中断处理.入口x86平台entry_32.S Linux.中断处理.入口x86平台entry_32.S 在保护模式下处理器是通过中断号和IDTR找到中断处理程序的入口地址的.IDTR存的是 ...

  6. vscode 常用命令行

    Ctrl+Shift+P:  打开命令面板 打开一个新窗口: Ctrl+Shift+N  关闭窗口: Ctrl+Shift+W 新建文件 Ctrl+N 代码行缩进 Ctrl+[ . Ctrl+] 上下 ...

  7. 《零基础学习Python制作ArcGIS自定义工具》课程简介

    Python for ArcGIS Python for ArcGIS是借助Python语言实现ArcGIS自动化行为的综合,它不止是如课程标题所述的“制作ArcGIS自定义工具”,还包括使用Pyth ...

  8. wireshark 识别http的标准

    使用route add 本机ip 255.255.255.255 网关ip metric 1 的方式 会使访问本机ip的连接发送到局域网内,这样wireshark就可以抓取到 但有一点需要注意 如果本 ...

  9. kubernetes容器集群管理部署master节点组件

    集群部署获取k8s二进制包 [root@master ~]# wget https://dl.k8s.io/v1.15.0/kubernetes-server-linux-amd64.tar.gz [ ...

  10. L2Dwidget

    只需要在[页首html代码]中引入L2Dwidget.js即可.<!-- 右下角live2d效果 --> <script src="https://eqcn.ajz.mie ...