css长度单位有哪些

2023-03-04 13:34:02html-css07

css长度单位有哪些,第1张

在写css的时候最常用的长度单位是px(像素)，经常看到的还有em，pt等等，其实css中的长度单位一共有8个，分别是px，em，pt，ex， pc ，in，mm，cm。

1、px：像素(Pixel),相对于设备的长度单位，像素是相对于显示器屏幕分辨率而言的。

譬如，WONDOWS的用户所使用的分辨率一般是96像素/英寸。而 MAC 的用户所使用的分辨率一般是72像素/英寸。

2、em：相对长度单位。相对于当前对象内文本的字体尺寸。

如当前行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸（rem：相对长度单位。相对于根元素(即html元素)font-size计算值的倍数）

em相对于父元素，rem相对于根元素。

如当前行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

3、pt：点(Point)，绝对长度单位。

4、ex：相对长度单位。相对于字符“x”的高度。此高度通常为字体尺寸的一半。

如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

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

6、in：英寸(Inch)，绝对长度单位。

7、mm：毫米(Millimeter)，绝对长度单位。

8、cm：厘米(Centimeter)，绝对长度单位。

（一） 关键点

1. 以前IE无法调整那些使用px作为单位的字体大小，但现在几乎IE都支持；

2. 国外的大部分网站能够调整的原因在于其使用了em作为字体单位

3. Firefox能够调整px和em，但是96%以上的中国网民使用IE浏览器(或内核)。

（二） em如何来的？

1. 任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符

合: 1em=16px。那么12px=0.75em,10px=0.625em。

2. 为了简化font-size的换算，需要在css中的body选择器中声明 Font- size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。

（三） em有如下特点：

1. em的值并不是固定的

2. em会继承父级元素的字体大小。

（四）__所以我们在写CSS的时候，需要注意两点： __

1. body选择器中声明Font-size=62.5%；

2.将你的原来的px数值除以10，然后换上em作为单位

3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

例如：

再如: 以下表示首行缩进两个字符

当客户端的浏览器文本大小设置为“medium”, ems和百分比之间没有区别。然而,当设置改变,差别是相当大的。“Smallest”设置,ems比百分比小得多,而当设置为“Largest”,这时恰恰相反,ems比百分比显示地更大。有些可能会说,当真正去扩展时em单位在扩展,在实际的应用程序中,em文本尺度变化太大, 在一些客户端机器上最小的文本变得不是很清晰。

一般来说, 1 em = 12 pt = 16 px = 100% 。确定body的字体大小时候，当使用这些font-size, 增加基础本字体大小(使用CSS选择器)从100%到120%，让我们看看会发生什么。

一般来说,当我开始一个新的设计,我将在 body元素上使用百分比 (body { font-size: 62.5%})， 然后使用em单位大小 来比较。只要body使用百分比单位设置,您可以选择使用百分比或ems或其他任何CSS规则和选择器并且在你的基础字体大小上保持使用百分比的好处。在过去的几年中,这确实成为设计的标准。

像素现在被认为是可接受的字体大小单位(用户可以使用浏览器的“缩放”功能读小文本),虽然由于移动设备非常高的密度屏幕(一些Android和iPhone设备每英寸超过200到 300个像素,让你11 - 12-pixel字体很难看到!)他们也开始引起一些问题。因此,我将继续使用百分比作为web文档中的基础字体大小。

1.文本类属性

① 字体类型

语法：font-family:字体1,字体2,字体3...

设置多个字体时，浏览器会优先识别字体1，找不到则识别字体2，都无法识别时，显示浏览器默认字体。

② 字体大小

语法：font-size:数值+单位

字体大小单位有px、em、rem、pt；浏览器默认大小为16px；字体大小一般设置为偶数值；谷歌浏览器识别最小字体为12px。

③ 字体加粗

属性值：normal常规、bold加粗、bolder更粗、100-900数值

数值100-900字体加粗程度不同，其中100-500为常规字体，600-900为加粗字体。

④字体颜色

颜色值写法有三种：直接写颜色单词，如red；十六进制写法，如color:#000；rgb写法，color:rgb(0,0,0)