最近读到一篇文章《Everything you need to know about CSS Variables》，让我对 CSS 变量有了新的认识。下面将整理出来的跟自己感悟的地方与大家分享，希望能帮助到对 CSS 变量还一知半解的同学。 声明 CSS 变量的时候，发现跟使用…

垂直居中，在 CSS 中是一个老生常谈的问题，面试的时候也会时常被提及。所以，今天我们就来聊聊 9 种不同的居中方法。 有常见的 flex、transform、absolute 等等。也有 CSS3 的网格布局。还有伪元素的方法，是的，你没有看错，::after 和 ::bef…

white-space、word-break、word-wrap（overflow-wrap）估计是css里最基本却又容易让人迷惑的三个属性了，估计很多人都有把它们搞混或用错的经历。必须系统整理一下，今天我们就把这三个属性彻底搞清楚！ 可以看到，nbsp;和</br>可以正常发…

内部的Box会在垂直方向，从顶部开始一个接一个地放置。 Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加 box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。 BFC的区域不会与float box叠加。 B…

CSS 的伪类选择器和伪元素选择器，让 CSS 有了更为强大的功能。 有个错误有必要每次讲到伪类都提一下，有时你会发现伪类元素使用了两个冒号 (::) 而不是一个冒号 (:)，这是 CSS3 规范中的一部分要求，目的是为了区分伪类和伪元素，大多数浏览器都支持下面这两种表示方式。…

张鑫旭关于CSS3 animation属性中的steps功能符的思考

最近看了下CSS Variables（CSS变量，又名CSS自定义属性），跟大家分享一下我的学习笔记。 来，直接看MDN上的描述： CSS 变量是由CSS作者定义的实体，其中包含要在整个文档中重复使用的特定值。使用自定义属性来设置变量名，并使用特定的 var() 来访问。 CSS

现在我们大家在实际的开发中，可能用的最多的就是flex布局，当然还有浮动和定位，除此之外，这两年一直听到网格布局是趋势，即grid布局，但是项目中没有太多的应用，所以特此总结一下，希望对大家也对我自己有帮助。 1. 固定值 2. repeat()函数 有时，单元格的大小是固定的…

伪类与伪元素，傻傻分不清楚。 其核心就是用来选择那些不能够被普通选择器选择的文档之外的元素，比如:hover。 其核心就是需要创建通常不存在于文档中的元素，比如::before。 看了它们的定义应该对它们之间的异同有所了解了吧，呵呵 🙃🙃🙃... CSS2 中伪类、伪元素…