这句话也是很抽象，暂且先不管它了。但是我们可以先看一个例子： 那最后文字是什么颜色呢？答案很简单：红色。这就涉及到了优先级问题，同一块内容，我们同时用了 ID选择器 和 类选择器,因为 ID选择器 优先级大于 类选择器 , 所以最终显示为红色。 但是，浏览器具体的优先级算法是怎…

其实鱼头的脚手架里早就把postcss-cssnext换成了postcss-preset-env，不过一直没删，但是看到这句话之后，处于好奇，就去翻了翻PostCSS的官网，然后又思考了下这些年CSS的发展历程，遂有这篇文章的出炉。 随着互联网的发展，人们对网页的要求已经是从只…

CSS 选择器的整理

float元素也称为浮动元素，设置了float属性的元素会根据属性值向左或向右浮动。浮动元素会从普通文档流中脱离，但浮动元素影响的不仅是自己，它会影响周围的元素对齐进行环绕。简单来说，就是让block元素无视float元素，让inline元素让流水一样围绕着float元素来实现…

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

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

今天我们来复盘一下前端中css伪元素的知识以及如何用css伪元素来减轻javascript的压力，做出一些脑洞大开的图形。 伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式。伪元素主要有： 我个人觉得伪元素可以解释为元素的修饰，可以为元素带来额外的附加样…

box-sizing: content-box：默认值，标准盒子模型。 尺寸计算公式：width = content的宽度，height = content的高度。宽度和高度都不包含内容的边框（border）和内边距（padding）。即蓝线框以内。 height = bord…

如何用原生js实现一个简单的轮播图呢？前面我已经用一种方法实现了，可能有些小伙伴觉得那种方法写的轮播图有点low，不够炫酷。那么，那就请看看下面这种方法实现的轮播图吧！ 现在我就分享第二种使用原生js实现轮播图的方法，这种方法制作轮播图的原理主要是控制所有图片的display从…