最近在做CSS界面时经常遇到line-height和height这两个属性，一直没搞很明白，今天静下心来好好网上查阅了一下，算是有所领悟。https://blog.csdn.net/a2013126370/article/details/82786681这个博主写的很不错，至少让我对line-height和height的理解更深刻了，值得借鉴。
一、一些基本概念
1.行高是指文本行基线间的垂直距离（也叫行距）
2.行间距是上行的底线和下一行顶线之间的距离
我个人理解，可以得出以下结论：
1. 在没有设置div的height属性时，div的高度是根据line-height的大小而变化，并不受font-size的影响。
2. height是用来设置元素的高度，比如img的高度、div的高度等。line-height 属性是用来设置行距（行高），两者并不是同一个概念。
二、代码实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>sdds</title>
<style>
html,body,div{
margin: 0;
padding: 0;
border: 0;
}
.bg0{
width: 200px;
height: 45px;
line-height: 100px;
background-color: red;
font-size: 10px;
word-wrap:break-word;
}
.bg1{
width: 200px;
height: 10px;
background-color: green;
}
.bg2{
width: 200px;
height: 45px;
background-color: yellow;
}
.bg3{
width: 200px;
height: 55px;
background-color: blue;
}
</style>
</head> <body>
<div class="bg0">上海大学SHU(Shanghai University)是一所211大学</div>
<div class="bg1"></div>
<div class="bg2"></div>
<div class="bg3"></div>
</body>
</html>
运行结果：
结论：可以看出，黄色背景div和蓝色背景div的height加起来就是类名为bg0的div的所设置的line-height=100px，而第一部分红色div设置的height=45px，是line-height减去fontsize后在除以2得到的，即(100-10)/2=45px。
CSS——对height和line-height的理解的更多相关文章
-
深入了解css的行高Line Height属性
什么是行间距? 古时候我们使用印刷机来出来文字.印刷出来的每个字,都位于独立的一个块中. 行间距,即传说中控制两行文字垂直距离的东东.在CSS中,line-height被用来控制行与行之间垂直距离. ...
-
真正的能理解CSS中的line-height，height与line-height
https://blog.csdn.net/a2013126370/article/details/82786681 在最近的项目中,常常用到line-height,只是简单的理解为行高但并没有深层次 ...
-
css height:100%和height:auto的区别
css height:100%和height:auto的区别 height:auto,是指根据块内内容自动调节高度.height:100%,是指其相对父块高度而定义的高度,也就是按照离它最近且有定义高 ...
-
网页上弹出pop窗口实例，(document).height()与$(window).height()的区别
#dvbg{background-color:#666666; position:absolute; z-index:99; left:0; top:0; display:none; width:10 ...
-
height:100%与height：inherit的区别
一.兼容性 首先,inherit这个属性只是在ie8+才支持:100%支持ie6: 二.大多数情况下没有区别 在正常情况下height:100%与height:inherit没有任何区别: 1.父元素 ...
-
height:100%和height:auto的区别
一直不明白height:100%和height:auto的区别,最近在制作前端页面时都用了height:100%;overflow:hidden; ,可是有些浏览器出现莫名的奇妙的问题,但换成heig ...
-
$(document).height()、$(";body";).height()、$(window).height()区别和联系
前言:在此以高度为示例,宽度问题可类推.在移动端开发中,经常遇到需要把一块内容定位于底部的情况,当页面内容不满一屏时,需要设为fixed,而超过 一屏时,需要设为static随页面顶到底部,此时就需要 ...
-
$(window).height() 和 $(document).height()的区别
$(window).height() 和 $(document).height()的区别 $(window).height()代表了当前可见区域的大小,$(document).height()则代表了 ...
-
height与line-height的深入理解及应用
转载:原文地址:http://www.zhangxinxu.com/wordpress/?p=384 一.前言 前两天在腾讯ISD团队博客上看到一篇翻译的文章"深入理解css 行高" ...
-
CSS，height:auto和height:100%有什么区别？
auto是随内容的高度而撑开的.100%是根据父级元素的高度来决定的.例如:<div style="height:100px;width:200px;"> <di ...
随机推荐
-
【Python】if __name__ == ";__main__";做了什么？
在Python的很多源文件中,会有这样的语句: if __name__ == '__main__': # script code here 比如有两个源文件A.py和B.py,都有上面的代码:在B.p ...
-
监听页面上的checkbox是否选中
第一种 <!DOCTYPE html> <html> <head> <meta charset='UTF-8'> <title>checke ...
-
命令行工具解析Crash文件,dSYM文件进行符号化
备份 文/爱掏蜂窝的熊(简书作者)原文链接:http://www.jianshu.com/p/0b6f5148dab8著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”. 序 在日常开发 ...
-
编写一个Car类，具有String类型的属性品牌，具有功能drive； 定义其子类Aodi和Benchi，具有属性：价格、型号；具有功能：变速； 定义主类E，在其main方法中分别创建Aodi和Benchi的对象并测试对象的特 性。
package com.hanqi.test; public class Car { //构造一个汽车的属性 private String name; //创建getter和setter方法 publ ...
-
JDE变量说明
BC Business view columns. Columns that are included in the attached business view. These columns are ...
-
oracle分组查询
分组函数 在分组函数中,如果有一个查找项分组,其他项必须也分组,比如下面的语句会报错,因为sal分组了,而ename没有分组: 1.显示工资最高的员工: 2.显示所有员工的平均工资: 2.1使用系统函 ...
-
[powershell]解决Win7SP1 powershell底色变成黑色
删除补丁KB3191566 重新安装: https://docs.microsoft.com/en-us/powershell/scripting/install/installing-windows ...
-
C++ 模板应用举例_模板实现STL类(堆栈)
//stack集合类是一个简单的堆栈的实现. //这里有两个模板参数,T和size,指定堆栈中的元素类型和堆栈中项数的最大值. //push 和 pop成员函数添加和删除堆栈中的项,并在堆栈底部增加. ...
-
防止atoi函数内存越界
函数形式为: int atoi(const char *nptr); 函数说明: 参数nptr字符串,如果第一个非空格字符不存在或者不是数字也不是正负号则返回零,否则开始做类型转换,之后检测到非 ...
-
Linux下libsvm的安装及简单练习
引文:常常在看paper的时候.就看到svm算法,可是要自己来写真的是难于上青天呀! 所幸有一个libsvm的集成软件包给我们使用,这真的是太好了.以下简介下怎么来使用它吧! LIBSVM是一个集成软 ...