在 CSS 中要设置元素水平垂直居中是一个非常常见的需求了。但就是这样一个从理论上来看似乎实现起来极其简单的，在实践中，它往往难住了很多人。 让元素水平居中相对比较简单：如果它是一个行内元素，就对它的父元素应用 text-align: center；如果它是一个块级元素，就对它…

你或许知道 CSS 是 Cascading Style Sheets（层叠样式表）的缩写。但你不一定真正的理解了其中层叠的含义。 你可能会以为层叠指的是选择器的优先级，但这是不准确的。 用户代理即是指浏览器，https://cs.chromium.org/chromium/sr…

公司许多的业务都还停留在使用px和弹性布局来进行样式处理的阶段，有些时候是因为视觉要求，有些时候是害怕线上问题，所谓破而后立。 移动端适配方案是一个老生常谈的话题，但是对于不同的项目、不同的业务场景可能会需要不同的适配方案来进行移动端适配，向下兼容的baseline也需要提前订…

左(上)边是Omi，右(下)边是 React，Omi 使用 Shadow DOM 隔离样式和语义化结构。 点击这里看执行结果。 Cli 自动创建的项目脚手架是基于单页的 create-react-app 改造成多页的，有配置方面的问题可以查看 create-react-app …

在说原生 HTML 组件之前，要先简单介绍一下四大 Web 组件标准，四大 Web 组件标准分别为：HTML Template、Shadow DOM、Custom Elements 和 HTML Imports。实际上其中一个已经被废弃了，所以变成“三大”了。 HTML Tem…

学习之前可以先看看酷炫的动画效果，想想怎么实现。 从最近在做的需求说起，一个优惠券样式，过设计稿的时候认为没什么大不了的，满口答应了。真正开始开发的时候遇到问题，主要是镂空效果实现方式上比较费劲。要求是背景可配，并且票身可以配背景图，然后镂空是真镂空。 设想并尝试了很多种方案，…

浏览器从去年年底开始，已经开始支持浏览器的原生平滑滚动定位，CSS scroll-behavior属性和JS scrollIntoView()方法都可以。 scroll-behavior:smooth写在滚动容器元素上，可以让容器（非鼠标手势触发）的滚动变得平滑。 我们先看一个…

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