css样式单位px,em,pt,ex,pc,in,mm,cm详解

admin
admin
admin
376
文章
102
评论
2021年12月20日13:20:10
评论
794

css样式单位px,em,pt,ex,pc,in,mm,cm详解

在写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样式属性,长度可以是负数。有两种类型的长度单位:相对和绝对。

admin
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: