css距离顶部高度_第一部分：前端项目的常见CSS问题

近年来，渲染和交互在浏览器中变得更加一致，然而，它仍然不是完全统一的，很多小问题都会让你失望。除了这些问题之外，还有不同屏幕尺寸，语言偏好和普通人为错误的变量，我们发现很多小事情要开发给开发人员。

在浏览器中实现用户界面时，最好尽量减少这些差异和问题，以便UI可预测，跟踪所有这些差异很难，因此我将一系列常见问题及其解决方案列为一个方便的参考指南，以便你在开展新项目时使用。

1.button和input元素的重置背景

添加按钮时，重置其背景，否则它将在浏览器中看起来不同。在下面的示例中，Chrome和Safari中显示相同的按钮，后者添加默认的灰色背景。

重置背景将解决此问题：

2.溢出：scroll对比auto

要限制元素的高度并允许用户在其中滚动，请添加overflow: scroll-y。

这在macOS上的Chrome中看起来不错，但是，在Chrome Windows上，滚动条始终存在(即使内容很短)。

这是因为scroll-y无论内容如何都会显示滚动条，而overflow: auto只在需要时显示滚动条。

解决方法：

3.添加 flex-wrap

只需添加即可使元素表现为flex容器display: flex。但是，当屏幕尺寸缩小时，如果flex-wrap未添加，浏览器将显示水平滚动条。

在移动设备上，浏览器将显示水平滚动条。

解决方案非常简单。包装器应该知道当空间不可用时，它应该包装物品。

4. justify-content: space-between当Flex项目的数量动态时，请勿使用

当justify-content: space-between应用于flex容器时，它将分配元素并在它们之间留出相等的空间。

5.长文章和链接

在移动屏幕上查看文章时，长文字或内联链接可能会导致出现水平滚动条。使用CSS'

word-break可以防止这种情况发生。

6.透明渐变

使用透明的起点和终点添加渐变时，它在Safari中看起来会是黑色的。这是因为Safari无法识别关键字transparent。通过替换它rgba(0, 0, 0, 0)，它正常工作。

7.当视口不够高时，将元素固定到屏幕顶部

如果将元素固定到屏幕顶部，如果视口不够高会发生什么？简单：它将占用屏幕空间，因此，用户可用于浏览网站的垂直区域将是小而不舒服的，这将减损体验。

在上面的代码片段中，我们告诉浏览器只有在视口的高度等于或大于500像素时才将标题修复到顶部。

同样重要的是：当你使用时position: sticky，除非你指定top属性，否则它将无法工作。

​以上是前端开发中第一部分常见CSS问题，第二部在整理中，我们会尽快发布已提供前端开发者参考。

​