CSS——对height和line-height的理解
最近在做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 ...
随机推荐
- Win2008R2+Apache+PHP+Tomcat配置
一.VC运行库 对于Apache和PHP,在Windows上运行的话都需要对应VC运行库的支持,即Apache.PHP和VC运行库这三者的版本必须相对应,这就会带来很多问题,比如下了较新的Apache ...
- PHP常见问题整理
1. 如何在Windows下配置PHP开发环境? (1)下载并安装Apache,设置服务器的侦听端口.编辑Apache安装目录下的conf子目录中的httpd.conf文件,定位到DocumentRo ...
- 使用RecyclerView设置自定义分割线
在安卓开发中,RecyclerView控件来做一些列表是非常方便的,如何使用在网上很多文章,这次着重来说一下怎么设置自定义分割线: 首先,我们来看一下怎么设置默认的分割线 RecyclerView m ...
- 给新手学习Java的建议
有很多的朋友都在问我一个同样的问题:新手应该如何能学好Java.我做了一个简单的总结,分享给大家: 1-信念:无论你是选择JAVA,C,C#,C++....还是其他的语言编程,信念是第一位,只有相信自 ...
- Springboot中enable注解
这句话可以作为理解springboot自动注入的原理的钥匙:ImportSelector接口的selectImports返回的数组(类的全类名)都会被纳入到spring容器中. 至于spring怎么根 ...
- linux 的基本操作（linux系统的日常管理）
系统的日常管理 笔者在前面介绍的内容都为linux系统基础类的,如果你现在把前面的内容全部很好的掌握了,那最好了.不过笔者要说的是,即使你完全掌握了,你现在还是不能作为一名合格的linux系统管理员的 ...
- SpringBoot介绍
SpringBoot作用:对框架整合做了简化,和分布式集成.pom.xml中的spring-parent中有很多已经集成好的东西,拿来直接用 SpringBoot核心功能: 1.独立运行的Spring ...
- Feign 客户端源码解析
Feign的使用非常简单,增加如下配置之后,便可以使用Feign进行调用.非常简单是不是.主要的工作由Feign框架完成.业务代码只提供了一个Interface, 然后由Feign动态生成代理类来实现 ...
- javascript call apply
call 和 apply 都是为了改变某个函数运行时的 context 即上下文而存在的,换句话说,就是为了改变函数体内部 this 的指向.因为 JavaScript 的函数存在「定义时上下文」和「 ...
- [学习] 从 函数式编程 到 lambda演算 到 函数的本质 到 组合子逻辑
函数式编程 阮一峰 <函数式编程初探>,阮一峰是<黑客与画家>的译者. wiki <函数编程语言> 一本好书,<计算机程序的构造与解释>有讲到schem ...