首页 > 其他 > 详细

line-height的高度机理

时间:2018-07-13 14:30:49      阅读:126      评论:0      收藏:0      [点我收藏+]

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>

 

line-height的高度机理

原文:https://www.cnblogs.com/BlogRegisterboby/p/9304606.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!