首先，因为动画是多段完成的，所以我们通过参数 content 传入的是一个二维数组，其中每个 item 存放着我们想要加载的内容和对应要求，如何让动画一段一段的完成呢？很自然的能想到 Promise 方法，通过 Promise.then() 来实现。 所以我们可以将这个需求抽象…

HTML中只有两种元素，块级元素和内联元素。块级元素拥有“换行”的特性，一般用于结构（骨架），内联元素能够同行显示，一般用于内容展示。需要注意的是，块级元素并不是指“display:block”的元素，同样的，内联元素也不单单是“display:inline"的元素。但是，这两…

文本、元素的对齐和居中在开发中经常会用到。本文分别对文本、元素的对齐、居中进行介绍

本篇不分析常见的布局方式，而是从同级元素之间的位置关系和父子元素之间的位置关系这两个方面来示例，理解了这两个点，就可以实现任何类型的布局了。 又回到最开始的按钮例子，我们先忽略head标签及里面的内容。影响按钮展示的节点有 html -> body -> button 在默认s…

在使用 css 设置页面样式时会经常遇到需要居中的情况,下面我总结了一些 css 在不同条件下实现居中的方法。有一些方法具有一些 hack 味道,大家看看就好。

昨天晚上做携程的笔试，第三道题是让模拟一个排序的步骤，也就是将排序的过程以动画的形式表现出来。 首先赞一下携程的这道题目，这才是前端该做的题目，既有意思，又考察了排序算法，还考察了部分动画及 dom 操作。话不多说，分析一下这道题目。 为什么绝对定位呢，首先绝对定位可以让元素脱…

在 Web 前端开发中实现动画有2种方式。要么依靠 CSS 实现动画，要么依靠 JS 控制实现动画。 分析：给 div 添加了一个过渡动画，动画指定了 transform 动画，触发时机为当鼠标移上去的时候。因此当鼠标移入的时候元素的 transform 属性发生变化，那么这个…

必生这种情况是因为可点击区域未应用于整个元素。 为了更加清楚，请参见下图，左图可点击区别(圈红部分)明显比右图的小很多，所以右图的实现用户体验会更好。 对于本文，会介绍一些事例，并通过事例演示如何增加可点击区别，提高用户体验。 WCAG全称Web Content Accessi…

我们经常在某些业务场景中，需要实现子元素均等占用父元素空间的效果。到目前为止，我使用最多的就是用 flex: 1 来实现。直到有一天我突然想使用 flex-grow: 1 来达到相同的效果，但是浏览器却给了我不一样的表现，我才发现我忽略了剩余空间（free space）这个关键…