为了让项目的运行效率更高，减少开销，需要对重排、回流、重绘有一定的了解。 重排和回流其实是一回事。 回流：英文叫reflow，指的是当渲染树中的节点信息发生了大小、边距等问题，需要重新计算各节点和css具体的大小和位置。 例：在css中对一个div修饰的样式中，使用了宽度50%…

随着前端的不断发展，更多新的 CSS 属性不断加入提案，本文列举 7 个不常用但很有用且你见过也可能没见过的 CSS 属性，带大家领略 CSS 之美。

多行文本展开收起是一个很常见的交互， 如下图演示 实现这一类布局和交互难点主要有以下几点 位于多行文本右下角的“展开收起”按钮 “展开”和“收起”两种状态的切换 当文本不超过指定行数时，不显示“展开收

最近在写移动端 H5 应用，遇到一个值得记录下来的点。现在从它的由来到实现，我们来聊一下移动端 1px，说 1px 不够准确，应该说成 1 物理像素。 CSS 像素 (虚拟像素)：指的是 CSS 样式代码中使用的逻辑像素，在 CSS 规范中，长度单位可以分为两类，绝对单位以及相…

简要介绍：前端开发中，静态网页通常需要适应不同分辨率的设备，常用的自适应解决方案包括媒体查询、百分比、rem和vw/vh等。本文从px单位出发，分析了px在移动端布局中的不足，接着介绍了几种不同的自适应解决方案。 在静态网页中，我们经常用像素（px）作为单位，来描述一个元素的宽…

... 上面这些问题有的人可能已经知道如何解决了，但是问题产生的原理，以及解决方案的原理可能会模糊不清或者一知半解。而在探寻这些问题的过程中，我们会遇到非常多的概念，比如：像素、分辨率、PPI、DPI、DP、DPR、视口扽等，这些概念往往分不清。 生活中，我们经常说手机、显示器…

前言      在日常布局中,无论是两栏布局还是三栏布局,使用的频率都非常高。 两栏布局      两栏布局实现效果是将页面分割成左右宽度不登的两列,宽度较小的列设置为固定高度,剩余宽度由另一列撑满,

在Web应用中，实现动画效果的方法比较多，Javascript 中可以通过定时器 setTimeout 来实现，css3 可以使用 transition 和 animation 来实现，html5 中的 canvas 也可以实现。除此之外，html5 还提供一个专门用于请求动画…

我们有的时候可能需要通过JS来获取到元素的宽高占位情况来做一些计算，以下共汇总了5中方式，并且对各种方式的能力范围及兼容性做了详细的说明。