作者：独元殇链接：https://www.zhihu.com/question/27432017/answer/1984773459834852908来源：知乎著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
第一个是 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>效果如下：
就是直接在右边空出来了一个 空白。就是留给滚动条的。
当滚动条出现时，就会填补这个空白。然后画面就不会滚动了！