Ahmad Shadeed 原作,授权 New Frontend 翻译。
在 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 section 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
表示将两等分可用空间。)
弹性盒子配上古早的 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;
}
很酷吧?
给列表项的标记添加样式
以前我不知道每个列表项前面那个默认的小圆点叫 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
。)
text-align
属性
随着弹性盒子和网格的兴起,常常看到刚接触 CSS 的开发者使用这些现代技术而不是 text-align
实现居中和对齐。不过,老办法依然管用。
有时候 text-align: center
就能利落地解决问题。比如:
我们需要居中显示内容。text-align
就能方便地达成这一点,何必劳动大驾,使用弹性盒子和网格?
浏览器对 text-align
的支持情况就不用我介绍了吧,你应该自己猜一下(对不住了!)。
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
。简单方便。
column-rule
属性
CSS 分栏布局可以分栏显示元素。常见使用场景是将一段文字分双栏显示。然而,不太常见的功能是给它们加上分栏线。我从 Manuel Matuzovic 的文章中学到了这个知识点。
p {
columns: 3;
column-rule: solid 2px #222;
}
column-rule
这个属性名称也许没有很好地反映它的作用。你可以把它想象成 border-right
。所有浏览器都支持这个属性(IE 10+, Firefox 3.5+, Chrome 4+, Safari 3.1+, Edge 12+)。
缩放重复背景图像
我最近从 Addy Osmani 的推文 中了解到这个值。这个 background-repeat
的值可以避免裁剪背景图像。
.element {
background-size: contain;
background-repeat: round;
}
CSS Tricks 如此叙述 round
的机制:
在两个方向上平铺图像。除非单张图像大于容器,永不剪裁图像。如果剩下的空间可以放下多张图像,缩放图像以填满空间。如果剩下的空间不足图像宽度的一半,拉伸图像,超过图像宽度的一半,拉伸图像。
(译者注:round 的原理是平铺图像,同时拉伸图像以填满空间,不留空隙。比如,假设图像的宽度是 x,空间的宽度是 w,那么会缩放图像,不留空隙地平铺 Math.round(w/x)
张图像。图像高度同理。)
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
- I Used CSS Inline Flex For The First Time
- The Hidden Power of CSS Text Align
结语
这篇文章就介绍到这里。你有评论和建议吗?欢迎在推特上 @shadeed9。
感谢阅读。
如果你喜欢这篇文章的话,可以请我喝杯咖啡。(译者注:这是原作者的 Buy Me a Coffee 链接。)
评论