css3几种新的长度单位

linzebingo      2022-02-07     174

关键词:

参考文章: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的原位置保留

csspxemrem%vwvhvm区别

...​​css3​​​开始,浏览器对逻辑单位的支持又提升了新的境界,增加了​​rem、vh、vw、vm​​等新的单位长度。新技术的出现必然是为了解决旧技术存在的问题和不便,我们利用这些新的单位可以开发出更为完善的响应式页... 查看详情

几种网页布局方式

...容,一般情况下是检测设备屏幕的宽度来实现。注:以上几种布局方式并不是独立存在的,实际开发过程中往往是相互结合使用的。 查看详情

8.2css3新增标签盒子模型长度单位颜色渐变径像渐变

#CSS3盒子模型* box-sizing   值content-box默认值包括所有的值/                    border-box只算边框 查看详情

css3.0前端长度单位pxemremvmvhvmpcptin你真的懂了吗?

1:废话不多说,直接看如下图表:2:px就不过多介绍了,就是像素点的大小,加入您的屏幕分辨率为1920,则每一个相当于每一个有横着的1920个像素点;3:em为相对单位,一般以body内的font-size为基准进行定义,默认值1em=16px,假... 查看详情

css3概要选择器特殊性与刻度单位

...、特殊性(优先级)3.2、计算特殊性值四、刻度4.1、绝对长度单位4.2、文本相对长度单位4.3、WebApp与Rem五、示例与帮助下载web前端开发者最最注的内容是三个:HTML、CSS与JavaScript,他们分别在不同方面发挥自 查看详情

小程序单位用那个号

...小程序单位对应的符号如下:1,pt,单位名称为点,绝对长度单位。2,px,像素,相对长,度单位。3,em,相对长度单位。4,rem,是CSS3新增的一个相对单位,是相对HTML根元素。5视口单位vw:1vw=视口宽度的1%,vh:1vh=视口高度的... 查看详情

css单位解释.

长度单位主要有以下几种em ex ch rem vw vh vm cm mm in pt pc px%,大概可以分为几种“绝对单位”和“相对单位”和“百分比单位”。绝对单位:pxincmmm相对单位:emre 查看详情

博客上的几种新职业介绍(代码片段)

...现了一些共同点。我觉得可以把这些博主分类一下,形成几种新的职业。我不是在嘲讽谁,真的。超文本抄书匠HypertextBookCopier工作描述手打大师,大段抄录实体书、教材、资料内容,并发表在博客里,作为教程系列,或者记录... 查看详情

css3-pxemrem区别介绍

PXpx像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。PX特点1.IE无法调整那些使用px作为单位的字体大小;2.国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位;3.Firefox能够调整px和em,rem,... 查看详情

windows的度量单位有哪几种?

1、屏幕坐标屏幕坐标描述物理设备(显示器、打印机等)的一种坐标体系,坐标原点在屏幕的左上角,X轴向右为正,Y轴向下为正。度量单位是象素。原点、坐标轴方向、度量单位都是不能够改变的。2、设备坐标(又称物理坐... 查看详情

详解css中的几种长度pxempt

说说css的几种距离吧,大致有px、em、pt、pc、in、mm、cm、ex八种,其中最常见到的是px,我还见到过的有ex和mm、cm,当然后两个在当年见的更多。其实px,我们最熟悉,而在电脑上也应用最多,因为显示器的分辨率就是...px*....px,... 查看详情

javascript一种新的对象创建方式-object.create()

...什么?  Object.create(proto[,propertiesObject])是E5中提出的一种新的对象创建方式,第一个参数是要继承的原型,如果不是一个子函数,可以传一个null,第二个参数是对象的属性描述符,这个参数是可选的。  例如: 1functio 查看详情

视区相关单位vw,vh..简介以及可实际应用场景

一、N多的唠哩唠叨CSS3中一些新的单位早在去年春暖花开的时候就介绍了,参见:CSS长度值及时间、频率、角度单位。显然,其中就提到了本文要感叹的单位vw,vh,见下图:不过“我看见你”和“我触碰你”是不一样的。正好,... 查看详情

“对症下药”的11种新的编程语言

...作的。大多数的开发人员在日常工作中都会使用一种或者几种成熟的语言进行编码,比如C、C++、Java等,不过它们也并不完美,所以新的工具也孕育而生。在本文中,来自TranslucentDatabases,FreeforAll图书作... 查看详情

qprocess::startdetached(5.10有了一种新的方式)

FromQt5.10on,thereisanewwayhowtostartdetachedprocesseswith QProcess.Ofcourseyouknowthis,butletmequicklyrepeatwhatadetachedprocessis.Ifyoustartaprogramusing QProcesswithoutdetaching,thenthede 查看详情

两点补充——css3新属性以及弹性布局

... 2、-moz-:火狐  3、-mo-:IE  4、-o-:Opera欧朋二、【CSS长度单位】  1、px:像素。长度固定,表示分辨率占几个像素点;  2、%:表示相对于默认值的百分比;  3、em:长度与元素的字号挂钩。  rem:长度与根元素的字号... 查看详情

视区相关单位vw,vh..简介以及可实际应用场景——张鑫旭

一、N多的唠哩唠叨CSS3中一些新的单位早在去年春暖花开的时候就介绍了,参见:CSS长度值及时间、频率、角度单位。显然,其中就提到了本文要感叹的单位vw,vh,见下图:不过“我看见你”和“我触碰你”是不一样... 查看详情

css单位总结

单位描述em相对长度单位,相对于自身元素的字号大小,如果没有设置即参照父容器的字号大小或浏览器默认字号大小;举例:如一个div#box的宽度设置为#boxwidth:10em,其字号大小#boxfont-size:14px,则此div的宽度为14... 查看详情