承蒙抬爱，我被称为 CSS 魔术师已经十多年了，但最近在博客上，CSS 相关的文章却不多。那就结合 CSS 与性能这两大主题，为大家带来一篇文章吧。 CSS 是页面渲染的关键因素之一，（当页面存在外链 CSS 时，）浏览器会等待全部的 CSS 下载及解析完成后再渲染页面。关键路…

一个display：block的元素设定宽高之后表现为矩形。通过设定border-radius可以得到圆角矩形，圆形和椭圆形。 border-radius，可以分别对4个角进行设定。 例如上图：border-top-left-radius: apx bpx; border-xx…

无论你是一个想要学习CSS布局的新手，还是一个比较有经验但想要进一步巩固与了解最新CSS布局知识的前端开发者，这篇指南都能帮你全面了解如今CSS布局发展的现状。 在过去的许多年中，正如翻天覆地的前端开发一般，CSS布局也产生了巨大的变化。现在我们有需要可选的CSS布局方式来开发…

1. 视口 viewport viewport 解释为中文就是‘视口’的意思，也就是浏览器中用于显示网页的区域。在 PC 端，其大小也就是浏览器可视区域的大小，所以我们也不会太关注此概念；而在移动端，绝大多数情况下 viewport 都大于浏览器可视区，保证 PC 页面在移动浏…

Collection of hand-picked free HTML and CSS glow (neon) text effect code examples. Pure CSS shimmering neon text. George W. Park This pen s…

很多谈 Flex 布局的文章都是一个一个属性的干聊，有点像约会时的查户口，枯燥而无趣。 如果让你硬记中国 34 个省级行政单位，你不仅会记的很吃力，可能还没法分清省和省之间的相邻关系。而一旦你心中有了一副中国地图，这些知识就变成信手拈来的东西了。 这篇文章立志做 Flex 布局…

备注：1、设置flex-wrap：wrap，不然默认nowrap按照比例排满一行。 有不足之处，请评论留言... 谢谢

本文章为前端进阶系列的一部分，介绍了基于REM布局的移动端响应式开发的原理以及具体方案。

简单来说就是CSS3中新增的一个函数，calculate（计算）的缩写。用于动态计算宽/高，你可以使用calc()给元素的各个属性设置值【margin、border、padding、font-size】等， 表达式中有“*”和“/”时，其前后可以没有空格，但建议留有空格。 你可…