CSS中的height与line-height

最新推荐文章于 2023-11-10 15:25:27 发布
最新推荐文章于 2023-11-10 15:25:27 发布
阅读量361 收藏 1
点赞数
分类专栏： Web
原文链接：https://blog.csdn.net/a2013126370/article/details/82786681
版权

这是转载的文章的下方评论，感觉很清晰： 

原理就是在父元素不设置固定高度时，height等于line-height，在对父元素设置固定高度时，由于高度固定，这个时候line-height又不等于height，所以就会出上述情况，其实刚才居中模型的盒子还是在那儿，只不过由于height不等于line-height所以就会导致文本处于父元素居中位置之上，或者之下，但是其实那个盒子依然存在，只不过看不到，也没有显示出来，你可以理解成一个虚拟的盒子，这是我自己通过浏览器实验出来的，不知道准不准确，但是我个人觉得是准确的

但我还是不懂 

麻达拉
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS深入理解之line-height
literarygirl的博客
02-12 1万+
以下文字整理自慕课网——张鑫旭的《CSS深入理解之line-height》。 一、line-height的定义 line-height，又称行高，指的是两行文字基线之间的距离，又可以称为这行文字所占的高度。 定义三问： 什么是基线？ 为何是基线？ 需要两行？ 如图红色线即为基线 基线（baseline），指的是一行字横排时下沿的基础线，基线并不是汉字的下端沿，而是英文字母x的下端沿。基线乃*线定义之根本！ （*线指任意线） 第3个问题，一行文字难道就没有行高吗？非也，一行文字也是有行高的，两行的定义已
css行高line-height的一些深入理解及应用
从入门到放弃
08-23 2368
一、前言 前两天在腾讯ISD团队博客上看到一篇翻译的文章“深入理解css 行高”，是个不错的文章，学到了不少东西，建议您看看。 这里，我也要讲讲我对line-height的一些理解，所讲解的东西绝大多数与上面提到的“深入理解css 行高”是不重复的，可以说是补充或是另外一个角度的思考。另外，将结合实际，展示line-height的一些特性和一些常见应用，帮助您对css行高line-height...
【CSS】height和line-height的区别
二木成林
10-01 357
height是指元素自身的高度。 line-height是指行间的距离（行高）。
真正的能理解CSS中的line-height，height与line-height
热门推荐
一起的远方的博客
09-20 11万+
在最近的项目中，常常用到line-height，只是简单的理解为行高但并没有深层次的理解，致使不能达到信手拈来的感觉。在此做一下总结，一是更深层次的了解什么是line-height，二是比较height与line-height的区别。 基本概念 行高与行距从字面的意思是非常容易理解的，但是对布局和样式来说，我们应该更深入的理解各个属性之间的关系，比如line-height与font-size存在什...
CSS中height和line-height的区别
weixin_43642752的博客
06-09 127
height：一般用于设置某一控件具体的高度 line-hright：一般用于设置控件中字体所占的具体高度。 当一个父容器中存在两个不同的子容器时，因为子容器中控件的不同可能会存在两个子容器中的不能对齐的现象。 如上图所示，在搜索框为一个父div盒子，在该div盒子中左侧为input文本输入框右侧为子div盒子存放文本，而该子div盒子无法正好放入父容器中，是因为左侧输入框的输入的字体与右侧子div中字体为同一高度，右侧字体位置默认在容器的左上角所以才照成了改情况。
CSS中的line-height，height与line-height
lucky__peng的博客
05-04 425
在最近的项目中，常常用到line-height，只是简单的理解为行高但并没有深层次的理解，致使不能达到信手拈来的感觉。在此做一下总结，一是更深层次的了解什么是line-height，二是比较height与line-height的区别。 基本概念 行高与行距从字面的意思是非常容易理解的，但是对布局和样式来说，我们应该更深入的理解各个属性之间的关系，比如line-height与font-size存在什么关系呢，line-height与所属元素的height又有什么联...
CSS中line-height与height的区别?
飞翔的熊blabla
07-24 576
简单来说,line-height是行高的意思,height则是定义元素自身的高度. 例如下面这段代码 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 如果我们定义.test {line-height:20px;},那么这个元素的实际高度将取决于其中内容的多少,假如文字部分在浏览器里面显示为一行,那么这个div的实际高度
CSS line-hight ,vertical-align，父元素高度以及行框，行内框的关系
okyoung188的博客
03-12 894
参考文章：我对CSS vertical-align的一些理解与认识（一）                     css行高line-height的一些深入理解及应用                     大小不固定的图片、多行文字的水平垂直居中 总结：1.line-height 决定了此元素的inline box高度，跟字体大小无关（如果是多行文字，设置行高小于字体大小可以看到文
CSS：line-height是什么？，height是什么？
会写Bug的攻城狮
11-11 705
CSS：line-height是什么？，height是什么？
CSS基础-行高（height和line-height)【学习笔记】
lilien的博客
11-21 449
1 行高测量 行高的测量方法： 2 单行文本垂直居中 行高我们利用最多的一个地方是： 可以让单行文本在盒子中垂直居中对齐。 文字的行高等于盒子的高度。 这里情况些许复杂，开始学习，我们可以先从简单地方入手学会。 行高 = 上距离 + 内容高度 + 下距离 上距离和下距离总是相等的，因此文字看上去是垂直居中的。 行高和高度的三种关系 如果 行高 等 高度 文字会 垂直居中 如果行高 大于 高度 文字会 偏下 如果行高小于高度 文字会 偏上 ...
(转载) CSS height 和 line-height 的区别
ssisse的博客
09-08 426
height表示垂直高度，line-height表示文本行高，也就是从文字顶部到底部的距离， 试下这个就可以看到区别了： .test1{line-height:20px;background-color:red;} .test2{height:20px;background-color:green;} test1test1 test2test2 可以看到红色背景高度为100p
height与line-height
北极鱼
07-31 478
line-height：行高 设置文字间上下距离  height：高度 就是定义一个层 或某样东西的高度啦  也就是说line-height是特指单行高度，height可以为所有元素的高度  文字放大后边缘会重叠？  line-height直白理解就是文字高度加上文字上下的空白区域，line-height最好不要设置单位，如果固定单位后，行高就是确定值。  当字体放大且没
height和line-height
cherry_vicent的专栏
12-17 1543
1、height： 文字在左上方显示，在IE中文字离上边0px，在FF\Chrome\360中，文字离上边1px，离左边都是0px， 2、line-height： 文字近似垂直居中显示，在IE中文字顶部离上边的距离比文字底部里下边的距离偶数小3px，奇数小4px；在FF\Chrome\360中，文字顶部离上边的距离比文字底部里下边的距离偶数小1px，奇数小2px 3、在height和lin
width,height的问题,span中line-height和padding区别
xiaoxiao_xiaoliu的专栏
09-18 703
div是块级元素，height尽量不要定义固定值，方便后续内容添加。width只对块元素起作用。     在父元素的width,height已经定义了的时候，子元素的width,height不一定需要明确定义：如果子元素是img,width和height是已经知道的，就无需再定义,但是，img在不写width,height时，加载时不占位。；如果子元素的左右填充都有，字体大小也有，而且是块级元素
line-height与height学习和总结
qq_31032311的博客
07-24 1014
目录 问题引入 height与line-height是什么？ height与line-height的作用对象是什么？ height与line-height之间存在什么关系？ 必要基本术语和概念 名词 概念 字体 作用的过程 height的作用过程 line-height的作用过程 总结 注： 斜体加粗：在基本术语中有补充 文章中框模型（盒模型）是一回事 问题引入 height与line-height是什么？ height：height 属性设置元素的高度...
CSS基础：你必须要知道的行高属性 line-height
最新发布
WangMin@汪末末
11-10 3929
CSS中的行高（line-height）是指网页中每行文字之间的距离，就是对于同一行内的不同内容，行高决定它们之间的间距。换一句话来说，在CSS中包括文字的每一行不是只有文字的高度，其实还有上间距、下间距，所以行高指的是文字的高度+上下间距。合理设置文字行高不仅能够让网页更加美观与整洁，还能够增加用户的视觉与阅读体验，在大段文字中，合适的行高可以让用户阅读起来更加舒适。你可能还是不明白行高是什么？下面我通过几图来仔细给大家讲一下吧！
height和line-height、fontsize之间的关系（简单易懂）
weixin_41571938的博客
04-15 922
1、 顶线：文字顶部对齐的线 中线：文字中部的画线 基线：英文字母下端沿线 底线： 文字底部对齐的线 从图片上看，很容易看出fontsize就是文字的高度，是顶线到底线之间的距离 line-height行高=fontsize+行距 接下来是比较重要的 也就是height与line-height之间的关系 height：就是盒子的高度 line-height：是行高，文字会处于行高的中间 当height=line-height时，文字处于div的垂直正中间 当height>line-height的时候
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值