css单位

longmon 发布于2019-08-30 10:58 / 2010人阅读

摘要：数字与单位之间不能出现空格。有两种类型的长度单位相对和绝对。是可视区宽度单位。以百分比为单位的长度值是基于具有相同属性的父元素的长度值。绝对长度单位视输出介质而定，不依赖于环境显示器分辨率操作系统等。

css有几个不同的单位表示长度

一些设置css长度的属性有 width，height，margin，padding等

长度有一个数字和单位组成如10px，2em，等。
数字与单位之间不能出现空格。如果长度值为 0，则可以省略单位。

对于一些 CSS 属性，长度可以是负数。

有两种类型的长度单位：相对和绝对。

相对长度

对于一些 CSS 属性，长度可以是负数。

有两种类型的长度单位：相对和绝对。

相对长度

相对长度单位指定了一个长度相对于另一个长度的属性。对于不同的设备相对长度更适用。

1.em

em 是一个相对单位。起初排版度量时是基于当前字体大写字母”M”的尺寸的。当改变font-family时，它的尺寸不会发生改变，但在改变font-size的大小时，它的尺寸就会发生变化。

**在没有任何CSS规则的前提下，1em的长度是：
1em == 16px == 0.17in == 12pt == 1pc == 4.2mm == 0.42cm**

如果有任何CSS规则改变了字体大小（不管在文档的什么位置），1em的长度会变成相对于新的font-size的大小。

2.rem

rem和em一样也是一个相对单位，但是和em不同的是rem总是相对于根元素(如:html{})，而不像em一样使用级联的方式来计算尺寸。这种相对单位使用起来更简单。

3.vw

vw是可视区宽度单位。1vw等于可视区宽度的百分之一。vw单位跟百分比很相似，不同的是vw的值对所有的元素都一样，与他们父元素或父元素的宽度无关。有点像rem单位那样总是相对于根元素。

viewpoint width，视窗宽度，1vw=视窗宽度的1%

4.vh
vh和vw（viewport widht）单位一样，不同的是vh是相对于可视区的高度。

viewpoint height，视窗高度，1vh=视窗高度的1%

5.vmin
vmin的值是当前vw和vh中较小的值。在标准尺寸类型的使用实例中，和由自己确定屏幕大小的vw、vh单位相比，vmin是一个更有用的度量标准。

6.vmax

Vmax的值是vw和vh中的较大的值。

7.%

以百分比为单位的长度值是基于具有相同属性的父元素的长度值。

绝对长度

绝对长度单位是一个固定的值，它反应一个真实的物理尺寸。绝对长度单位视输出介质而定，不依赖于环境（显示器、分辨率、操作系统等）。

像素或许被认为是最好的“设备像素”，而这种像素长度和你在显示器上看到的文字屏幕像素无关。px实际上是一个按角度度量的单位。

我这边给大家一个地址，可以换算单位
http://pxtorem.com/

好啦，今天就聊到这里，觉得对您有帮助的话，点个关注再走呗

如有不足，请多多指教

vx：bsl521921

超融合服务器私有云机柜单位单位域名字体单位单位邮箱

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114686.html

聊一聊CSS中的长度单位

摘要：有的是日常生活中使用的单位，比如厘米和英寸有的是印刷行业使用的单位，比如和有的是专门为发明的单位，比如。但是，由于目前低端打印机的每英寸点数为，而高端屏幕的每英寸点数为，因此所谓的高分辨率可能介于两者之间。。 CSS中有很多属性可以接受长度值，比如： width, height, margin, padding, border-width, font-size, text-shadow...

史占广 2019-08-30 15:55 评论0 收藏0
无单位数字和行高 —— 别说你懂CSS相对单位

摘要：无单位数字和行高有一些属性可以接收不带单位的数值意思就是一个不带长度单位的数字，如和等于，等于，如此类推。警告不带单位的只可以表示长度单位和百分比的值，譬如和。段落继承了的行高。长度有两种类型绝对的和相对的。前段时间试译了Keith J.Grant的CSS好书《CSS in Depth》，其中的第二章《Working with relative units》，书中对relative ...

Airmusic 2019-08-29 16:06 评论0 收藏0
视口相关单位的应用 —— 别说你懂CSS相对单位

摘要：还有视口相关单位，依赖浏览器的视口大小来定义长度的。如果你不熟悉视口相关单位的话，在这里简单介绍一下。笔记视口相关单位对于大多数浏览器还是一项比较新的特性，所以当你试图把这个特性和其他样式混搭时，有可能会有一些很奇怪的。前段时间试译了Keith J.Grant的CSS好书《CSS in Depth》，其中的第二章《Working with relative units》，书中对rel...

lbool 2019-08-29 16:06 评论0 收藏0
css单位

摘要：数字与单位之间不能出现空格。有两种类型的长度单位相对和绝对。是可视区宽度单位。以百分比为单位的长度值是基于具有相同属性的父元素的长度值。绝对长度单位视输出介质而定，不依赖于环境显示器分辨率操作系统等。 css有几个不同的单位表示长度一些设置css长度的属性有 width，height，margin，padding等长度有一个数字和单位组成如10px，2em，等。数字与单位之间不能...

Lin_YT 2019-08-02 15:08 评论0 收藏0
响应式布局的常用解决方案对比(媒体查询、百分比、rem和vw/vh）

摘要：我的博客原文地址原文地址如果文章对您有帮助，您的是对我最好的鼓励简要介绍前端开发中，静态网页通常需要适应不同分辨率的设备，常用的自适应解决方案包括媒体查询百分比和等。在端，通常认为中所表示的真实长度是固定的。我的博客原文地址：原文地址如果文章对您有帮助，您的star是对我最好的鼓励～简要介绍：前端开发中，静态网页通常需要适应不同分辨率的设备，常用的自适应解决方案包括媒体查询、百...

PAMPANG 2019-08-05 14:21 评论0 收藏0