一个周五的晚上，闲来无事整理下自己的 github（经常做收藏党），今天打算都过一遍，发现一个star很高的项目，里面有大量的 CSS 片段，而且标题很诱人，然后又花了将近1个小时从头到尾过了一遍，其中一些是我们常用的一些知识点，另外也包含一些比较新的属性的应用，知识点挺多的，…

大家都说简历没项目写，我就帮大家找了一个项目，还附赠【搭建教程】。 CSS Grid Generator是一个由Sarah Drasner创建的免费工具。它是一个可视化设计工具，允许咱们创建一个基本的 grid 布局，然后就可以使用生成对应的代码，帮助咱们快速布局。 当我正在学…

上一篇分享了CSS的逻辑属性与盒子模型中分享了一些有关设备屏幕的知识以及浏览器视口的坐标构成。本篇则会分享HTML相关的一些知识。 我们在序章的开头就简单的讲解了HTML的诞生历史，本篇不作详细讲解，有兴趣的可以去看wikipedia。 1997年1月14日HTML 3.2作为…

在这篇文章我会介绍 9 个使你的 CSS 更加简洁优雅的使用技巧。这些技巧小生经常使用，觉得挺高效实用，所以也就有了这篇文章。 正文现在开始。 1. 建议使用 padding 代替 margin 我们在设计稿还原的时候，padding 和 margin 两个是常用的属性，但我们…

1. 两栏布局 flex 是一个简写属性，用来设置 flex-grow、flex-shrink、flex-basis。一般来说让元素等高需要额外设置，而 flex 容器的存在一个默认属性值：align-items:stretch，它会帮助你，当然也会给你带来糟糕的体验。 2. …

备注：1、设置flex-wrap：wrap，不然默认nowrap按照比例排满一行。 有不足之处，请评论留言... 谢谢

承蒙抬爱，我被称为 CSS 魔术师已经十多年了，但最近在博客上，CSS 相关的文章却不多。那就结合 CSS 与性能这两大主题，为大家带来一篇文章吧。 CSS 是页面渲染的关键因素之一，（当页面存在外链 CSS 时，）浏览器会等待全部的 CSS 下载及解析完成后再渲染页面。关键路…

我们一个一个简单了解下。 CSS3 动画的 animation-timing-function 属性值除了支持 cubic-bezier() 功能符，还支持 steps() 功能符，可以实现很多小而美的逐帧动画效果。例如 twitter 的 Like 的效果： 把所有序列帧图片…

这种整页翻转的效果主要是做rotateY的动画，并结合一些CSS的3d属性实现。 主要是通过计算页面翻折过来的位置。 这两种原理上都不是很复杂，需要各个细节配合好，形成一个连贯的翻书动画。 我们先重点说一下第一种翻页效果的实现。 1. 基本布局 一个li.paper就表示一张纸…