CSS3几种新的长度单位

参考文章：http://www.webhek.com/7-new-css-units

标记说明：

数字上标为有疑惑的地方

尽量做到在专有名字后面给出英文翻译，因为官方的文档基本上是英文的，经过各个读者的翻译后可能有所区别而产生歧义。

概述：

em：相对于当前对象内文本的字体大小。相对于父节点的字体大小

rem：相对于根元素<html>的字体大小。应用场景：以文字内容决定布局的。

vh和vv：1vh等于1/100的视口高度^①，1vw等于1/100的视口宽度。

vmin和vmax：关于视口高度和宽度的最小值或最大值，vmin等于1/100的视口宽高中的最小值。应用场景：让一个元素始终在屏幕中可见。

ch：数字0的宽度

ex：当前字体的小写x字母的的高度或者1/2的1em^②。应用场景：上实上标和下标

提取到的信息：

1、font-size：若没有声明则会继承父节点的属性

引申：

①window, document,body宽高：

body高度是body元素的高度（包括边框滚动条等），四周默认带有8px的margin

若没给html设置颜色，给body设置了颜色，则body的颜色填充整个背景

视口viewport指的是浏览器可视范围，除去边框，滚动条，工具栏的文档显示区域

②0.5em怎么可能和1ex相等？

实际测试后发现设置0.5em与1ex的表现略有区别。毕竟小写x字母不一等是字体大小font-size的一半。当然不能排除有种字体刚好满足这个条件

relative：会在应有的位置上进行偏移。dom的原位置保留

转载于:https://www.cnblogs.com/cack/p/6250196.html

CSS3几种新的长度单位相关推荐

html隐藏元素的方式,Web前端：CSS3——3种隐藏元素方法的区别
原标题:Web前端:CSS3--3种隐藏元素方法的区别 Web前端教程 CSS3规范的一个新特点是被分为若干个相互独立的模块.一方面分成若干较小的模块较利于规范及时更新和发布,及时调整模块的内容,这些 ...
几种常见的长度单位整理
几种常见的长度单位整理 VW 相对于视口的宽度.视口被均分为100单位的vw 屏幕宽375px,1vw=3.75px; VH 相对于视口的高度.视口被均分为100单位的vh 屏高1200px,1vh= ...
H5、CSS3和ES6新特性
CSS3新特性 01 新增语义化标签 <header>:头部标签 <nav>:导航标签 <article>:内容标签 <section>:定义文档某个区 ...
一种新的高级抖动分离解析方法
一种新的高级抖动分离解析方法 A new analytic approach for advanced jitter separation 抖动分量的分析是现代通信系统调试中一项越来越重要的任务.一方 ...
一种新的攻击方式：使用Outlook 表单进行横向渗透和常驻
本文讲的是一种新的攻击方式:使用Outlook 表单进行横向渗透和常驻, 背景最近我们针对CrowdStrike服务进行例行调查,发现了一种攻击方法,其主要用于横向渗透和系统常驻,而且是以前我们没有 ...
Lyft推出一种新的实时地图匹配算法
点击上方"3D视觉工坊",选择"星标" 干货第一时间送达打车有时也会职业病发作,琢磨一下车辆调度是怎么做的,路径规划算法要怎么写,GPS偏移该怎么纠正等等.不 ...
CBNet：物体检测的一种新的组合主干网络结构
2019-12-11 20:36:00 作者:Tony Shin 编译:ronghuaiyang 导读给大家介绍一种新的网络架构,用来做物体检测的,SOTA. 到目前为止,在COCO数据集上表现最好 ...
Facebook TensorMask：一种新的密集滑动窗口分割技术
导语:TunSoMeM 为探索分割研究提供了新的方向语音播放文章内容由深声科技提供技术支持近日,Facebook 发布了一项新的研究,该研究探索了实例分割的新方法.与掩模 R-CNN 驱动的标准 ...
一种新的计算机视觉技术？将手机的摄像头变成了一个搜索引擎
https://www.toutiao.com/a6698870195391300099/ 智能手机,安全摄像头和扬声器仅仅是行将运行更加人工智能软件以加快图像和语音处置使命的装备中的一小部分.增添硬 ...

CSS3几种新的长度单位

CSS3几种新的长度单位相关推荐

最新文章

热门文章