原本我的文章标题是深入探讨line-height与vertical-align的疑难杂症，但这样似乎没能针对性的抛出一个问题，故改成“彻底搞定vertical-align垂直居中不起作用疑难杂症”。因此，本文讲解的还是line-height和vertical-align。至于各…

flex是flex-grow,flex-shrink和flex-basis的缩写，flex属性值可以只指定一个属性的值，而另外的属性值采用各自在flex属性中的的初始值，但是有一点要注意的是：flex属性中flex-grow和flex-basis的初始值和它们原始的默认值不同，…

如果遇到过以上类似的场景，这时候就要考虑是不是浏览器指纹在其中发挥作用。 “浏览器指纹”是一种通过浏览器对网站可见的配置和设置信息来跟踪Web浏览器的方法，浏览器指纹就像我们人手上的指纹一样，具有个体辨识度，只不过现阶段浏览器指纹辨别的是浏览器。 人手上的指纹之所以具有唯一性，…

本期分享一下如何仅用CSS3，实现单标签的动态晴阴雨雪。技术关键点就是“单标签”和“纯CSS”。先看下最终效果： 没错，就是这么任性，每个动图就一个标签，而且无图无JS！下面就来详细介绍下技术实现。 以及实现单标签最关键的:before、:after伪元素运用。 最大的一点就是…

最近我在CodePen上发现了一个纯CSS实现，具有渐变倒影和3D旋转效果的栅栏动画，他的实现方式是：利用10个<div>元素创建10个栅条，接着再复制整份<div>元素，并创建一个渐变遮罩形成渐变效果，以此作为栅栏的倒影。 这听起来有点像用左脚的脚趾去抓你的右耳背部（译者理解…

今年我面试了很多同学，只要看到简历上写“熟练掌握CSS3”的，我都会问问动画相关知识。然而我发现：都 2019 年了，还有很多同学不会 CSS 动画。 即，一个小球从向右匀速移动 200px，然后移动回来，再移动过去，最后停留在 200px 处。 就是需求这么简单的一个动画，然…

最近公司在用 Regular 封装一个表格组件，需要实现固定表头的功能。这个是几乎所有的组件库都会实现的一个效果，所以实现方式有很多种： 因为 thead/tr 的 position 属性是无效的，所以需要单独用 div 创建一个表头。然后设置这个表头的 position: a…

我是个很懒的人，开发过程中经常有意无意地刻意避开数学相关的知识，你也知道解数学题非常枯燥无趣。平时写动画也尽量使用 css3 来实现，timer-function 随意选用，最多也就调一下 cubic-bezier，找到看着舒服的就行。但是怎样让动画更顺滑，写出更贴近自然的动画…

2019年终岁尾，最近对布局相关的内容比较有兴趣，在此整理一下和瀑布流相关的使用场景以及多种实现方案。 瀑布流又称瀑布流式布局，是一种比较流行的页面布局方式，专业的英文名称为[Masonry Layouts]。与传统的分页显示不同，视觉表现为参差不齐的多栏布局，最早是由Pint…