就是顶部黄色的滚动进度条，随着页面的滚动进度而变化长短。 在继续阅读下文之前，你可以先缓一缓。尝试思考一下上面的效果或者动手尝试一下，不借助 JS ，能否巧妙的实现上述效果。 OK，继续。这个效果是我在业务开发的过程中遇到的一个类似的小问题。其实即便让我借助 Javascrip…

深入 reset.css 的世界，如何正确看待及使用 reset.css 。

面试中经常遇到的面试题之一，居中布局，特来总结

本文暂时列举了 13 条技巧，1、resize 实现图片对比 2、:not() 的应用技巧 3、任意元素垂直居中 4、表格单元格等宽 5、使用 Flexbox 摆脱各种 Margin Hacks 6、给空连接使用属性选择符 7、初始化 box-sizing 8、在 nth-child 中使用负数 9、文本显示优化（待商榷）10、border 的应用技巧！11、vertical-align 属性 12、margin 重叠解决方案列举 13、父元素 font-size:0 的作用 等！

弹窗是一种常见的交互方式，而蒙层是弹窗必不可少的元素，用于隔断页面与弹窗区块，暂时阻断页面的交互。但是，在蒙层元素中滑动的时候，滑到内容的尽头时，再继续滑动，蒙层底部的页面会开始滚动，显然这不是我们想要的效果，因此需要阻止这种行为。 关闭蒙层时，移除以上样式。 简单方便，只需添…

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

编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范。

flexbox 承诺将我们从万恶的纯 CSS 中拯救出来（如垂直对齐）。 flexbox 也正在实现它的这一目标，但是用户掌握这一新的模型也将会是个挑战。 因此在这里，我们将会用动图介绍 flexbox 是如何工作的，使得我们可以用它来做更好的布局。