在写css样式的时候最常用的长度单位是px(像素),除此之外经常会碰到em、pt等等。
其实css中的长度单位有px、em、pt、in、ex、pc、mm、cm、ch、rem、vw、vh、vmin、vmax。下面品自行将对这些css样式的长度单位做详细说明。
1、px:像素(Pixel),相对于设备的长度单位,像素是相对于显示器屏幕分辨率而言的。譬如,WONDOWS的用户所使用的分辨率一般是96像素/英寸。而MAC的用户所使用的分辨率一般是72像素/英寸。
像素(px)是相对于观看设备的。对于低 dpi 的设备,1px 是显示器的一个设备像素(点)。对于打印机和高分辨率屏幕,1px 表示多个设备像素。
css容器的大小我们经常用px做单位;字体大小(font-size)很多人用px做单位,其实用px做字体单位唯一的致命缺点就是在IE下无法用浏览器字体缩放的功能。
2、em:相对长度单位。相对于元素的字体大小(font-size),如果当前行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。3em 表示当前字体大小的 3 倍
3、pt:点(Point),绝对长度单位。可以尝试和下面的in英寸进行对比,1pt = 1/72 of 1in;
4、ex:相对长度单位。相对于字符“x”的高度。此高度通常为字体尺寸的一半。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。 相对于当前字体的 x-height(极少使用)
5、pc:派卡(Pica),绝对长度单位。相当于我国新四号铅字的尺寸。1pc = 12 pt
6、in:英寸(Inch),绝对长度单位。1in = 96px = 2.54cm
7、mm:毫米(Millimeter),绝对长度单位。国人常用的尺寸;
8、cm:厘米(Centimeter),绝对长度单位。国人常用的尺寸;
9、ch:相对长度单位。相对于 "0"(零)的宽度;
10、rem:相对长度单位。相对于根元素的字体大小(font-size);
11、vw:相对长度单位。相对于视口*宽度的 1%;
12、vh:相对长度单位。相对于视口*高度的 1%;
13、vmin:相对长度单位。相对于视口*较小尺寸的 1% ,vw和vh中较小的那个;
14、vmax:相对长度单位。相对于视口*较大尺寸的 1%,vw和vh中较大的那个;
视口(Viewport)= 浏览器窗口的尺寸。如果视口宽 50 里面,则 1vw = 0.5cm。15、%:相对长度单位。相对于父元素
其中:1in = 2.54cm = 25.4 mm = 72pt = 6pc ;
css样式尺寸如何写?
一些设置 CSS 长度的属性有 width, margin, padding, font-size, border-width, 等。长度由一个数字和单位组成如 8px,2em,10in,7pt,20pc等等。
数字与单位之间不能出现空格。如果长度值为 0,则可以省略单位。
比如以下css样式:
h1 { font-size: 10px; } p { font-size: 5px; line-height: 20px; }
对于个别的CSS样式属性,长度可以是负数。有两种类型的长度单位:相对和绝对。
评论