CSS什么是“安全高度”
在 CSS 中，“安全高度”通常指的是在不同设备和浏览器环境下能够保证内容正确显示的高度设置。安全高度的概念主要应用于响应式设计和移动设备，尤其是在涉及到屏幕边缘（如 iPhone X 的刘海区域）的情况下。为了确保内容在所有设备上都能正确显示而不被裁剪或遮挡，开发者需要考虑以下几个方面：
视口单位
视口单位（viewport units）如 vh（viewport height）、vw（viewport width）等，可以根据视口大小来设置元素的高度和宽度。然而，由于不同设备的屏幕尺寸和长宽比不同，使用视口单位时需要谨慎，确保在不同设备上都能正常显示。
安全区域
对于现代智能手机来说，屏幕顶部和底部可能存在“安全区域”，这些区域内的内容不会被状态栏或导航栏遮挡。例如，在 iOS 设备上，苹果定义了“安全区域”来确保内容不会被刘海部分覆盖。你可以使用 CSS 的 safe-area-inset-* 属性来获取这些安全区域的大小，并据此调整布局。
body {
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
}这里 env(safe-area-inset-top) 和 env(safe-area-inset-bottom) 分别表示顶部和底部的安全区域距离。
最小高度
为了避免内容在某些情况下被截断，可以设置一个最小高度（min-height），以确保容器至少有一个基本的高度。这在处理弹性布局（flexbox）或网格布局（grid）时尤为重要。
.container {
min-height: 100vh; /* 至少占据整个视口高度 */
}媒体查询
使用媒体查询可以根据不同的屏幕尺寸和分辨率来调整样式。这对于确保在不同设备上的显示效果一致非常重要。
/* 在宽度小于等于600px的设备上 */
@media (max-width: 600px) {
.content {
height: auto; /* 根据内容自动调整高度 */
}
}
/* 在宽度大于600px的设备上 */
@media (min-width: 601px) {
.content {
height: calc(100vh - 60px); /* 减去顶部和底部各30px的空间 */
}
}env()
env() 这个函数是 CSS 中的一个环境变量函数，它允许你访问用户代理（通常是浏览器）定义的环境变量。这些环境变量可以提供有关设备和浏览器的信息，比如设备的像素密度、颜色方案、可用空间等。
value = env(variable-name, fallback-value)
//variable-name 是环境变量的名字。
//fallback-value 是当环境变量未定义或无法解析时使用的回退值。
//一些常见的环境变量包括：
safe-area-inset-top: 顶部的安全区域插入距离。
safe-area-inset-right: 右侧的安全区域插入距离。
safe-area-inset-bottom: 底部的安全区域插入距离。
safe-area-inset-left: 左侧的安全区域插入距离。
color-scheme: 用户首选的颜色方案（light, dark, no-preference）。
forced-colors: 是否启用了强制颜色模式（active, inactive）。
prefers-reduced-motion: 用户是否偏好减少动画（reduce, no-preference）。body {
margin-top: env(safe-area-inset-top, 0px); /* 使用安全区域顶部的距离，如果没有则默认为0 */
}需要注意的是，env() 函数的支持程度取决于浏览器。目前大多数现代浏览器（如 Chrome、Firefox、Safari 和 Edge）都支持 safe-area-inset-* 环境变量。但是，对于其他环境变量的支持可能会有所不同，因此在使用前最好检查一下浏览器的兼容性。
calc()
calc() 是 CSS 中的一个函数，用于执行基于不同单位类型的数学运算，如加、减、乘、除。它允许你在 CSS 中动态地计算长度、频率、时间或角度等值。这对于实现响应式布局和灵活的设计非常有用。
calc(expression) //这里的 expression 是一个有效的数学表达式，可以包含各种 CSS 单位（如 px、em、rem、vh、vw 等）和其他合法的数值。//假设你想要一个元素的高度为视口高度减去 60 像素
.element {
height: calc(100vh - 60px);
}
//如果你希望一个元素的宽度为其父元素的宽度加上 20 像素
.element {
width: calc(100% + 20px);
}
//你还可以在 calc() 函数中使用多个运算符和单位
//margin 的上下边距是 2em 加上 10px，左右边距是 50% 减去 100px
.element {
margin: calc(2em + 10px) calc(50% - 100px);
}
//对于不支持 calc() 的浏览器，你可以提供一个回退值
.element {
width: calc(100% - 20px); /* 主要值 */
width: 98%; /* 回退值 */
}