CSS踩坑记录

发表于 更新于 分类于 阅读次数： 本文字数： 407 阅读时长 ≈ 1 分钟

工作中经常会遇到 css 问题，各种 bug 出的很奇妙，就记录了下来，以便往后避免再次踩坑。

样式兼容性问题，可通过caniuse 官网查询。

uniapp 中使用 calc 计算

1
2
3
4
/* 错误写法 */
height: calc(100vh-100rpx);
/* 正确写法 */
height: calc(100vh - 100rpx);

calc 需要在计算符号前后加空格，并且它是支持多个不同单位计算的。

了解更多，详见

父级元素高度没有自适应子元素高度

一般相对定定位、绝对定位会出现。

子元素相对定位，如果 top > 0，父元素会缺失 top 值这部分高度，如果 top < 0，父元素会多出 top 值这部分高度。

子元素绝对定位，父元素会缺失子元素的高度。

如果父元素的高度比子元素最高的高度高出 top 值，滚动到底部时，会发现，多了 top 值高度，这对设置了不同背景色的盒子来说，不符合 UI 设计，可以用父元素可以用height: 100vh消除多余的 top 值。