我们在编辑一个版面，通常都会用到水平居中和垂直居中来设计，而水平居中很好处理，不外乎就是设定margin:0 auto；或是text-align:center；，就可以轻松解决掉水平居中的问题，但一直以来最麻烦对齐问题，都是“垂直居中”这个讨人厌的设定，以下将介绍七种单纯利用C…

上篇文章《19年你应该关注这50款前端热门工具（上）》，小编介绍了构建、框架和库的相关工具，没想到收到这么的关注，再次感谢大家，祝大家新年快乐，阖家欢乐，万事如意。 本篇文章小编再给大家推荐HTML、CSS、Javascript等相关的十几款工具，希望大家喜欢。 一款基于时间关…

说起BFC，就必须先了解一下CSS文档流中的定位机制，而且这部分说简单也简单，但却有个坑有可能误导我们，特在本文作出解释。 1. 三种基本方式 浮动：浮动脱离普通流，可以左右移动，直到它的外边框边缘碰到包含框或另一个浮动框的边缘，触发方式基本就是float:left/top等。…

我们传统的前端更多的是用javascript实现各种复杂动画，自从有了Css3 transition和animation以来,前端开发在动画这一块有了更高的自由度和格局,对动画的开发也越来越容易。这篇文章就让我们汇总一下使用Css3实现的各种特效。这篇文章参考《css揭秘》这本…

原本我的文章标题是深入探讨line-height与vertical-align的疑难杂症，但这样似乎没能针对性的抛出一个问题，故改成“彻底搞定vertical-align垂直居中不起作用疑难杂症”。因此，本文讲解的还是line-height和vertical-align。至于各…

这就很影响用户体验了，也不是我们想要的效果，我们想要的效果应该是，当宽度不足时，应该裁剪两侧图片的宽度来填充内容宽度。这个地方就涉及到一个知识点，为什么会出现滚动条？ 通常一个盒子的内容是被限制在盒子边界之内的。但有时也会产生溢出，即部分或全部内容跑到盒子边界之外。溢出将在满足…

前端开发中还原设计图的重要性毋庸置疑，目前来说应用最多的应该也还是使用rem。然而很多人依然还是处于刀耕火种的时代，要么自己去计算rem值，要么依靠编辑器安装插件转换。 而本文的目标就是通过一系列的配置后，在开发中可以直接使用设计图的尺寸开发，项目为我们自动编译，转换成rem。…

Flex是Flexible Box 的缩写，意为"弹性布局"，是CSS3的一种布局模式。通过Flex布局，可以很优雅地解决很多CSS布局的问题。下面会分别介绍容器的6个属性和项目的6个属性。每个属性会附上效果图，具体实现代码会以github路径形式更新于此。 注意，设为 Fle…

瞬间浮想联翩，一个女神，轻轻地漂浮在水中。开心的拍打着水花，哇靠。。。 我觉得很多人连float是啥意识都不知道，要知道很多特性的原理是和其命名的单词或者字母有密切关联的，不是随便命名的。从名字中可以看到一些当初设计的初衷。 其实我个人理解，浮动造成的最核心的问题就是破坏了文档…