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 ...
随机推荐
- nginx 内置变量
http://blog.sina.com.cn/s/articlelist_1834459124_1_1.html nginx内置变量杂谈 http://nginx.org/en/docs/http ...
- 定时 回收 CentOS 系统 内存
#!/bin/bash LIMIT= LOG_FILE="/data/logs/timing_dropcaches.log" #定时清理系统内存 #https://blog.csd ...
- 谈一谈 MPU6050 姿态融合（转）
姿态角(Euler角)pitch yaw roll飞行器的姿态角并不是指哪个角度,是三个角度的统称.它们是:俯仰.滚转.偏航.你可以想象是飞机围绕XYZ三个轴分别转动形成的夹角. 地面坐标系(eart ...
- Centos下普通用户设置sudo权限
若执行sudo命令的用户没有sodu权限,则会报以下错误 violet is not in the sudoers file.This incident will be reported 若想让vio ...
- asp.net mvc 路由检测工具
初学mvc,路由搞不清楚,可以通过一款插件 查看匹配的路由. 工具名<RouteDebugger> 可以在nuget中查询RouteDebugger后,安装.或者在控制台进行安装: pm& ...
- Nestjs 链接mysql
文档 下插件 λ yarn add @nestjs/typeorm typeorm mysql 创建 cats模块, 控制器,service λ nest g mo cats λ nest g co ...
- js设计模式（三）---代理模式
代理模式: 代理模式是为一个对象提供一个代理用品或占位符,以便控制对他的访问. 实现: 在 Web开发中,图片预加载是一种常用的技术,如果直接给某个 img 标签节点设置 src 属性,由于图片过大或 ...
- stm8 iar开发
1.一份官方库基本是通用的. 2.尽量依托cubex for stm8 依托理由: 1.不同型号,不同后缀的芯片,将会被配置不同的外设.比如stm8s103k3系列可能有的是串口1,但是stm8s10 ...
- H/s：哈希率单位转换
哈系率说明 挖矿能力是通过寻找矿工可以执行的地块的尝试次数来衡量的.每次尝试都包括创建一个唯一的块候选项,并通过SHA-256d(一种加密哈希函数)创建块候选项的摘要.或者,简而言之,哈希.由于这是一 ...
- 图->连通性->关节点和重连通分量
文字描述 相关定义:假若在删去顶点v以及和v相关联的各边之后,将图的一个连通分量分割成两个或两个以上的连通分量,则称顶点v为该图的一个关节点.一个没有关节点的连通图称为重连通图. 在重连通图上,任意一 ...