伪元素：[伪元素用于向某些选择器设置特殊效果，简单来说，伪元素创建了一个虚拟容器，这个容器不包含任何DOM元素，但是可以包含内容，我们可以为伪元素定制样式]伪元素::first-letter伪元素::

space-around: 每个项目两侧的间隔相等。项目之间的间隔比项目与边框的间隔大一倍 flex-start: 与交叉轴的起点对齐。 flex-end: 与交叉轴的终点对齐。 center: 与交叉轴的中点对齐。 space-between: 与交叉轴两端对齐，轴线之间的间…

transform 可以实现元素的形状，角度，位置等的变化。 skew(x, y) 接受两个值，第一个参数对应 X 轴，第二个参数对应 Y 轴。如果第二个参数未提供，则默认值是 0 任何一个元素都有一个中心点，默认情况下，其中心点是居于元素 X 轴和 Y 轴的 50% 处。 当…

CSS 选择器用于选择你想要的元素的样式的模式。 :first-child : 指定只有当某元素是其父级的第一个子级的样式。 last-child : 选择某元素是其父级的最后一个子级。 在 Web 表单中，有些表单元素有可用('enabled')和不可用('disabled'…

Css3 是 Css2 的升级版本，3 只是版本号，它在 Css2.1 的基础上增加了很多强大的新功能。 在编写 Css3 样式时，不同的浏览器可能需要不同的前缀。他表示该 Css 属性或规则尚未成为 W3C 标准的一部分，是浏览器的私有属性。 提供了更加强大且精准的选择器，提…

CSS变量又叫CSS自定义属性，为什么会突然提起这个很少人用到的东西呢？因为最近在重构个人官网，不知道为什么突然喜欢用上CSS变量，可能其自身隐藏的魅力，让笔者对它刮目相看。 谈到为什么会在CSS中使用变量，下面举个栗子，估计大家一看就会明白。 看完可能会觉得使用CSS变量的代…

话说，以前的前端工程师在入行时都当过切图仔或切图女。曾经，切图作为前端一门基础且必备的技能，不知何时开始已经不再提起。很多面试官在招聘时都忽略了PS的存在，其实在国外一位优秀的前端工程师是包揽设计工作的，PS玩得可溜呢。 现在大部分的前端工程师都说，这个图让设计师去切吧，这个图…

何为技巧，意指表现在文学、工艺、体育等方面的巧妙技能。代码作为一门现代高级工艺，推动着人类科学技术的发展，同时犹如文字一样承托着人类文化的进步。 每写好一篇文章，都会使用大量的写作技巧。烘托、渲染、悬念、铺垫、照应、伏笔、联想、想象、抑扬结合、点面结合、动静结合、叙议结合、情景…

我们在日常的开发中，经常会遇到这样一个问题，就是如何实现居中水平垂直居中对齐。并且在面试中也会出现这样的问题，但是我们往往回答的不是很全部，而导致没有得到面试加分。接下来我们通过不同的方式来实现，让我们成功破解这道面试。 不定宽： 参考上诉例子中不定宽高例子。