讲 10 个代码量极少，用处极大的 CSS 奇淫技巧代码！

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

下面的代码，可以选择在我制作的简易实时 HTML 编辑器调试学习-> 分格 HTML 编辑器 。

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

这是宽高比！

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

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

<style>
  div { 
    width: 190px;  /* 注意，这个数字要能容纳完内容才有效 */
    aspect-ratio: 16 / 9;
    background: tomato; 
   }
</style>
<div>我永远保持 16:9</div>

效果如下：

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

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

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

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

<style>
  img {
    width: 200px;
    height: 200px;
    object-fit: cover;  /* 会裁切，只剩中间 */
    border: 2px solid #000;
  }
</style>
<img src="https://placehold.co/300x200" alt="demo">

效果如下：

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

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

代码如下：

<style>
  :root {
    color-scheme: dark light;  /* 自动变色 */
  }

</style>

<h3>切换系统深浅模式来测试</h3>
<p>在深色模式下，下面的原生控件会自动变黑，文字变白：</p>

<label>
  输入框: <input type="text">
</label>

效果如下：

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

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

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

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

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

<style>
  body {
    accent-color:red;
  }
</style>

<input type="checkbox" checked> 选择框
<br><br>
<input type="radio" checked> 单选
<br><br>
<input type="range"> 拖动滑块

效果：

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

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

<style>
  div {
    background: skyblue;
    width: fit-content;
    margin: auto;
    padding: 20px;
  }
</style>

<div>我是一个 div，使用缩水大法</div>

效果如下：

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

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

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

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

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

<style>
  body {
    height: 150vh;
    background: #eee;
    padding: 50px;
  }

  .scroll-box {
    width: 200px;
    height: 200px;
    overflow: auto;
    border: 3px solid #333;
    background: white;
    overscroll-behavior: contain; /* 关键代码 */
  }

  .inner {
    height: 500px;
    background: linear-gradient(to bottom, tomato, gold);
  }
</style>

<div class="scroll-box">
  <div class="inner">内部滚动条</div>
</div>

<p>滚动上面的盒子到底部，再继续滚动试试...</p>

效果如下：

这个超级实用！

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

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

<style>
  h2 {
    width: 200px;
    background: gold;
    text-align: center;
    padding: 10px;
  }
  #test {
    text-wrap: balance;    
  }
</style>

<h2 id=test>很长很长 so long 很长的 titletitle 标题</h2>
<h2>很长很长 so long 很长的 titletitle 标题</h2>

效果：

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

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

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

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

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

<style>
  a:not([class]) {
    text-underline-offset: 0.25em;
  }
</style>

<p>
  <a href="#">这是一个正文链接 (g/y)</a>
</p>

<p>
  <a href="#" class="btn">这是一个按钮链接(不使用该 CSS) (g/y)</a>
</p>

效果如下：

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

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

<style>
  button {
    margin: 30px;
    padding: 10px 20px;
    border: 1px solid #333;
    outline: 2px dashed blue;

    outline-offset: var(--offset, 2px);
    transition: outline-offset 0.2s;
  }

  button:hover {
    --offset: 10px;
  }
</style>

<button>鼠标悬停看扩散效果</button>

效果如下：

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

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

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

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

<style>
  nav { position: fixed; top: 0; width: 100%; height: 100px; background: rgba(255,0,0,0.5); }

  h2[id] {
    scroll-margin-top: 110px; /* 100px + 10px 缝隙 */
    background: yellow;
  }

  body { height: 2000px; padding-top: 120px; }
</style>

<nav>我是 100px 高的固定栏 (半透明)</nav>
<a href="#part-1">>>> 点我跳转到目标 <<<</a>
<div style="height: 500px;"></div>
<h2 id="part-1">目标标题：你看不到红色的遮挡</h2>

效果如下：

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

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

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

代码如下：

<style>
  div {
    width: 200px;
    height: 150px;
    overflow-y: auto;
    border: 2px solid #333;
    scrollbar-gutter: stable;  /* 关键 */
  }
</style>

<div>
  虽然内容很少，不需要滚动，
  但请注意右侧预留的空白槽。
  这保证了内容增加时不会发生位移。
</div>

效果如下：

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

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