CSS：理解行高 line-height（css行高和高度有什么区别）

25-04-23 4

对于CSS：理解行高line-height感兴趣的读者，本文将提供您所需要的所有信息，我们将详细讲解css行高和高度有什么区别，并且为您提供关于$(document).height()、$("body

对于CSS：理解行高 line-height感兴趣的读者，本文将提供您所需要的所有信息，我们将详细讲解css行高和高度有什么区别，并且为您提供关于$(document).height()、$("body").height()、$(window).height()区别和联系、$(window).height()取值等于$(document).height()的问题、(document).height()和$(window).height()、scrollTop、Angular Youtube Player - 适合 100% 的高度 #1 height="100%" 或 height="100vh"#2 动态高度#3 移动 videoHeight的宝贵知识。

本文目录一览：

CSS：理解行高 line-height（css行高和高度有什么区别）
$(document).height()、$("body").height()、$(window).height()区别和联系
$(window).height()取值等于$(document).height()的问题
(document).height()和$(window).height()、scrollTop
Angular Youtube Player - 适合 100% 的高度 #1 height="100%" 或 height="100vh"#2 动态高度#3 移动 videoHeight

CSS：理解行高 line-height（css行高和高度有什么区别）

行高、行距、半行距

理解行高

从上到下四条线分别是顶线，中线，基线，底线。

行高

指文本行基线间的垂直距离。上图任意两条相同颜色的垂直距离也是行高。
行高数值上等于 字体大小+行距，而行距的一半（半行距）加在顶线上方，一半加在底线下方。

行距

指一行底线到下一行顶线的垂直距离。

半行距

行距的一半。半行距 = (行高 - 字号) / 2
CSS 中的 margin-top 不是从文字的顶线算起的，而是从离顶线半个行距的上方开始算起的。同理，margin-bottom 是从离底线半个行距的下方开始算起的。

继承

line-height 是可以继承的。父元素不同的行高单位影响子元素的继承。例如：

父元素的行高为 24px 时，子元素直接继承此固定的行高
父元素的行高为 150% 或 1.5em 时，会根据父元素的字体大小先计算出行高值然后再让子元素继承
父元素的行高为 1.5 时，根据子元素的字体大小动态计算出行高值让子元素继承。

JSFiddle 源码

line-height的单位和继承

$(document).height()、$(

$(document).height()、$("body").height()、$(window).height()区别和联系

前言：在此以高度为示例，宽度问题可类推。在移动端开发中，经常遇到需要把一块内容定位于底部的情况，当页面内容不满一屏时，需要设为fixed，而超过一屏时，需要设为static随页面顶到底部，此时就需要通过判断$(document).height()和$(window).height()的大小来区分内容是否超屏。

$(document)：整个文档
$("body")：body
$(window)：视口（有设doctype的前提下）

1)、页面内容大于视口（浏览器窗口）时：$(document).height() = $("body").height() > $(window).height();

2)、页面内容小于视口时：$(document).height() = $(window).height() > $("body").height();

另：$(window).height()还受页头DOCTYPE的影响，在此默认为有DOCTYPE的前提。

$(window).height()取值等于$(document).height()的问题

今天一个同事反映公司网站的弹窗跑到网页底部去了，检查JS代码，测试发现文件中$(window).height()取得的值竟然等于$(document).height()。百思不得其解，百度找到一篇文章说webkit内核下，如果使用的是html5格式的文档声明，则会出现这种情况，文章介绍的方法是将原来的文档声明改为：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

问题是解决了，可是我记得之前我使用html5标准写的代码并没有出现过这种情况，后来仔细检查才发现原来是头部文件的文档声明被另外一个同事改错了，他写成了：

<!DOCTYPE>
<html>

而正确的写法应该是：

<!DOCTYPE html>
<html>

真是无语。。。

(document).height()和$(window).height()、scrollTop

jQuery(window).height()代表了当前可见区域的大小

jQuery(document).height()则代表了整个文档的高度，可视具体情况使用

注意当浏览器窗口大小改变时(如最大化或拉大窗口后) jQuery(window).height() 随之改变，但是jQuery(document).height()是不变的。

$(document).scrollTop() 获取垂直滚动的距离即当前滚动的地方的窗口顶端到整个页面顶端的距离，在chrome里面试了下，与$(window).scrollTop()得到的值相同

$(document).scrollLeft() 这是获取水平滚动条的距离

要获取顶端只需要获取到scrollTop()==0的时候就是顶端了

要获取底端只要获取scrollTop()>=$(document).height()-$(window).height() 就可以知道已经滚动到底端了

$(document).height() //是获取整个页面的高度

$(window).height() //是获取当前也就是你浏览器所能看到的页面的那部分的高度这个大小在你缩放浏览器窗口大小时会改变与document是不一样的

Angular Youtube Player - 适合 100% 的高度 #1 height=

Angular Youtube Player - 适合 100% 的高度 #1 height="100%" 或 height="100vh"#2 动态高度#3 移动 videoHeight

如何解决Angular Youtube Player - 适合 100% 的高度 #1 height="100%" 或 height="100vh"#2 动态高度#3 移动 videoHeight

我在 Angular 11 项目中使用了 Youtube Angular 包。我想将播放器填充到 div 高度的 100%，这是一个 TailWind h-full div：

<div#videoContainer>
    <youtube-player
            *ngIf="videoId"
            [videoId]="videoId"
            width="100%"
            [height]="videoHeight"
    ></youtube-player>
</div>

我已经尝试以两种不同的方式来做到这一点：

#1 `height="100%"` 或 `height="100vh"`

两者都导致：

100% Height

#2 动态高度

[height]="videoHeight"

ngOnInit() {

    this._params = this._route.params.subscribe((params) => {
        this.videoId = params[''videoId''];
    });

}

ngAfterViewInit(): void {
    this.videoHeight = this.videoContainer.nativeElement.offsetHeight;
}

这有效，但会导致

错误：NG0100：ExpressionChangedAfterItHasBeenCheckedError：检查后表达式已更改。以前的值：''未定义''。当前值：''905''..

#3 移动 `videoHeight`

我将 this.videoHeight = this.videoContainer.nativeElement.offsetHeight; 移至构造函数，在 OnInit 中这导致：

TypeError: 无法读取新 YoutubeComponent 中未定义的属性“nativeElement”

我做错了什么？

解决方法

试试height="100vh"
尝试在声明期间或在 videoHeight 中为 constructor 赋值或在 ngOnInit 钩子中。

删除在模板代码中设置 width 和 height 的任何尝试 -

<div>
    <youtube-player *ngIf="videoId" [videoId]="videoId"></youtube-player>
</div>

也来自组件代码。然后它应该自动显示为全高。

今天关于CSS：理解行高 line-height和css行高和高度有什么区别的介绍到此结束，谢谢您的阅读，有关$(document).height()、$("body").height()、$(window).height()区别和联系、$(window).height()取值等于$(document).height()的问题、(document).height()和$(window).height()、scrollTop、Angular Youtube Player - 适合 100% 的高度 #1 height="100%" 或 height="100vh"#2 动态高度#3 移动 videoHeight等更多相关知识的信息可以在本站进行查询。

本文标签：