半田的英文译语怎么说-流沙幻爱
2023年3月30日发(作者：when harry met sally)
真正的能理解CSS中的line-height，height与line-height
在最近的项⽬中，常常⽤到line-height，只是简单的理解为⾏⾼但并没有深层次的理解，致使不能达到信⼿拈来的感觉。在此做⼀下总结，
⼀是更深层次的了解什么是line-height，⼆是⽐较height铁杵磨成针的故事ppt 与line-height的区别。
基本概念
⾏⾼与⾏距从字⾯的意思是⾮常容易理解的，但是对布局和样式来说，我们应该更深⼊的理解各个属性之间的关系，⽐如line-height与
font-size存在什么关系呢，line-height与所属元素的height⼜有什么联系呢？。好了，带着疑问，我们⼀同探究。豌组词两个字
⾏⾼是指⽂本⾏基线间的垂直距离。基线（baseline）并不是汉字⽂字的下端沿，⽽是曲突徙薪文言文翻译及注释 英⽂字母“x”的下端沿。下图中两条红线之间的距
离就是⾏⾼，上⾏的底线和下⼀⾏顶线之间的距离就是⾏距，⽽同⼀⾏顶线和底线之间的距离是font-size的⼤⼩，⾏距的⼀半是半⾏距。
从上图我们就可以看出，⾏距、font-size与line-height之间的关系了吧。接下来进⼀步来看看这三者关系
当font-size等于l涟漪是什么意思 ine-height时，⾏距=line-height-font-size=0；⽽当font-size⼤于line-height时，则会出现⾏距为负值，则两⾏重
叠，如下图：
关于CSSboxes的四种类型（containingboxes、inlineboxes、lineboxes、contentarea）和line-height五种取值⽅法（line-
height:normal;、line-height:inherit;、li咬定青山不放松的精神含义 ne-height:120%;、line-height:25px;、line-height:1.2）。参见以下资料：
接下来将讲⼀讲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:1pxsolidblack;background:red;}
html:
显⽰结果（图1）：
CSS:
.test2{font-size:1px;text-align:center;line-heigh自由自在的意思 t:20px;border:1pxsolidblack;background:red;}
html:
显⽰结果（图2）：
由图1和图2可知，在没有设置div的height属性时，div的⾼度根据line-height的⼤⼩⽽变化，且⽂字垂直居中。
第⼆问题：div的height与line-height的⼤⼩关系不同时，会有什么显⽰结果呢？
（1）height=line-height时
（2）height>line-height时
（3）height
可以通过“测试”两天地千里快哉风 个字在页⾯上的位置，能反映出height与line-height的⼤⼩关系。如果通过上⾯的学习，没有疑问的话，可以说初步理
解了line-height。
如若以上并没有使你柳暗花明，敬请谅解，如果有什么问题，可留⾔我们讨论。
发布评论