本篇文章围绕了 CSS 的核心知识点和项目中常见的需求来展开。虽然行文偏长，但较基础，适合初级中级前端阅读，阅读的时候请适当跳过已经掌握的部分。 这篇文章断断续续写了比较久，也参考了许多优秀的文章，但或许文章里还是存在不好或不对的地方，请多多指教，可以评论里直接提出来哈。 小t…

学习CSS是构建好看网页的一种方式。 但是，在学习过程中，我们倾向于（大部分时间）限制自己，一遍又一遍地使用相同的属性。 毕竟，我们是一种习惯性的动物，我们会使用自己习惯且熟悉的东西。 因此，在这篇文章中，向你介绍7个 比较少见且好用的 CSS 属性，希望对你有所帮助。 1. …

了解项目通用开发流程。昨天在实现页面的时候，我是按照我做图习惯，先设计，然后从整体块到局部块进行实现的，不知道这样对不对。 了解页面标签中通用使用的标签结构中id和class的使用场景。昨天这边主要是想了解两个类型选择器的效果，两种情况都写了，不清楚实际项目中，一般推荐的优先级…

Flex布局 display: flex; 将对象作为弹性伸缩盒展示，用于块级元素 display: inline-flex; 将对象作为弹性伸缩盒展示，用于行内元素 注意兼容问题： webkit内核浏览器应使用前缀-webkit IE浏览器，可以很好的兼容IE11+版本，对于…

首先我们来说一下前端 icon 的发展史。 在我刚开始实习时，大部分图标都是用 img 来实现的。渐渐发现一个页面的请求资源中图片 img 占了大部分，所以为了优化有了image sprite 就是所谓的雪碧图，就是将多个图片合成一个图片，然后利用 css 的 backgrou…

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

正直的勇者们经历远航，一路横扫除魔，终于来到了魔王（指面试官）所在的石塔。勇者们在石塔前的守夜人陈大鱼头（此处@陈大鱼头）那里接受了一个挑战——用纯 CSS 难度判断鼠标进入盒子的方向。 勇者 A 给四个盒子分别定位到上下左右四个方向，并利用其 Hover 状态制作动画，三下五…

直播有一个很重要的互动：点赞。 点赞动画图片都是先放大再匀速运动。 快到顶部的时候，是渐渐消失。 收到大量的点赞请求的时候，点赞动画不扎堆，井然有序持续出现。 用 CSS3 实现动画，显然，我们想到的是用 animation 。 首先看下 animation 合并写法，具体含义…

我最开始接触到的是经理让我把一个PC官网写到它的自适应，即写到是屏幕自适应到宽320的尺寸。我当时用到的是@media screen。 优点 : 无需插件,能够适应各种窗口大小，只需在CSS中添加@media screen属性。 紧接着我开始接触移动端的适配。 这个方法是CSD…