前言最近做性能检测工具，很多知识点不清楚，打算查缺补漏，补一补。接下来从官方提供的性能检测工具Lighthouse(灯塔)开始我们的学习，简单介绍了下Lighthouse的一些点。

Recall CSS 布局原理之盒子模型 讲述了 DOM + CSSOM -> 生成 Box Tree 的细节；

根据上面的描述，维基百科甚至直接说了他是一个物理单位(physical unit of measurement), physical unit of measurement 就类似于cm, mm, inch这样的东西了. 根据dp的定义，1dp大小等同于160ppi屏幕上的1个…

行高，顾名思义指的就是一行文字的高度。按照定义来解释，就是两行文字之间基线之间的距离。那么问题来了，什么是基线呢？大家回想下我们刚开始学习汉语拼音的时候，使用四线格本子的四条线，其中倒数第二条线就是基线，如果你说，抱歉，我已经全部还给老师了，没有任何印象。呵呵，别急呢，我已经给…

这是一篇译文，对 inline 和 inline-block 的元素剖析非常给力。 line-height 和 vertical-align 都是简单的 CSS 属性，以致于大多数人自以为知道这两个属性的工作原理。但实际上这两个属性非常复杂，也许算得上是 CSS 里最难的两个属…

从头到尾，我们都试图在梳理清楚内联元素中一些较为重要的概念，其中一个很主要的目的，就是为了解决内联元素的对齐问题。对于很多前端开发来说，对齐问题一直是一个非常常见，但有时候又让我们感到非常困惑的问题。在这篇文章里我会用最简洁的解释来解释内联元素到底是怎么回事。这篇换个形式，我们…

上一篇文章我们讨论了font-size，这一篇来说另一个与文字关系密切的属性line-height。这里涉及到了内联盒模型相关的东西，这里保持了与上一篇类似的结构，先来说说概念，然后是度量单位，最后来聊一个常见的内联元素的现象。 说到盒模型，只要了解css的基本都知道这个概念，…

这里面涉及到浏览器的影响，字体的设计等方面的知识。尤其是字体设计是一门高深的学问，而我们只是为了开发网页中控制文字大小和对齐，所以这里我们只取我们需要的部分，下面先介绍字体概念。 我们先来了解文字的各个概念。图看起来更直观，所以我简单画了个图。 对照着图，可以看出基线是位于字母…

通俗的说，切图就是把设计稿切成一片片的，然后前端攻城狮经过div+css功能最大限度的还原设计图，也就是要把零碎的图片整合成一张完整的图片。那为什么要切图，UI设计狮做完设计稿后交给攻城狮撸代码不就完事了？实际上一张完整的设计稿是由不同的元素组成的，比如说，Logo、背景图、图…