CSS中的长度单元的运用引见【css教程】,css

本篇文章给人人带来的内容是关于CSS中的长度单元的运用引见，有肯定的参考价值，有须要的朋侪能够参考一下，愿望对你有所协助。

CSS中有很多属性能够接收长度值，比方： width, height, margin, padding, border-width, font-size, text-shadow。因为运用场景多，因而CSS也供应了很多长度单元。有的是一样平常生活中运用的单元，比方：厘米（cm）和英寸（in）；有的是印刷行业运用的单元，比方：point（pt）和pica（pc）；有的是特地为CSS发现的单元，比方：px。

运用场景

那末这些属性和单元怎样合营运用呢？特定的属性须要运用特定的单元吗？实在并非如此，单元和属性无关，同一个属性任何单元都实用，什么时候运用何种单元是没有限定的，假如属性接收以px为单元的值（比方：margin: 5px），那末它也能够接收英寸或厘米（margin: 1.2in; margin: 0.5cm）为单元的值，反之亦然。

单元虽然和属性无关，然则和输出的序言有肯定关联，比方输出到是屏幕照样纸张。在屏幕上显现和在纸张上面打印引荐运用的单元是不一样的。下表给出了引荐的运用方法：

输出序言	引荐	偶然运用	不引荐
屏幕	em, px, %	ex	pt, cm, mm, in, pc
打印	em, cm, mm, in, pt, pc, %	px, ex

除了和输出序言的关联，这些单元能够从长度值的盘算体式格局区分为相对单元和相对单元。

相对单元

相对单元（px，cm， mm，in，Q，pt和pc）意味着以此为单元的长度值与其代表的物理长度相称，比方width: 1cm即与实际天下中的1cm长度相称，也意味着相对单元在所有的序言上的显现结果是一致的。但这是抱负状况，受显现器和差异浏览器CSS完成的差异，在很多装备上相对单元显现的并不准确。因为px和in的关联为1in=96px，在低分辨率装备上，1px为1像素（pixel，也是px称号的由来）长度，而低分辨率的屏幕上1px每每大于1/96in，所以从px盘算获得的其他相对单元值都不准确。而在高分辨率装备上（如如今的高清屏和打印机）相对单元显现得更准确。因为以上缘由，相对单元更多的是在打印时运用。

曾，CSS请求在盘算机屏幕上准确显现相对单元。然则因为大部分厂商并不能完成这一请求，所以CSS在2011年摒弃了这一请求。现在，相对单元仅在打印和高分辨率装备上一般事情。CSS没有明白定义“高分辨率”的寄义。然则，因为现在低端打印机的每英寸点数为300 dpi，而高端屏幕的每英寸点数为200 dpi，因而所谓的“高分辨率”能够介于两者之间。。

下面贴出相对单元直接的换算公式：

1in = 2.54cm = 25.4mm = 72pt = 6pc = 96px

px

作为CSS中最经常使用的单元，关于px照样有必要多说两句的。px的特征能够归纳如下：

在低分辨率装备上，1px = 1像素；
在高分辨率装备上，1px = 1/96in，1px不肯定即是1像素（比方4.7英寸的iphone上 1px=2像素）；
关于图片显现，1px = 1图片像素，比方：一个600x400分辨率的照片的的CSS宽高即为600px和400px（在4.7英寸iphone上要用1200x800个像素点显现）；

相对单元

相对单元意味着长度值是依据其他长度盘算得出的。相对单元又能够分为基于字体（font based）和基于视窗（viewport based）的：

Font Based

em, ex

起首说说em和ex，em代表元素的当前字体大小，假如元素的font-size为2cm，那末1em即示意2cm。em能够用于掌握尺寸，比方margin: 1em; text-indent:1.5em，此时这些尺寸和元素字体大小相干，因而在大屏幕上（字体尺寸较大）和小屏幕上（字体尺寸较小）会等比缩放，因而em能够用于相应式的设想。假如em直接用于font-size属性，如font-size: 2em，则em示意为父元素字体的大小。

ex很少被运用，ex表现的大小与字体的x-height相干。x-height大抵即是字体中小写字母（比方a，c，m或o）的高度。雷同font-size的差异字体的x-height能够会有很大的差异，所以运用ex发生的结果存在很大的不确定性。