line-height的高度机理
1.元素高度从何而来?是由里面的文字撑开的?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{margin: 0;padding: 0;}
.test1{font-size: 0;line-height: 36px;border: 1px solid red;background: gray;}
.test2{font-size: 36px;line-height: 0;border: 1px solid red;background: gray;}
</style>
</head>
<body>
<div class="test1">测试</div>
<br>
<div class="test2">测试</div>
<!-- 从效果图中可看出,元素高度是由line-height决定的 -->
</body>
</html>
2.如果行框盒子里面有多个不同高度的内联盒子?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
*{margin: 0;padding: 0;}
.em{line-height: 80px;}
</style>
</head>
<body>
<div id="app">
这是一行普通的文字,这里有个<em class="em">em</em>标签。
</div>
<!-- 如果行框盒子里面有多个不同行高的内联盒子?
原则上是由最高的那个内联盒子的高度决定的,但如vertical-align这样的属性可能会改变行框盒子高度
-->
</body>
</html>
3.父级元素line-height:1.5与line-height:150%/1.5em的区别
在计算上无差别,都是fontSize*1.5,但实际上有区别
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
*{margin: 0;padding: 0;}
.app{line-height: 1.5}
/* 当父级元素line-height:1.5时,子元素的高度是用自己的fontSize*1.5得到自己的高度 */
.val{font-size: 60px}
</style>
</head>
<body>
<div class="app">
<p>line-height:1.5</p>
<p class="val">我的font-size为60px</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
*{margin: 0;padding: 0;}
.app{line-height: 150%}
/* 当父级元素line-height:150时,子元素的高度是用父级的fontSize*1.5得到自己的高度 */
.val{font-size: 60px}
</style>
</head>
<body>
<div class="app">
<p>line-height:1.5</p>
<p class="val">我的font-size为60px</p>
</div>
</body>
</html>
line-height的高度机理的更多相关文章
- html的height:100%;高度是多少
html的height:100%;高度是多少 html设置height:100%;表示一屏高度,类似于100vh.未设置则根据子元素的高度来自适应高.在实际应用中,设置页面高度为1屏幕高度通常设置: ...
- 使用 <embed> 标签显示 flash文件(swf)格式 ,如何设置 width 和 height 宽度,高度.
1. embed 标签 支持 .swf 格式. .flv 的不支持. 2. 通常情况下, 网站中上传 多个 flash文件. 它的默认大小是不一样的. 而且 可以 宽度 大于 高度(横向的) ...
- [LeetCode] Queue Reconstruction by Height 根据高度重建队列
Suppose you have a random list of people standing in a queue. Each person is described by a pair of ...
- Div Height设置高度后不能自适应
解决方法$("#div1").css("height", "");
- div height 自适应高度 占满剩余高度的方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- [LeetCode] 406. Queue Reconstruction by Height 根据高度重建队列
Suppose you have a random list of people standing in a queue. Each person is described by a pair of ...
- 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
- 深入了解css的行高Line Height属性
什么是行间距? 古时候我们使用印刷机来出来文字.印刷出来的每个字,都位于独立的一个块中. 行间距,即传说中控制两行文字垂直距离的东东.在CSS中,line-height被用来控制行与行之间垂直距离. ...
- 浅析CSS中的BFC和IFC
1. 为什么会有BFC和IFC 首先要先了解两个概念:Box和formatting context: Box:CSS渲染的时候是以Box作为渲染的基本单位.Box的类型由元素的类型和display属性 ...
随机推荐
- IAB303 Data Analytics Assessment Task
Assessment TaskIAB303 Data Analyticsfor Business InsightSemester I 2019Assessment 2 – Data Analytics ...
- c++ 第一次实验
实验内容: 2-28:实现一个简单的菜单程序,运行时显示“Menu:A(dd) D(elete) S(ort) Q(uit),Selete one:”提示用户输入.A表示增加,D表示删除, S表示排序 ...
- Docker 实战(二)——centos7镜像安装nginx,将安装nginx的centos容器生成新的镜像,并导出
Docker centos7镜像安装nginx 1.安装docker 使用yum安装docker不再重复:见 Linux常用命令 2.pull centos 1)在docker仓库中搜索centos ...
- JMeter压测基础(三)——Mysql数据库
JMeter压测基础(三)——Mysql数据库 环境准备 mysql驱动 JMeter jdbc配置 JMeter jdbc请求 1.下载mysql驱动:mysql-connector-java.ja ...
- 有几个PAT
描述 字符串APPAPT中包含了两个单词“PAT”,其中第一个PAT是第2位(P),第4位(A),第6位(T):第二个PAT是第3位(P),第4位(A),第6位(T). 现给定字符串,问一共可以形成多 ...
- 异步请求取得json数据
一.异步请求 在之前我们请求数据的时候都是整个页面全部刷新了一次,也就是每次请求都会重新请求所有的资源.但是在很多时候不需要页面全部刷新,仅仅是需要页面的局部数据刷新即可,此时需要发送异步请求来实现这 ...
- [js]展开运算符
function f(...args){ console.log(args); } f(1,2,3,4,5) [...args] = [1,2,3,4] function f(...args){ co ...
- Java 基础 IO流之序列化
一,前言 在前面的IO中,我们都是讲数据以字符串的形式保存.能不能将一个数组保存到文件呢,当取出数据时也是一个数组,如果能够实现那就完美了.我们都知道比较通用的有JSON格式的序列化,那java中也有 ...
- [INS-40724] No locally defined network interface matches the SCAN subnet.
环境如下 OS:AIX 7.1 DB:11.2.0.4 2节点RAC 报错信息 在安装11.2.0.4 RAC的时候报如下错误 INS-40724] No locally defined networ ...
- eclipse myeclipse中的一些配置
1.显示.setting 点击三角号 选择customsize view 取消.*resources myeclipse如何更改项目名 点击项目名->alt+enter(properties)