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 ...
随机推荐
- String 源码探究
起因:忽然想到平时用的HashMap 当key是字符串的时候为什么总可以覆盖,然后看了String的源码发现: private final char value[]; private int hash ...
- BackboneJS 源码注释
Backbone 作者在源码中做了很好的注释,这里只是锦上添花,补充一些个人的理解而已. // Backbone.js 1.2.3 // (c) 2010-2015 Jeremy Ashkenas, ...
- 关于ping地址的几个意义
1.ping 127.0.0.1 判断电脑的tcp/ip协议栈有没有问题 2.ping 本机ip 判断电脑的网卡驱动有没有问题 3.ping 网关 判断数据是否可以到达路由 4.ping www.ba ...
- java.lang.Exception: No tests found matching [{ExactMatcher:fDisplayName=test]解决办法
在进行简单的Junit单元测试时,测试一直报错: 先来看一下我的单元测试类: import org.junit.Test; import org.junit.runner.RunWith; impor ...
- GetLastError获取到错误代码的含义
在写win32的时候我们会用到GetLastError()函数来获取程序错误信息,那我们如何从返回的数字得到错误信息. 这里推荐一个博客,总结了所以返回数字的错误信息: http://blog.csd ...
- vue的数据绑定和组件化
组件:就是自定义标签, 也是Vue的实例对象; 组件好处:就像工作分工,函数封装等 组件分为全局组件和局部组件: 全局组件,在Vue身上的组件,所有的vue挂载的元素内都可以使用:正是因为这一点,co ...
- HashSet的底层
今天看博客,发现有个哥哥写到 HashSet的底层是数组结构,有点懵逼,不是HashMap吗怎么成数组了? 遂去查了下源码: 得以下结论: HashSet底层是 HashMap,其元素是内部map的k ...
- ajax方式提交表单数据并判断当前注册用户是否存在
项目的目录结构 源代码: regservlet.java package register; import java.io.IOException; import java.io.PrintWrite ...
- 如何使用onclick方式添加多个事件回调函数
通过给onclcik包裹一个函数进行上下文的切换与参数的传递: function addClcikEvent(el, fn){ if(el.onclick){ var _back = el.oncli ...
- python语法_变量及命名规则
变量:存储信息的,日后被调用,修改操作 常量:固定不变的量,字母大写 变量命名规则: 1 有字母,数字以及下划线等符号组成 2 区分大小写 3 不能使用数字开头,不能含有特殊字符和空格 4 不能使用 ...