今天讲 10 个代码量极少，甚至就一行，然后用处极大的 CSS 奇技淫巧代码！

---

第一个是 aspect-ratio ，这个基础不错的前端肯定知道，菜鸟可能见过，但没用过。

这是宽高比！

没用过的，要用一下，用一下，你就回不去了~

有时候已经明确宽高比了，但我们会计算半天宽高比，然后写对应的 px 值，现在不用了，一下子 OK！

效果如下：

​

如果，你 aspect-ratio 的值写成 1 ，那么就可以得到一个完美的正方形了！

---

第二个是 object-fit ，这个大多数情况下是用于 img 元素的。

它有两个值，一个是 cover （图片完全覆盖容器，且图片长宽不失真），一个是 scale-down （只保证图片长宽不失真）。

我们常用的是 cover 。使用它，图片就不会被拉伸，导致页面看起来很难受了 ~

效果如下：

左边的是 cover 的效果，右边的是 scale-down 的效果（需要你手动试）。

---

如果你的 CSS 比较简单，那么可以试试用 color-scheme: dark light; 启动浏览器自适应 深浅色模式！

代码如下：

效果如下：

这是浏览器原生支持的一些默认深浅效果。

如果你不声明这一句，那系统会当做没看见...  不会自动转换。建议用上！

---

有时候，我们的外贸网站，有个品牌色，比如 红色 。

但我们的网站上，很多 表单控件，并不是这个品牌色，浏览器默认是蓝色。

那么可以试试 accent-color:red; ，它会自动计算出不同焦点下，表单控件的颜色。

效果：

这个还是挺实用的。很多 css 框架都不支持改颜色...

---

教科书里，好像很少提到 fit-content 这个属性，它是根据内容，来控制容器的大小的。

效果如下：

它一定程度上，可以让页面上，一些组件，看起来更优雅一点。不过大部分前端程序员，应该都懂和都用过吧。

---

大家有没有遇到过这种场景，就是你页面，一个 div，有自己的滚动条。

然后用户在这个 div 里滚动到底部时，，整个页面会开始滚动。很难受~~~  而且，使用 js 好像也无法完美解决。

现在，使用 overscroll-behavior: contain; 就可以轻松解决这个问题！

理解不了的话，可以试试 下面的代码：

效果如下：

这个超级实用！

---

文字的排版，其实听起来很简单，但一直是一个难题！

在 2023 年，CSS 又引入了一个最新的先进的排版属性，text-wrap: balance; ，它可以平衡行数之前的词语长度，使其做到尽可能的均衡，整体观感上，要舒服很多！

效果：

上面的看起来，肯定要好看很多，算是一个解决方案吧。

不过要注意，这个属性，只支持 6 行以内，所以尽可能用在一些短小的地方，比如标题！

---

接下来是 text-underline-offset: 0.25em; 这个是什么呢？

英文中的 g、y ，是不是这些字母，下面会拖一个尾巴。而 < a > 的原生效果是，这个 underline 线会重叠到这些小尾巴上。

对于做外贸网、英文网站的小伙伴，一定要知道这个。这个对提升自己网站的观感很重要！

效果如下：

我们可以看到，不使用这个 css ，是不是下面那个小尾巴会很难看？

---

不计入盒模型尺寸的轮廓线 outline-offset ！

效果如下：

你把鼠标移上去，就会有扩散效果了。而且，只是扩散，不会影响各种尺寸。 

---

这个是解决一个 js 常见的问题的工具：scroll-margin-top 。

怎么形容这个场景呢？你有个固定的顶部导航栏。它 高度是 100px 。然后你单击链接，是一个滚动到某个 #part 标题的链接，你会发现默认滚动后，它是紧挨着顶部的。那么导航栏就挡住了（我也不太能说清，大家看下面的例子吧）.....  如何不介入 js 来解决这个问题呢？就是scroll-margin-top ！

注意，要在本地建一个 html 来运行，否则会乱跳转！

效果如下：

你可能用不到，但它会给你提供一种新思路！

---

最后一个，老前端都知道，一个滚动条跳动 Bug 。就是页面的内容，动态变多，会突然出现滚动条。然后画面会跳动一下。看着很难受。

过去，解决方案千奇百怪，现在 CSS 给了一个原生解决方案： scrollbar-gutter: stable; .

代码如下：

效果如下：

就是直接在右边空出来了一个 空白。就是留给滚动条的。

当滚动条出现时，就会填补这个空白。然后画面就不会滚动了！

阅读原文：https://mp.weixin.qq.com/s/BI8dfzgf_hoslDz3eZZIew