以前说起前端动画必须使用JS，而CSS3为我们带来transition和@keyframes，让我们可以以更简单（声明式代替命令式）和更高效的方式实现UI状态间的补间动画。本文为近期对Transition的学习总结，欢迎各位拍砖。 首先先我们简单粗暴了解transition属…

在我们编写CSS的时候，经常会用到百分比赋值（%）实现自适应。像我们最常使用的流式布局设计模式，基本所有的column的宽度都是通过%来取值的。或者比如经常会遇到的元素水平垂直居中问题，我们常常会使用下面这样的CSS代码加以实现（absolute+transform思路）： 大…

逛论坛的时候看到一个问题, js是怎么实现持续的动画效果的? 第一时间想到的是定时器, 后来看到有同学提到了 requestAnimationFrame, 由于之前没有对相关方法有所了解, 于是便去查了下, 顺便也记录了下 animation 的使用.

像素是屏幕显示最小的单位，在一个1080p的屏幕上，它的像素数量是1920 * 1080，即横边有1920个像素，而竖边为1080个。一个像素就是一个单位色块，是由rgba四个通道混合而成。对于一个1200万像素的相机镜头来说，它有1200万个感光单元，它能输出的最大图片分辨率…

前端开发越来越关注效率：通过选择器的使用和简化代码来快速加载渲染。像Less、SCSS这样的预处理器在工作的时候，需要绕的路较长，而直接使用css速度会快。这里涵盖了20个css技巧来帮助你减少重复规则和复写，在布局中标准化样式流程，不仅可以帮助你高效地创建自己的框架，而且可以…

animation.css是一款非常炫酷、有趣、跨浏览器的预设css3动画库，便于你在项目中引用。 如果想要设置其他的延时和加速效果，请在自己的代码中进行设置。

浏览器使用流式布局模型 (Flow Based Layout)。 浏览器会把HTML解析成DOM，把CSS解析成CSSOM，DOM和CSSOM合并就产生了Render Tree。 有了RenderTree，我们就知道了所有节点的样式，然后计算他们在页面上的大小和位置，最后把节点…

屏幕适配应当指内容 适配区 和 屏幕区 间的适配关系。 单屏适配有 contain、cover 或 fill，多屏常见是 依宽 。 contain 和 cover 还需要 定位 来处理留白和超出的内容。 而同一个 H5 里不同内容往往用不同适配方式，即 分层。 对于屏幕适配这类…

前端布局非常重要的一环就是页面框架的搭建，也是最基础的一环。在页面框架的搭建之中，又有居中布局、多列布局以及全局布局，今天我们就来总结总结前端干货中的CSS布局。 1）使用inline-block+text-align （1）原理、用法 原理：先将子框由块级元素改变为行内块元素…