不寻常的 CSS 属性

tech2022-08-24 120

Ahmad Shadeed 原作授权

New Frontend 翻译

1. 在 CSS 网格布局中运用 place-items

我从 Benjamin De Cock 那里学到了这个技巧，只需两行 CSS 就可以让一个元素水平居中和垂直居中。

<div class="hero"> <div class="hero-wrapper"> <h2>CSS is awesome</h2> <p>Yes, this is a hero p made for fun.</p> <a href="#">See more</a> </div> </div> .hero { display: grid; place-items: center; }

place-items 其实是 justify-items 和 align-items 的简写形式：

.hero { display: grid; justify-items: center; align-items: center; }

place-items 会居中每一格的内容，也就是说，这个属性可以搭配多格使用。

.hero { display: grid; grid-template-columns: 1fr 1fr; place-items: center; }

（译者注：fr 是网格系统的单位，代表部分。这里 1fr 1fr 表示将两等分可用空间。）

2. 弹性盒子配上古早的 margin: auto

弹性盒子加 margin: auto 可以非常方便地实现水平居中和垂直居中。

<div class="parent"> <div class="child"></div> </div> .parent { width: 300px; height: 200px; background: #ccc; display: flex; } .child { width: 50px; height: 50px; background: #000; margin: auto; }

很酷吧？

3. 给列表项的标记添加样式

以前我不知道每个列表项前面那个默认的小圆点叫 marker。在不了解 ::marker 这个伪元素前，我会重置列表样式，然后通过 ::before 伪元素添加一个圆点。

ul { list-style: none; padding: 0; } li { color: #222; } li::before { content: "•"; color: #ccc; margin-right: 0.5em; }

现在我掌握了更好的方法：

li { color: #222; } li::marker { color: #ccc; }

搞定！是不是要方便许多？

Firefox 68+、Safari 11.1+ 支持 ::marker 这个伪元素。Chrome/Edge 80+ 有一个配置项，开启后支持这一特性。（译者注：Chrome 86+ 已经支持 ::marker。）

4. text-align 属性

随着弹性盒子和网格的兴起，常常看到刚接触 CSS 的开发者使用这些现代技术而不是 text-align 实现居中和对齐。不过，老办法依然管用。

有时候 text-align: center 就能利落地解决问题。比如：

我们需要居中显示内容。text-align 就能方便地达成这一点，何必劳动大驾，使用弹性盒子和网格？

浏览器对 text-align 的支持情况就不用我介绍了吧，你应该自己猜一下（对不住了！）。

5. display: inline-flex 属性

你碰到过需要以行内元素的形式显示一组徽章，每个徽章需要是一个弹性盒子元素的情形吗？这正是 inline-flex 的用武之地。

<span class="badge"><svg></svg></span> <span class="badge"><svg></svg></span> <span class="badge"><svg></svg></span> <span class="badge"><svg></svg></span> .badge { display: inline-flex; /* 魔法之处 */ justify-content: center; align-items: center; }

下次需要弹性行内元素的时候，别忘了用 inline-flex。简单方便。

6. column-rule 属性

CSS 分栏布局可以分栏显示元素。常见使用场景是将一段文字分双栏显示。然而，不太常见的功能是给它们加上分栏线。我从 Manuel Matuzovic [1] 的文章中学到了这个知识点。

p { columns: 3; column-rule: solid 2px #222; }

column-rule 这个属性名称也许没有很好地反映它的作用。你可以把它想象成 border-right。所有浏览器都支持这个属性（IE 10+, Firefox 3.5+, Chrome 4+, Safari 3.1+, Edge 12+）。

7. 缩放重复背景图像

我最近从 Addy Osmani 的推文中了解到这个值。这个 background-repeat 的值可以避免裁剪背景图像。

.element { background-size: contain; background-repeat: round; }

CSS Tricks 如此叙述 round 的机制：

在两个方向上平铺图像。除非单张图像大于容器，永不剪裁图像。如果剩下的空间可以放下多张图像，缩放图像以填满空间。如果剩下的空间不足图像宽度的一半，拉伸图像，超过图像宽度的一半，拉伸图像。

（译者注：round 的原理是平铺图像，同时拉伸图像以填满空间，不留空隙。比如，假设图像的宽度是 x，空间的宽度是 w，那么会缩放图像，不留空隙地平铺 Math.round(w/x) 张图像。图像高度同理。）

8. object-fit 属性

object-fit 这个 CSS 属性很神奇。这个属性让我的前端开发工作方便了很多。最近我在开发一个显示一组图标的页面。难点在于图标大小不一致，有的图标是竖的，有的是横的。

object-fit: contain 可以控制图标的 width 和 height，迫使图像处于指定的宽度和高度之内。

<ul class="brands"> <li class="brands__item"> <a href="#"> <img src="img/logo.png" alt=""> </a> </li> <li>  </li> </ul> img { width: 130px; height: 75px; object-fit: contain; }

这就能迫使图像位于指定的 width 和 height 之内。我们还可以在外面包一层 @supports 避免不支持 object-fit 的浏览器拉伸图像。

@supports (object-fit: contain) { img { object-fit: contain; height: 75px; } }

Aligning Logo Images in CSS [2]

I Used CSS Inline Flex For The First Time [3]

The Hidden Power of CSS Text Align [4]