注意：曾全职考公，空窗期一年，沉淀学习，重返赛道。
注意：有理解错、说错的地方，请各路大佬留言讨论，我好改进，感谢！！！

line-height

设置元素内行间的距离（即行高）。它影响元素中文本行之间的垂直间距，也可以用来控制元素内部行框的最小高度。line-height 可以使文本看起来更加清晰和易于阅读，特别是在长文本段落中。

/* 长度值：可以是px、em、rem 等具体长度 */
line-height: 20px;
line-height: 1.2em;

/* 数字（无单位） ：表示行高是当前字体大小的 1.5 倍 */
/* 内联元素会继承这个倍数，它的行高为“自身的 font-size * 1.5” */
line-height: 1.5;

/* 百分比（%）：行高是父元素字体大小的 120% */
/* 内联元素会继承计算过后的值 */
line-height: 120%;

/* normal：这是默认值，具体值取决于用户的代理（如浏览器） */
/* 但通常是 1.0 到 1.2 之间的一个数字，乘以当前字体尺寸 */
line-height: normal;

长度单位

1. px、em、rem

px（Pixel）：像素，是屏幕上的最小可视单位。它通常用于定义元素的精确尺寸，如宽度、高度、边距等。
特点：是一个绝对单位，不受父元素或其他元素的尺寸影响。
em：基于父元素字体大小进行缩放。
rem：相对于根元素（即 <html> 元素）的字体大小。
特点：无论 rem 用在文档中的哪个元素上，它都会基于根元素的字体大小来计算。与 em 不同，rem 的计算不会受到嵌套元素的影响，因此它更容易预测和控制。

2. vw、vh

/* vw（Viewport Width）：视口宽度的百分比单位。1vw等于视口宽度的1%。 */
.element-width {
    width: 50vw; /* 元素的宽度为视口宽度的50% */
}

/* vh（Viewport Height）：视口高度的百分比单位。1vh等于视口高度的1%。 */  
.element-height {  
    height: 30vh; /* 元素的高度为视口高度的30% */  
}

网页视口

1. media-query

Media Query 是CSS中的一种条件表达式，根据媒体类型（如屏幕、打印机等）和媒体特性（如宽度、高度、方向等）来应用不同的样式。
通过@media规则，Media Query可以指定一个或多个媒体类型，并可以包含可选的条件表达式。当这些条件满足时，Media Query中的样式就会应用到对应的元素上

语法结构

@media mediatype and|not|only (media feature) {
    /* CSS样式规则 */
}

mediatype：指定样式将应用于哪种类型的媒体，如screen（屏幕）、print（打印机）等。
and|not|only：用于组合多个媒体特性或排除某个媒体类型。
media feature：用于定义媒体的具体特征，如屏幕宽度、高度或方向。

使用示例

/* 当屏幕宽度小于600px时，应用以下样式 */
@media screen and (max-width: 599px) {
    body {
        background-color: blue;
    }
}

/* 当屏幕宽度大于等于600px时，应用以下样式 */
@media screen and (min-width: 600px) {
    body {
        background-color: green;
    }
}

/* 当屏幕宽度 大于等于375px 和 小于等于413px 时，应用以下样式 */
@media only screen and (min-width: 375px) and (max-width: 413px) {
    body {
        background-color: red;
    }
}

注意

顺序问题：建议按照从小到大或从大到小的顺序来编写，以避免样式冲突。
meta标签：确保 HTML 头部包含了<meta name="viewport" content="width=device-width, initial-scale=1.0">标签，以便正确设置视口大小并启用响应式设计。

2. 网页视口尺寸 api

window.screen.height：获取整个屏幕的像素高度，包括任何工具栏或任务栏，但这取决于浏览器的具体实现和用户的系统设置。等于 innerHeight + 网页外的头部导航栏和底部工具栏等。
window.innerHeight：浏览器窗口的视口（viewport）的当前高度，包括滚动条（如果显示的话）。这个高度是用户视图中可见的内容区域的高度，不包括工具栏和状态栏等浏览器界面元素。这个值会随着用户调整浏览器窗口大小而变化。
document.body.clientHeight：从文档的 body 元素的顶部到其可见内容底部的距离，包括由于滚动条出现而减少的高度（如果有的话）。这个值会随着页面内容的增加或减少而动态变化，但它不包括边框（border）、外边距（margin）或水平滚动条（如果存在的话）的高度。

CSS响应式第一篇：尺寸单位

目录

line-height

长度单位

1. px、em、rem

2. vw、vh

网页视口

1. media-query

语法结构

使用示例

注意

2. 网页视口尺寸 api