真正的能理解CSS中的line-height,height与line-height
https://blog.csdn.net/a2013126370/article/details/82786681
在最近的项目中,常常用到line-height,只是简单的理解为行高但并没有深层次的理解,致使不能达到信手拈来的感觉。在此做一下总结,一是更深层次的了解什么是line-height,二是比较height与line-height的区别。
基本概念
行高与行距从字面的意思是非常容易理解的,但是对布局和样式来说,我们应该更深入的理解各个属性之间的关系,比如line-height与font-size存在什么关系呢,line-height与所属元素的height又有什么联系呢?。好了,带着疑问,我们一同探究。
行高是指文本行基线间的垂直距离。 基线(base line)并不是汉字文字的下端沿,而是英文字母“x”的下端沿。下图中两条红线之间的距离就是行高,上行的底线和下一行顶线之间的距离就是行距,而同一行顶线和底线之间的距离是font-size的大小,行距的一半是半行距。
从上图我们就可以看出,行距、font-size与line-height之间的关系了吧。接下来进一步来看看这三者关系
当font-size等于line-height时,行距 = font-size - line-height = 0;而当font-size大于line-height时,则会出现行距为负值,则两行重叠,如下图:
关于CSS boxes的四种类型(containing boxes、inline boxes、line boxes、content area)和line-height五种取值方法(line-height:normal;、line-height:inherit;、line-height:120%;、line-height:25px;、line-height:1.2)。参见以下资料:
深入了解css的行高Line Height属性
[学习笔记] css中的line-height
接下来将讲一讲height和line-height的联系
CSS中起高度作用的应该就是height以及line-height。height是用来设置元素的高度,比如img的高度、div的高度等。以一个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>
1
2
3
4
显示结果(图1):
CSS:
.test2{font-size:1px; text-align:center;line-height:20px; border:1px solid black; background:red;}
html:
<div class="test2">测试</div>
1
2
3
4
显示结果(图2):
由图1和图2可知,在没有设置div的height属性时,div的高度根据line-height的大小而变化,且文字垂直居中。
第二问题:div的height与line-height的大小关系不同时,会有什么显示结果呢?
(1)height = line-height时
(2)height>line-height时
(3)height<line-height时
可以通过“测试”两个字在页面上的位置,能反映出height与line-height的大小关系。如果通过上面的学习,没有疑问的话,可以说初步理解了line-height。
如若以上并没有使你柳暗花明,敬请谅解,如果有什么问题,可留言我们讨论。
————————————————
版权声明:本文为CSDN博主「一起的远方」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/a2013126370/article/details/82786681
真正的能理解CSS中的line-height,height与line-height的更多相关文章
- 深入理解CSS中的层叠上下文和层叠顺序(转)
by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=5115 零.世间的道 ...
- 深入理解css中的margin属性
深入理解css中的margin属性 之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些“坑”的,下面我会介绍margin的基本知识以及 ...
- 深入理解css中position属性及z-index属性
深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...
- 深入理解CSS中的层叠上下文和层叠顺序
零.世间的道理都是想通的 在这个世界上,凡事都有个先后顺序,凡物都有个论资排辈.比方说食堂排队打饭,对吧,讲求先到先得,总不可能一拥而上.再比如说话语权,老婆的话永远是对的,领导的话永远是对的. 在C ...
- 如何理解CSS中的浮动 :其实他就像乘坐扶梯一样
只要你用过自动扶梯,你就能很快的理解CSS中的浮动(Float). 你肯定遇到过这样的情况: 做好了,你想用CSS浮动来调整元素间的位置关系. 在写完代码之后,你发现浮动元素没出现在你设想 ...
- [转]深入理解CSS中的层叠上下文和层叠顺序
http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/ 零.世间的道理都是 ...
- 理解css中的position属性
理解css中的position 两种类型的定位 static类型:只有一个值position: static.position默认值 relative类型:包括三个值,这三个值会相互影响,允许你以特定 ...
- 深入理解CSS中的margin
1.css margin可以改变容器的尺寸 元素尺寸 可视尺寸--标准盒子模型中盒子的宽度是不包括margin值的,clientWidth 占据尺寸--包括margin的宽度 outWidth不在标准 ...
- 深入理解css中position属性及z-index属性 https://www.cnblogs.com/zhuzhenwei918/p/6112034.html
深入理解css中position属性及z-index属性 请看出处:https://www.cnblogs.com/zhuzhenwei918/p/6112034.html 在网页设计中,positi ...
随机推荐
- MySQL JOIN原理(转)
先看一下实验的两张表: 表comments,总行数28856 表comments_for,总行数57,comments_id是有索引的,ID列为主键. 以上两张表是我们测试的基础,然后看一下索引,co ...
- 《奋斗吧!菜鸟》第九次团队作业:Beta冲刺
项目 内容 这个作业属于哪个课程 任课教师链接 作业要求 https://www.cnblogs.com/nwnu-daizh/p/11056511.html 团队名称 奋斗吧!菜鸟 作业学习目标 B ...
- workerman——报错
stream_socket_server(): unable to connect to tcp://0.0.0.0:8282 (Address already in use) in file [报错 ...
- 三.protobuf3标量值类型
Protobuf3 标量值类型 标量消息字段可以具有以下类型之一——该表显示了.proto文件中指定的类型,以及自动生成的类中的相应类型: .proto类型 说明 C++ 类型 Java 类型 Pyt ...
- Spring源码窥探之:BeanPostProcessor
Spring的Bean后置处理器 1. 实体类 /** * @author 70KG * @Title: Train * @Description: * @date 2018/7/23下午11:31 ...
- MongoDB 主从复制及 自动故障转移
1.MongoDB 主从复制 MongoDB复制是将数据同步在多个服务器的过程. 复制提供了数据的冗余备份,并在多个服务器上存储数据副本,提高了数据的可用性, 并可以保证数据的安全性. 复制还允许您从 ...
- vue引入js文件时报This dependency was not found:错误
vue引入js文件时报This dependency was not found:错误 使用了很多方法,原来是这么小的问题,特此记录 解决办法 添加 ./
- 初学 Size Balanced Tree(bzoj3224 tyvj1728 普通平衡树)
SBT(Size Balance Tree), 即一种通过子树大小(size)保持平衡的BST SBT的基本性质是:每个节点的size大小必须大于等于其兄弟的儿子的size大小: 当我们插入或者删除一 ...
- python中的一切皆对象
python中一切皆对象是这个语言灵活的根本.函数和类也是对象,属于python的一等公民.包括代码包和模块也都是对象.python的面向对象更加彻底. 可以赋值给一个变量可以添加到集合对象中可以作为 ...
- (转载) 搭建非域AlwaysOn win2016+SQL2016
非域搭建Alwayson只是省去搭建域控那一部分,其他大同小异 条件: 操作系统:windows server 2016 数据库:SQL Server 2016 SSMS版本:17.3 节点1:HDD ...