【CSS】CSS常用单位：像素-字号-视口

CSS常用单位

1. 渲染与布局原理

(1). 根据HTML源码，生成页面结构与内容的DOM(文档与内容模型)。
(2). 根据CSS规则，计算所有元素的大小、样式、位置，生成CSSOM(样式对像)。
(3). 根据 DOM 和 CSSOM ，渲染生在HTML页面。
(4). 如果有 JS ，则中断HTML渲染，执行完JS后，继续渲染HTML。

2. 示元素大小的单位

(1). 绝对单位：px，不管什么单位，浏览器统一转化为px像素。
(2). 相对单位：百分比%,继承字号(em),根字号(rem),视口单位(vw/vh)。
(3). 主流移动端布局方案：REM+VW

3. 使用字号做为元素单位的优势

(1). 字号属性：可继承，可大大简化代码。
(2). 主流浏览器默认字号：16PX，较为统一。

4. 视口比例（vw/vh)作为元素单位的优势是什么

(1). 参照物永远是当前可视窗口，轻松实现联动调整，简化代码。
(2). 可保证元素在任何窗口中，呈现统一外观，并可轻松判断横竖屏。