css———详解height与line_height_婳祎_前端开发者

定义

height指的是块级别元素的高度;

line-height指的是元素内容的高度。

height指的是块级别元素的高度;

line-height指的是元素内容的高度。

 

height和line-height的联系

height和line-height的联系

css中起高度作用的应该就是height以及line-height。height是用来设置元素的高度,比如img的高度、div的高度等。

css中起高度作用的应该就是height以及line-height。height是用来设置元素的高度,比如img的高度、div的高度等。

如果不设置div的高度时,是div的font-size决定了div的高度还是line-weight的值?

测试一

css:
    .test1{font-size:20px; text-align:center;line-height:0; border:1px solid black; background: red;} 
html:
    <div class="test1">测试</div>
CSS:
    .test1{font-size:20px; text-align:center;line-height:0; border:1px solid black; background: red;} 
html:
    <div class="test1">测试</div>

CSS:
.test1{font-size:20px; text-align:center;line-height:0; border:1px solid black; background: red;}
html:
<div class=”test1″></div>

结果:

 

 


 

测试二

 

CSS:
    .test2{font-size:1px; text-align:center;line-height:20px; border:1px solid black; background:red;}
html:
      <div class="test2">测试</div>
CSS:
    .test2{font-size:1px; text-align:center;line-height:20px; border:1px solid black; background:red;}
html:
      <div class="test2">测试</div>

CSS:
.test2{font-size:1px; text-align:center;line-height:20px; border:1px solid black; background:red;}
html:
<div class=”test2″></div>

结果:

 


 

结论:在没有设置div的height属性时,div的高度根据line-height的大小而变化,且文字垂直居中。

在没有设置div的height属性时,div的高度根据line-height的大小而变化,且文字垂直居中。

 

div的height与line-height的大小关系不同时,会有什么显示结果呢?

 

(1)height = line-height时
在这里插入图片描述
(2)height>line-height时
在这里插入图片描述
(3)height<line-height时
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

» 本文来自:前端开发者 » 《css———详解height与line_height_婳祎_前端开发者》
» 本文链接地址:https://www.rokub.com/73799.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!