偶然发现，在某乎热榜页有一个很有意思的布局，这里的标题会制约内容的行数，所以文本超出是 "不定行" 的。详细规则如下： 整个容器高度是固定的，标题和内容总共 3 行 标题最多2行，超出省略 内容由剩余

开发每一张网页都离不开布局排版，基于良好布局排版打下基础，才能使后续的开发更顺利。今时不同往日，现代CSS属性能更好地快速实现各种布局排版，节约更多时间去摸鱼

经常在某些 app 中看到这样的九宫格设计。当缩略图不足 9 张时，正常排列，当超过 9 张时，会提示还剩多少张。 如何使用纯 CSS 实现这一效果呢？一起来看看吧

粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。例如： 设置了以上样式的元素，在 viewport 视口滚动到元素 top 距离小于 10px 之前，元素

在实际 Web 开发过程中，总会遇到各种各样的布局。有公司同事问我这样一种布局有没有什么好的实现方式，就是一种在活动充值页非常普遍的优惠券效果，如下 首先，碰到这类布局的最佳实现肯定是mask遮罩。关于遮罩，可以看一下CSS3 Mask 安利报告。这里简单介绍一下 这里的遮罩图…

BFC（Block formatting context ）“块级格式上下文”。 是用于布局块级盒子的一块渲染区域。并且与这个区域的外部毫无关系。 可以理解为BFC是一个块独立的作用域，它有些自己的特性。具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布…

想写一篇关于 SVG 滤镜的文章已久，SVG 滤镜的存在，让本来就非常强大的 CSS 如虎添翼。让仅仅使用 CSS/HTML/SVG 创作的效果更上一层楼。题图为袁川老师使用 SVG 滤镜实现的云彩效果 -- CodePen Demo -- Cloud (SVG filter …

通知栏组件是一个比较常见的组件了，基本上每个站点都会有怎么个组件，主要就是通告站点的一些变化或者是告知一些中奖名单等作用。 最近在复习CSS3动画部分内容，想着平时通知栏组件大部分还是用JS来实现，正好拿这块组件来当复习，下面写了三个小例子在此分享，欢迎大家观看，如有疑问，欢迎…

伪类和伪元素，作为一个前端肯定是都用过。然后，你问下自己到底什么是伪类？什么是伪元素？两者真正区别又是什么？是不是突然一股懵逼涌上心头…… 对于什么是伪类，什么是伪元素，一些小伙伴会知道，伪类是一个冒号的，伪元素是两个冒号的；又或者，伪类是类似于:hover这样的，伪元素是类似…