作者 | YJ 责编 | 欧阳姝黎
前言
周日在家看 Web.dev 的 2020 三天 live，发现不少有意思的东西，其中有一项是关于 CSS 的，主播是 Una Kravets（chrome team 成员）。虽然我已经好几个月没有深入研究 CSS 的东西了，不过以前的底子还在。
注意：下面大部分代码已经由各大主流最新浏览器实现，切记不要使用在 production 当中。
超级居中
在没有 flex 和 grid 之前，垂直居中一直不能很优雅的实现。而现在，我们可以结合 grid 和 place-items 优雅的同时实现水平居中和垂直居中。
MDN, place-items 属性详解
可解构的自适应布局(The Deconstructed Pancake)
这种布局经常出现在电商网站：
在 viewport 足够的时候，三个 box 固定宽度横放
在 viewport 不够的时候（比如在 mobile 上面），宽度仍然固定，但是自动解构（原谅我的中文水平），不在同一水平面上
/code>
img src="http://dingyue.ws.126.net/2021/0526/cdfb36d3g00qtplb700hdd200hr00ckg00hr00ck.gif"/>
img src="http://dingyue.ws.126.net/2021/0526/c24eb558g00qtplb700jad200hr00ckg00hr00ck.gif"/>
br/>
br/>
br/>
经典的 sidebar
br/>
br/>
br/>
img src="http://dingyue.ws.126.net/2021/0526/c7c082cag00qtplb800gcd200hr0097g00hr0097.gif"/>
固定的 header 和 footer
.ex4 .parent {
display: grid;
grid-template-rows: auto 1fr auto;
经典的圣杯布局(classical holy Grail layout)
有意思的叠块
使用 grid-template-columns 和 grid-column 可以实现如下图所示的布局。这进一步说明了 repeat 和 fr 的便捷性。
RAM 技巧
无论是宽度或高度的收缩还是延展，都可以完美的展现 card 的布局。
使用 clamp 实现 fluid typography
MDN, clamp() 详解
完美实现比例
版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/rfx/11324.html