@argyleink在第四次的伦敦（LondonCSS 2020）CSS活动中分享了一个有关于CSS特性相关的话题。看了一下这个主题的PPT，里面有些新东西还是蛮有意思的。基于该PPT，我稍微整理近24个CSS方面的新特性，感兴趣的同学可以继续往下阅读。 接下来的内容我将分为：…

“你想做的一定有人做了，你一定不是第一个遇到这个问题的人”——这句话对80%（二八分布）的人是有效的，我也从中获益不少。 在Chrome中使用button标签来高亮被@的用户，在Firefox中使用img标签来高亮被@的用户（绝妙）这里不同标签的使用很讲究，考虑了浏览器兼容性。…

最近切一个页面的时候涉及到了一个tab切换的部分，因为不想用js想着能不能用纯CSS的选择器来实现切换效果。搜了一下大致有下面三种写法。 缺点：因为锚点会将选中的元素滚动到页面最上面，每次切换位置都要移动，体验极差。 经过实验发现第三种方法达到的效果最好。所以下面讲一下第三种实…

在 《掌握web开发基础系列--长度单位》 这篇文章中已经介绍过了css像素单位--px，这篇文章详细探讨一下设备物理像素和css像素之间的关系。 “像素”，是一个名词，在不同的上下文中所描述的东西可能不一样，但是也可能存在一定关系。 设备屏幕实际拥有的像素点，屏幕的基本单元，…

在“CSS 小妙招”这个话题中，我将深入讲解一个 CSS 属性。这些都是网友们提问的属性。所以，如果您也有感到困惑的 CSS 属性，请在 Instagram 或者 Twitter 下方留言给我！我有问必回。 如果您还想找点乐子或者想问我些其他问题，可以来 twitch.tv 看…

于是我结合平时写页面的经验，脱口答道：“应该是内联元素吧。”但说出来就后悔了，因为肯定没那么简单。 果然，他像“非洲大山”穆托姆博那样对我摇了摇指头。 但通过图中可以发现，都提到了一个词：替换。于是我去了更权威的 MDN web docs，寻找替换元素 的定义。 简单来说，它们…

CSS Grid布局 （又名"网格"），是一个基于二维网格布局的系统，旨在改变我们基于网格设计的用户界面方式。我们常用的Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局，并不适用于复杂的二维布局。网格（Grid）是第一个专门为解决布局问题而创建的CS…

本文是笔者写CSS时常用的套路。不论效果再怎么华丽，万变不离其宗。 有时候，我们需要给多个元素添加同一个动画，播放后，不难发现它们会一起运动，一起结束，这样就会显得很平淡无奇。 那么如何将动画变得稍微有趣一点呢？很简单，既然它们都是同一时刻开始运动的，那么让它们不在同一时刻运动…

61、两个子元素 一个有内容自动撑开，另一个为空如何跟随高度。