CSS页面布局单位总结

Posted 2021-03-17 xiugeng

一、绝对长度单位

　　绝对长度单位视借质而定，不依赖于环境（显示器、分辨率、操作系统等）。绝对长度单位相互之间是固定的，并固定在一些物理测量中。主要运用在输出环境已知的情况下。

　　绝对单位包括物理单位(pysical units：in, cm, mm, pt, pc, Q)和视角单位(visual angle unit：px)。

单位	描述
cm	厘米，1cm = 96px/2.54
mm	毫米，1mm = 1/10th of 1cm
in	英寸 (1in = 96px = 2.54cm)
px *	像素 (1px = 1/96th of 1in)
pt	point，大约1/72英寸； (1pt = 1/72in)
pc	pica，大约6pt，1/6英寸； (1pc = 12 pt)

 

 

 

 

 

 

 

 

 

 

　　示例如下所示：

h1 { margin: 0.5in }      /* inches  */
h2 { line-height: 3cm }   /* centimeters */
h3 { word-spacing: 4mm }  /* millimeters */
h3 { letter-spacing: 1Q } /* quarter-millimeters */
h4 { font-size: 12pt }    /* points */
h4 { font-size: 1pc }     /* picas */
p  { font-size: 12px }    /* px */

　　所有的绝对长度单位都是兼容，px是它们的标准单位。

　　对于css设备，这些维度可以互相锚定：

• 通过将物理单位与其物理测量值相关联，或
• 通过将像素单位与参考像素相关联

　　对于典型视距下的印刷媒体，锚点单位应该是标准物理单位(inches、centimeters等)之一。对于屏幕媒体(含高分辨率设备)、低分辨率设备、观看距离异常设备，推荐使用锚点单位作为像素单位。对于这样的设备，建议像素单位是指最接近参考像素的设备像素的总数。

1、px(像素)

　　px 是 pixels(像素) 的缩写，是一种绝对单位，用于屏幕显示器上，传统上一个像素对应于计算机屏幕上的一个点，而对于高清屏则对应更多。

　　任何现代显示屏，不管是手机，平板，笔记本还是电视都是由成千上万的像素组成的，所以我们可以使用这些像素来定义长度。

　　CSS 将光栅图像(如照片等)的显示方式定义为默认每一个图像大小为“1px”。 一个“600x400”解析度的照片的长宽分别为“600px”以及“400px”，所以照片本身的像素并不会与显示装置像素(可能非常小)一致，而是与 px 单位一致。如此就可以将图像完整的与网页的其它元素排列起来。

　　注意：

• chrome 浏览器最小的字体为 12px，如果设置 10px 也会渲染成 12px 。
• 如果锚单位是像素单位，那么物理单位可能与它们的物理测量值不匹配。否则，如果锚单位是物理单位，则像素单位可能不会映射到所有设备像素。

2、新旧css对于像素单位和物理单位定义区别

　　在以前的CSS版本中，像素单位与物理单位之间并没有固定的比例关系：物理单元总是与它们的物理测量值联系在一起，而像素则会随着参考像素的变化而变化。

　　现在版本中，很多内容均过多地依赖于96dpi的假设，打破这一假设会破坏内容。

　　参考像素是设备上一个像素的视角，像素密度为96dpi，与阅读器的距离为一臂之长。一臂标称长度为28英寸，其视角约为0.0213度。在臂长范围内，1px相当于0.26毫米(1/96英寸)。

　　下图说明了观看距离对参考像素大小的影响：71厘米(28英寸)的阅读距离产生0.26毫米的参考像素，而3.5米(12英尺)的阅读距离产生1.3毫米的参考像素。

　　

　　由上图可知，如果观看距离增加，显示像素必须变得更大。

　　下图显示了影响设备的分辨率的像素单元：1px的面积1px是由一个单一的点在一个低分辨率的设备(例如，一个典型的计算机显示器)，在同一地区覆盖了16点高分辨率设备(如打印机)。

　　 

　　由上图可知，显示在高分辨率设备上覆盖1px*1px的区域需要的设备像素(点)比在低分辨率设备上覆盖同样的区域需要更多的设备像素(点)。

3、pt(点)

　　点(Points)，绝对长度单位。

4、pc(派卡)

　　派卡(Picas)，绝对长度单位。相当于我国新四号铅字的尺寸。 

5、cm(厘米)、mm(毫米)、in(英寸)、Q(1/4毫米)

　　厘米(Centimeters)，绝对长度单位。

　　毫米(Millimeters)，绝对长度单位。

　　英寸(Inches)，绝对长度单位。 

　　四分之一毫米(quarter-millimeters)，绝对长度单位。

　　注意：值不区分大小写，序列化为小写，例如1Q序列化为1Q。

二、相对长度单位

　　相对长度单位指定一个长度相对于另一个长度的属性。使用相对单位的样式表可以更容易地从一个输出环境扩展到另一个输出环境。

　　因此当面对不同的设备时，相对长度更适用。

单位	描述
em	它是描述相对于应用在当前元素的字体尺寸，所以它也是相对长度单位。一般浏览器字体大小默认为16px，则2em == 32px；
ex	依赖于英文字母小 x 的高度
ch	数字 0 的宽度
rem	根元素（html）的 font-size
vw	viewpoint width，视窗宽度，1vw=视窗宽度的1%
vh	viewpoint height，视窗高度，1vh=视窗高度的1%
vmin	vw和vh中较小的那个。
vmax	vw和vh中较大的那个。
%

 

 

 

 

 

 

 

 

 

 

 

 

 

 

　　子元素不继承指定的父元素的相对值；它们继承计算的值。

1、字体相对长度

 

 

 

2、窗口百分比长度

 

 

三、calc单位运算

　　calc()函数用于动态计算长度值，单位运算时可以使用各种单位进行加减乘除运算。