看到这个效果，我首先想到的是设置元素的border属性，可惜border不能设置长度，无法实现动效。另外一种实现思路是添加四个div来分别实现上下左右的边框效果，虽然可行，但是要添加四个额外元素，有点儿得不偿失的感觉。难道就没有更好的解决方案了... 就在我绞尽脑汁的时候，灵光…

对很多人来说，创建布局是前端开发领域中最难啃的骨头之一。 你肯定经历过耗费数个小时，换着花样地尝试所有可能起作用的 CSS 属性、一遍遍地从 Stack Overflow 上复制粘贴代码，寄希望于误打误撞地赌中那个能实现预期效果的魔幻组合。 如果你的惯用策略就是按部就班地组合布…

看文章之前，先来看两个例子。这是我们在项目中最常见的项目布局方式。 案例一：多个容器按照相同间距水平排列。 看到这两个案例时，你可以先短暂的想想平时都是如何实现的，很多同学的答案应该是这样的。 效果我们是做到了，但是这里所有像素都是你自己固定计算的。 比如第一个例子中，父容器的…

这篇文章是三天前写就的，有大佬给我提了一些修改意见，我觉得这个意见确实中肯。所以就有了这个升级的修改版本。代码同步更新到 GitHub 了。 我入职第二家公司接到的第一个需求就是修复之前外包做的滚动吸顶效果。我当时很纳闷为何一个滚动吸顶会有 bug，后来我查看代码才发现直接用的…

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

继上一篇html篇之后，看到小伙伴留言说期待后面整理的CSS和JS篇，工具人小编整理出了本篇有关CSS部分的知识点。本篇文章作为对CSS知识点的统筹，囊括了目前大部分在面试当中常见的内容，包括一些易踩雷的知识点。文章篇幅较长，建议收藏慢慢细品。 文中篇概念性的内容也蛮多，小编一…