从 0 开始手把手带你搭建一套基于 Vite + Vue3 + TypeScript 规范的前端工程化项目环境，涵盖代码规范约束、提交信息规范约束、单元测试、自动部署等。

JavaScript总算入门了，复杂的就先不来了，今儿牛刀小试，先来一个系统同步的时钟效果，只用到最简单的获取系统时间的函数。因为学习是需要正反馈的，否则总也看不到效果，难免失了深入下去的兴趣。在之前的一篇专栏文章《利用CSS3的animation step属性实现wifi动画…

在面试最后，面试官突然问了我最后一个问题。怎么清除浮动。当然我很快给出最常用的方法。 本来我以为，面试官还会问，还有那些方法，我脑中已经构思了好几种方法。没想到，面试官竟然问我，这个方法清除浮动的原理。 原理！当时我就有点懵逼，这个方法很常见，也经常在用，但是就没去理解过其原理…

设置为浮动的元素会脱离当前文档流，向左或向右移动直到边缘遇到另一个浮动元素或者到达边界。普通元素不会对齐造成影响。 浮动是把双刃剑，在给我们的布局带来便利的同时有一些缺点需要我们去解决。例如最常见的父元素塌陷。如下图所示： 可以看到父元素的高度为0,为了解决这种状况就要清除浮动…

BFC(Block Formatting Context)，中文翻译为“块格式化上下文”。它有一个明显的特性，那就是如果一个元素拥有了 BFC 特性，那么它内部元素不受外部元素的影响，外部元素也不会受其内部元素的影响。 先来看看 MDN 对 BFC 的解释。 好像也没具体的说什…

这个方法兼容性不错，但是有一个小缺点：必须提前知道被居中块级元素的尺寸，否则无法准确实现垂直居中。 这种方法有一个明显的好处就是不必提前知道被居中元素的尺寸了，因为 transform 中 translate 偏移的百分比就是相对于元素自身的尺寸而言的。 这种方式的原理实质上和…

Flex 布局中，我们知道 flex-basis 属性是用来设置 Flex 项目的初始主轴尺寸（initial main size）的。 但通过实践发现，在 Flex 项目上使用 flex-basis 和 width 属性时，得到的效果是一样的。 等宽列：在 .item 设置 …

Grid 布局即网格布局，是一种新的 CSS 布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。号称是最强大的的 CSS 布局方案！！

本文阿宝哥将给大家介绍十个 「“酷炫屌"」 的图像悬停效果，希望阿宝哥精心录制的十个 Gif 动画能让大家眼前一亮，当然更希望这些特效能给大家设计图片悬停效果带来一些 「”灵感“」。 在日常工作中，如果小伙伴们也想实现图片悬停特效，阿宝哥推荐一个 Github 上的一个可扩展的…