line-height:150%和line-height:1.5的区别,line-height150%

1,行高的定义

line-height:150%和line-height:1.5的区别

 

“%”:是继承父级元素的距离;

“无单位”:是子元素计算各自的行距离     eg:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
  body{
   font-size:14px;
   line-height:150%;
   background: black;
  }
  p{
   font-size:26px;
   background: gray;
   color: white;
  }
 </style>
</head>
<body>
 <p>你好!</p>
</body>
</html>

 效果如图:

威尼斯人线上娱乐 1
1、当line-height:XX%时: body{font-size:14px;line-height:150%;}
p{font-size:26px;} 结果就是: body{line-height:21px;}//14*150%=21
p{line-heigt:21px;}//继承父元素       eg:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
  body{
   font-size:14px;
   line-height:1.5;
   background: black;
  }
  p{
   font-size:26px;
   background: gray;
   color: white;
  }
 </style>
</head>
<body>
 <p>你好!</p>
</body>
</html>

  效果如图:

威尼斯人线上娱乐 2
2、当line-height:X.X时: body{font-size:14px;line-height:1.5;}
p{font-size:26px;} 结果就是: body{line-height:21px;}//14*1.5=21
p{line-height:39px;}//26*1.5=39

http://www.bkjia.com/Javascript/1069119.htmlwww.bkjia.comtruehttp://www.bkjia.com/Javascript/1069119.htmlTechArticleline-height:150%和line-height:1.5的区别,line-height150%
line-height:150%和line-height:1.5的区别 “%”:是继承父级元素的距离;
“无单位”:是子元素计算各自…

行高是指行间的距离,也就是基线之间的距离,而只有两行文字才会存在两个基线,那么为什么单行文字还具有行高?我们怀着这个疑问往下看。

2,行内框盒子模型

<p>这是一个单行文字,这里有一个<span>内容区</span>标签。</p>

威尼斯人线上娱乐 3

图一

“内容区域” (content
area)是围绕文字的盒子,我们可以看做是鼠标在选中文字区域的大小,它的大小只和font-size有关,可以看做是图一中的文字被鼠标选中的区域,也就是选中的“个单行文字”的区域。

“内联盒子”(inline
boxs)不会让文字成块显示,而是排列成一行。由内联元素包裹的文字如span标签包裹的“内容区”,可以称之为“内联盒子”,而没有内联元素包裹的部分,我们可以看做是“匿名内联盒子”。“内联盒子”可以看做图一中span标签内的“内容区”区域,而“匿名内联盒子”可以看做红色虚线包裹的内容。

“行框盒子”(line
boxs),每一行都是一个“行框盒子”,行框盒子由一个个匿名和非匿名内联盒子组成。可以看做图一中最外面红色实线包裹的区域。

“包含盒子”(containing box),此盒子由一个个“行框盒子组成”。

3,行高的高度机理

行高影响无处不在,即便是单行文字也不例外。

单行文字的高度表现只是受到line-height的影响,而主要是受到内容区域和行间距的影响。

单行文字行高:

line-height = 内容区域高度 + 行间距高度

那么:

行间距 = line-height – 内容区域高度

我们平常看到的文字上部与“行框盒子”的顶部之间的距离就是半行间距。

4,行高的单位

(1),number

例如:

line-height:2;

font-size:20px;

那么此时文字占据的高度为20*2=40px

(2),length

例如:

font-size:20px;

line-height:20px;

line-height:2em;

line-height:3rem;

line-height:3pt;

以px为单位有一个固定的值,而其余的需要结合浏览器默认尺寸进行换算或者body的font-size属性来计算。

(3),%

<div>

    文字文字

    <p>这是p标签</p>

</div>

威尼斯人线上娱乐,div{

font-size:20px;

line-height:150%;

}

p{

font-size:50px;

}

那么“文字文字”的行高为30px,内部p标签行高也是30px,而不会根据子元素重新计算行高。

意思就是说当设置行高为百分比的时候,父元素根据font-size计算的行高继承给子元素,子元素不会根据font-size重装计算行高,一般不常用。

(4),normal