【css段落属性】难记但易于使用的CSS属性

作者：前端朋克酱：前端开拓者

字首

写了一段时间的CSS后，您应该熟悉最基本的display、position、padding、margin、border、background等常用属性。写CSS的时候不需要特别调查什么。很顺利。

这些属性很常见，因为它们可以在多个地方使用，而某些CSS属性只能在特定地点或特定情况下使用。我经常忘记这些不常见的属性，但有时这些属性其实很重要。

所以这篇文章虽然不容易记住，但介绍了好用的CSS属性，自己做笔记也很有帮助。

Input的外框和“|”的颜色

Outline与border相比是比较少见的属性，但特别要提到它在input中的应用。将焦点从浏览器的默认行为移动到input时，边缘会出现蓝色圆圈。

那个蓝色就是轮廓。可以通过Chrome devtool确认。

因此，如果不想要outline或想更改颜色，可以修改此属性。

输入框中出现的持续闪烁的|称为caret。要更改颜色，可以通过caret-color属性进行修改。

点击蓝色盒子

我记得在手机上点击什么东西的时候出现了蓝色边框之类的东西，但是我刚才怎么尝试都没有尝试。简而言之，相应的属性称为-webkit-tap-highlight-color，使用该关键字可以找到其他句子和例子。

平滑滚动

很多网站都有功能。最常见的是博客网站。右边可能会出现句子每一段的标题。单击可以快速跳转到该段落。

如果没有设定，就是直接下去跳到那个定位段落。但是，有一个东西叫平滑滚动，它添加了一些过渡，告诉用户滚向那边。

很久以前，实现此功能可能需要JS，但现在可以使用CSS的scroll-behavior: smooth。为了得到它(以下例子来自MDN):

加载新内容时的滚动位置

很多网站在滚动到底部时会自动加载更多功能，加载更多时，用户预计仍在同一个位置，加载更多，因此滚动条不会自动向下滚动。

但是，浏览器的默认处理方式有时不如预期。加载更多元素时，屏幕可能不会停留在所需位置。

此时，您可以使用名为overflow-anchor的CSS属性来调整此行为。

一次只滑动一个元素

有时，用户可能需要直接滑动到下一个元素的效果，而不是滑向任何地方。这可以通过与scroll-snap相关的属性完成，如下所示：

手机的300毫秒点击延迟

这个应该很多人都知道，手机上的点击事件会有大约300毫秒的表演，也就是说，你点完之后要等300毫秒才能触发click事件。这种延迟可以双击手机放大屏幕，所以第一次点击的时候，浏览器不知道你点两次还是只点一次，所以要等一会儿。

此延迟似乎以前已删除，但如果发现它仍然存在，则可以使用名为touch-action: manipulation的CSS属性来解决此延迟。此属性可通过设置禁用某些手势。

有关详细信息，请参阅MDN。

Font-smooth

我是Create React App的基本CSS(https://github . com/Facebook/Create-React-App/blob/master/packages/)

Body {

-WebKit-font-smoothing : antialiased；

-moz-OS x-font-smoothing : gray scale；

}

这两个属性也可以在很多网站上找到。这两个属性与字体的呈现有关。例如，antialiased实际上是大家听过的抗锯齿。可以自己决定如何渲染字体。

结语

本文简要介绍了难记但易于使用的CSS属性。因为不常用，所以在真正需要的时候很容易忘记属性名。如果在搜索时输入的关键字不正确，则很难找到此属性。