CSS： 8 篇

在前端开发过程中，利用 CSS 一行代码技巧可以解决一些常见问题，提高编码效率，使样式设置更加简洁。本文将分享 10 个 CSS 一行代码技巧。

1. 居中对齐​

居中对齐是 CSS 中的常见需求。通过一行 CSS 代码，可以实现元素的水平垂直居中。

display: grid; place-items: center;

我们在前端开发中，经常会有居中某个元素的需求。因为 CSS 对于居中的方式有多种多样，在不同场景下有不同的效果，需要特别记住它们的应用场景才能够正常的居中元素。那么这篇文章，我们就看一下在 CSS 中，水平居中一个元素的不同方法和技巧，帮助你在前端开发中更加游刃有余。

使用 text-align 居中行内元素​

text-align 不仅可以居中文本，还可以居中行内元素（如文本或图片）。把父元素的 'text-align' 设置为 center，然后把子元素的 display 属性设置为 inline 就可以了。

.parent-element {
  text-align: center;
}

在编写技术文档的时候，我们经常会给用户展示一些常用的快捷键，那么在 HTML 中，我们可以使用原生的 <kbd> 标签来表示一个按键，它也是 HTML 语义化的标签之一，相比于使用 <div> 等通用的、无意义的标签，使用语义化的 <kbd> 可以直接知道这是代表按键的元素。

如何使用 kbd​

<kbd> 是一个行内元素，跟 span 类似，每个按键都放到一个单独的 <kbd> 标签即可，例如下方示例：

使用 CSS 隐藏滚动条，如果直接使用 overflow: hidden 会导致内容不能滚动，要想使用 css 隐藏滚动条，但不影响内容滚动，这里有两种方法：

• 使用 padding 把滚动条移出浏览器视口。
• 使用 ::webkit-scrollbar 伪元素选择器（简单，但兼容性不好）。

下面分别来看一下这两种方法。

在使用 CSS 编写页面样式的时候，你是不是写过类似的代码：

li a,
artcile a,
section a {
  color: #000000;
}
h1 a,
h2 a,
h3 a {
  color: blue;
}

为了给一篇文章中，不同位置的超链接设置不同的颜色，需要在多个选择器中，重复的选择 a  元素，如果是其它名字比较长的元素或者 class，那么写起来会特别麻烦，稍加不注意就会写错。

在编写网站的时候，或多或少都会用到一些网络上的字体，CSS 3 中虽然加入了对 Web Fonts（网络字体）的支持，但是浏览器对它们的加载和默认处理方式会极大的影响网站的性能和用户体验。例如默认情况下，在 Web Fonts 加载时，使用该字体的地方会显示空白，直到字体下载完成之后才会显示，这时通过改变 CSS 中的 font-display 属性，就可以避免这个问题。

作为一名前端工程师，经常在写完 HTML 以后，才觉得真正的噩梦要开始了，啊，写 CSS 的时候，面对满屏乱飞的组件，真想手动给他们挪到该在位置上…… 都说 CSS 很难掌握，最愁给页面编写样式，其实都是因为还没有形成一个对 CSS 宏观的了解，只要有了正确的学习方法、设计思维，再通过不断的积累，就能轻松的掌握它。接下来我会把掌握 CSS 的 5 个技巧整理一下，让你在以后编写 CSS 的时候不再发愁。

在写 CSS 的时候你一定遇到过有些样式明明写对了，也选择了正确的 html 元素去应用这些样式，可是就是不生效，这是为什么呢？因为在选择同一个 HTML 元素的时候，不同的选择器有不同的优先级，优先级低的选择器的样式会被优先级高的覆盖。