13.3.2 CSS长度与单位

长度(表示为<length>),其公式为值是一个实数<number>,实数后面再加一个单位(例如:px,em等),如果长度为0,也可以不加单位

示例

div
{
	margin: 0;
}

div
{
	margin: 0px;
}

div
{
	margin: 0em;
}

上面三个例子描述的div的margin都为0,因此可以不用加单位

很多属性可以使用负数的长度值,如果负数的长度值超出了CSS能容纳的限制,此长度值将被转变为可以支持的最接近的长度;如果某个属性不支持负数的长度,那么这个属性的声明将被忽略

CSS长度与单位包含两种类型:相对(relative)与绝对(absolute)

  • 绝对长度不依赖于环境(显示器、分辨率、操作系统等)
  • 相对长度依赖于用户使用的环境

CSS长度与单位示例 -- 可以尝试编辑

引用网址:http://www.dreamdu.com/css/value_length/

CSS绝对长度

CSS支持的绝对长度单位in,cm,mm,pt,pc
单位 英文 描述
in inches 英寸,英制单位,1英寸等于2.54厘米
cm centimeters 厘米,公制单位
mm millimeters 毫米,公制单位
pt points 点,1点等于1/72inches英寸,印刷设计中使用的单位
pc picas 铅字,1个pc等于12个point点,印刷设计中使用的单位

绝对长度单位通常用于打印

CSS长度与单位示例 -- 可以尝试编辑

CSS相对长度

CSS支持的相对长度单位em,ex,px
单位 英文 描述
em 依赖于最近的字体尺寸
ex 依赖于英文子母小x的高度
px pixels 像素,依赖于用户的显示设备

相对长度依赖于使用的环境

CSS长度与单位示例 -- 可以尝试编辑

em单位

依赖于最近的字体尺寸

div
{
	font-size: 12px;
}
span
{
	font-size: 5em;
}
<div>
    梦之都div中定义了12px的字体.
    <span>
        梦之都span中定义了5倍于div的字体.
    </span>
</div>

上面示例中的span中字体为div定义的五倍,因此它是依赖于其父容器的长度

CSS长度与单位示例 -- 可以尝试编辑

div
{
	font-size: 12px;
	height: 5em;
	border: thick solid red;
}

定义div的字体为12px,div的高度为12px的5倍

CSS长度与单位示例 -- 可以尝试编辑

ex单位

em是依赖于最近的字体的大小,ex是相对于小写子母x的高度的倍数。ex测量单位被使用在排版中

px单位

pixel测量单位

px是pixel像素的缩写,这种测量方法依赖于用户计算机显示器的分辨率。例如在相同条件下,1024x768比1280x800的一像素要大。

猴子提示: 网页设计中的字体大小经常使用px做为其单位,因为它很容易理解,而且图像的大小也使用px表示。由于px相对于显示器的实际大小,所以它可在显示器上提供适合的显示。px并不适合于文档的精确打印



  • 教程中有什么不懂的地方?发现教程的错误!对教程有什么建议!快快联系猴子呀dreamdu@163.com,:)
赞助梦之都