作为一名Web开发者，CSS是必备技能之一，我一直以为自己对CSS的掌握已经够用了，直到读Lea Verou的《CSS揭秘》时，我发现自己充其量就算个会打CS的选手，书中针对我们常见的网页设计难题从不同的角度提出了多种实用又优雅的解决方案，在这里强烈的推荐给每一位从事前端相关的…

本文介绍了四种清除浮动的方法，并尝试解释其原理。在理解了各种清除浮动的原理之后，你会发现，很多清除浮动的方法本质上其实是一样的。掌握这些原理，相信你可以根据场景和需求，灵活运用原则发展出不同的清除浮动的方法，而不再死记或拘泥于文中提到的方法。 在讲清除浮动的方法之前，我们先来了…

当我们写css的时候，有时候会忘记设计里面存在的临界情况。举个例子来说吧，当内容的长度超过了我们的期望值，我们也无法解释其中的可能性，页面的设计很可能会因此而崩掉。我们不能保证css总是会按照我们期望的那样工作，但至少我们可以用不同类型的内容来测试，以减少这种情况的发生。

原文地址：Getting to know CSS Grid Layout 原文作者：Chris Wright 译者：华翔 校对者：珂珂、干干 翻译 | CSS网格（CSS Grid）布局入门 banner CSS网格布局是浏览器Flexbox布局之后最重要的布局方式。我们可以忘…

阅前必看：本文总结了各种常见的布局实现,每个方法的优缺点分析往后在github上陆续补充。还有就是这篇文章没提到的其他布局，待本人后续想到或遇到定会在github上及时更新。 由于文章篇幅较长,排版有些混乱,希望别介意哈。掘金PC端是会自动生成目录的,为了方便移动端阅读，还特意…

CSS Transforms可以对一个元素进行二维平面或三维空间的变换，如translate, rotate, scale和skew等变换。 下面是对W3C官网CSS Transforms模块的部分摘译，为了理解的连贯性，调整了W3C规范中相关章节的顺序。 用户浏览器（UAs）…

翻译自CSS Viewport Units: A Quick Start。此文章简单介绍了视口单位及其应用，用于提升大家css知识的广度 单位意义 CSS中有四个基于视口单位，分别为vh、vw、vmin和vmax。 视口高度（vh）- 这个单位表示视口的高度。1vh等于视口高度…

原文链接：点击这里 ，本文根据此文总结而来。 偶然间发现新的CSS伪类:focus-within，能非常方便处理获取焦点状态。 当元素本身或其后代获得焦点时，:focus-within伪类的元素就会有效。 没看懂，可以看下面的例子： <div class="container"…

腾讯云技术社区 - 掘金主页持续为大家呈现云计算技术文章，欢迎大家关注！ 作者：link 街景 wap 官网中有在视网膜屏幕中实现 1px border 的需求. 首先，来看下面视觉给的输出图中的 border： 从上面的视觉图可以看到，border 是一根非常细的线。这篇文章将说明如何使用 bo…