line-height继承
父元素设置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继承的更多相关文章
- 剖析width、height继承
在CSS这个一切皆为框的世界里,我们今天再来探究探究width与height. 我靠,width与height有什么好探究的,不就是设定元素的宽.高吗?大不了还要区分标准盒子模型和IE盒子模型的区别, ...
- 深入了解css的行高Line Height属性
什么是行间距? 古时候我们使用印刷机来出来文字.印刷出来的每个字,都位于独立的一个块中. 行间距,即传说中控制两行文字垂直距离的东东.在CSS中,line-height被用来控制行与行之间垂直距离. ...
- 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
- height与line-height
1.网页的所有元素可以分为块元素和行元素.一行文字所在的一个逻辑区域是行元素,其他的元素就都是块元素line-height只针对行元素,height针对其他所有元素 2. width,height对于 ...
- JavaScript面向对象编程指南(六) 继承
第6章 继承 6.1 原型链 6.1.1原型链示例 原型链法:Child.prototype=new Parent(); <script> function Shape(){ this.n ...
- Java编程的逻辑 (15) - 初识继承和多态
本系列文章经补充和完善,已修订整理成书<Java编程的逻辑>,由机械工业出版社华章分社出版,于2018年1月上市热销,读者好评如潮!各大网店和书店有售,欢迎购买,京东自营链接:http:/ ...
- 真正的能理解CSS中的line-height,height与line-height
https://blog.csdn.net/a2013126370/article/details/82786681 在最近的项目中,常常用到line-height,只是简单的理解为行高但并没有深层次 ...
- CSS3与页面布局学习总结(二)——Box Model、边距折叠、内联与块标签、CSSReset
一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...
- CSS学习笔记——视觉格式化模型 visual formatting model
CSS 视觉格式化模型(visual formatting model)是用来处理文档并将它显示在视觉媒体上的机制.他有一套既定的规则(也就是W3C规范),规定了浏览器该怎么处理每一个盒子.以下内容翻 ...
- 浅析CSS中的BFC和IFC
1. 为什么会有BFC和IFC 首先要先了解两个概念:Box和formatting context: Box:CSS渲染的时候是以Box作为渲染的基本单位.Box的类型由元素的类型和display属性 ...
随机推荐
- 109、TensorFlow计算张量的值
# 当计算图创建成功时 # 你就可以运行这个计算图,然后生成一个新的张量 # 并且得到这个张量指向的计算图中具体的数值 #这个功能在debug的时候非常有必要 #最简单获得张量具体值的方法是使用Ten ...
- 使用Xftp连接Centos 6.6服务器详细图文教程
这篇文章主要介绍了使用Xftp连接Centos 6.6服务器详细图文教程,本文用详细的图文说明讲解了连接服务器和操作服务器的步骤,适合新手,需要的朋友可以参考下 一,打开Xftp软件(下载地址:Xma ...
- 《单词的减法》state1~state17(第二遍学习记录)
单词的减法(二) 2016.05.18.2016.05.21 state 1 advisory 顾问的,劝告的 anticipate/participate 期望/参加 state 2 applian ...
- 用于拆解和组合PDF中各个对象的shell脚本
拆解脚本 header_start=0 header_len=15 xref_start=$(strings -a -t d $1 | grep -e "\bxref\b" | a ...
- 斯坦福【概率与统计】课程笔记(五):EDA | 箱线图
介绍箱线图之前,需要先介绍若干个其需要的术语 min:整个样本的最小值 max:整个样本的最大值 Range:即整个样本的取值范围,Range = max - min Inter-Quartile R ...
- 2019杭电多校第⑨场B Rikka with Cake (主席树,离散化)
题意: 给定一块n*m的矩形区域,在区域内有若干点,每个顶点发出一条射线,有上下左右四个方向,问矩形被分成了几个区域? 思路: 稍加观察和枚举可以发现,区域数量=射线交点数+1(可以用欧拉定理验证,但 ...
- Windows盘符切换,Dos命令
>>.常用Dos命令 dir 列文件名 deltree 删除目录树 cls 清屏 cd 改变当前目录 copy 拷贝文件 diskcopy 复制磁盘 del 删除文件 format 格式化 ...
- 04-初始mysql语句
本节课先对mysql的基本语法初体验. 操作文件夹(库) 增 create database db1 charset utf8; 查 # 查看当前创建的数据库 show create database ...
- python排序参数key以及lambda函数
首先,lambda格式 lambda x:x+1, 前面的x相当于传入的形参,后面的相当于返回值, 使用起来很简单,只要明白“:”前后的含义即可正确使用. 再来说一下排序等函数中的key,这里以lis ...
- 分批插入数据基于mybatis
DB框架:Mybatis.DataBase:Oracle. ---------------------------------------------------------------------- ...