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的高度机理的更多相关文章

  1. html的height:100%;高度是多少

    html的height:100%;高度是多少 html设置height:100%;表示一屏高度,类似于100vh.未设置则根据子元素的高度来自适应高.在实际应用中,设置页面高度为1屏幕高度通常设置: ...

  2. 使用 <embed> 标签显示 flash文件(swf)格式 ,如何设置 width 和 height 宽度,高度.

    1. embed 标签 支持  .swf 格式.     .flv 的不支持. 2. 通常情况下, 网站中上传 多个 flash文件. 它的默认大小是不一样的. 而且 可以 宽度 大于 高度(横向的) ...

  3. [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 ...

  4. Div Height设置高度后不能自适应

    解决方法$("#div1").css("height", "");

  5. div height 自适应高度 占满剩余高度的方法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. [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 ...

  7. 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

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

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

  9. 浅析CSS中的BFC和IFC

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

随机推荐

  1. C++11 新特性之operator "" xxx

    从C++11开始,我们可以使用以下形式通过常量字符串构造自定义类型, 比如: class Person { public: Person(const std::string& name): _ ...

  2. gitlab自动备份和定时删除

    GitLab数据手动备份1.GitLab默认备份目录为/var/opt/gitlab/backups,可以修改/etc/gitlab/gitlab.rb里面的默认存放备份文件目录,这里使用默认备份目录 ...

  3. leetcode148. Sort List

    和数组里面的归并排序相同,用两个指针分别对应low high,递归进行归并排序然后merge把两个链表合在一起 /** * Definition for singly-linked list. * s ...

  4. IDEA开发工具的学习

    1.设置jdk的版本 ,快捷键:ctrl + shirt +alt + s 打开项目的设置,选择Project 进行 jdk版本的设置. 2.鼠标移到项目上,右键,Show in Explorer 定 ...

  5. TCP 数据传输工具类

    package com.ivchat.test.propertysystem.util; import java.io.BufferedReader;import java.io.ByteArrayO ...

  6. 67.web--手机端兼容性问题

    H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=device-width,initia ...

  7. FB面经Prepare: Find Longest Path in a Multi-Tree

    给的多叉树, 找这颗树里面最长的路径长度 解法就是在子树里面找最大的两个(或一个,如果只有一个子树的话)高度加起来. 对于每一个treenode, 维护它的最高的高度和第二高的高度,经过该点的最大路径 ...

  8. Qt QLineEdit 漂亮的搜索框 && 密码模式 && 格式化输入 && 提示文字 && 选择内容并移动 && 清除全部输入

    先上一个漂亮的搜索框效果图, 输入搜索文本效果, 点击搜索图标效果: //实现代码 void MainWindow::iniLineEdit() { ui->lineEdit->setPl ...

  9. cookiejar

    referer:https://www.cnblogs.com/why957/p/9297779.html文章介绍了四种模拟登陆方法 yield Request()可以将一个新的请求返回给爬虫执行 在 ...

  10. # 2017-2018-2 20155228 《信息安全系统设计原理》 使用VirtualStudio2008创建和调用静态库和使用VirtualC++6.0创建和调用动态库

    使用virtual c++ 6.0创建和调用动态库 不得不说一下关于环境的问题 只要我打一个响指,一半的安装在win7上的VC6.0都会因为兼容性问题直接崩掉 懒得研究怎么解决兼容性的问题了,直接开一 ...