大家好，这里是CSS魔法使——alphardex。 轮播图（Carousel），相信大家并不陌生。平时大部分我们都是借助现有的框架来实现的，大都是swiper，或者UI框架里的某一个小组件。于是乎这东西就开始变得千篇一律：几张图片，外加几个小点，两边各有2个箭头，能够点击它们进…

大家好，这里是CSS魔法使——alphardex。 切图仔，是大多数前端用来自嘲的称呼。相信很多人平时写页面的时候，大部分时间是在切图和排图，如此往复。这里并不是要否定切图本身，而是在质疑：一直切图到底对自己的功力增长有何好处？想想UI丢给你一套好看的界面，你却只需一个img标…

欢迎你踏上了一条在前端世界中饱含争议的道路！相信大部分读者会在关于如何在 JavaScript 应用中处理 CSS 这一话题上产生共鸣。 文章伊始，先声明一句：无论是在基于 Vue、Angular 还是 React 构建的应用，针对如何处理 CSS，世界上并没有任何放之四海而皆…

【2019-08-16】Hello 小伙伴们，由于 jsliang 对文档库进行了重构，这篇文章的一些链接可能失效，而 jsliang 没有精力维护掘金这边的旧文章，对此深感抱歉。请需要获取最新文章的小伙伴，点击上面的 GitHub 地址，去文档库查看调整后的文章。 在我们日常…

在 标准盒子模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。 边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。…

骰子的一面，最多可以放置9个点。 下面，就来看看Flex如何实现，从1个点到9个点的布局。 上面代码中，div元素（代表骰子的一个面）是Flex容器，span元素（代表一个点）是Flex项目。如果有多个项目，就要添加多个span元素，以此类推。 首先，只有左上角1个点的情况。F…

CSS越来越强，现在已经可以实现根据不同的背景色显示不同的前景色进行匹配了，例如一个按钮，如果是深色背景色，则文字颜色为白色，如果是浅色背景色，文字颜色会自动从原来的白色变成黑色了，同时边框也显示出来了，以便有更好的识别度。这么神奇的事情是如何实现的呢？确实大开眼界。

居中布局1、水平居中a)inline-block+text-aligntips：此方案兼容性较好，可兼容至IE8，对于IE567并不支持inline-block，需要使用csshack进行兼容b)ta