博客列表 >【CSS】CSS常用单位:像素-字号-视口

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

可乐随笔
可乐随笔原创
2022年11月27日 20:26:11496浏览

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). 可保证元素在任何窗口中,呈现统一外观,并可轻松判断横竖屏。

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议