资源描述

css长度单位.docx

《css长度单位.docx》由会员分享，可在线阅读，更多相关《css长度单位.docx（27页珍藏版）》请在冰豆网上搜索。

css长度单位.docx

css长度单位

1ch

DOCTYPEhtml>

ch_

描述：

数字“0”的宽度

-->

定义一个宽度正好能装下10个0的容器：

0000000000

2cm

DOCTYPEhtml>

描述：

厘米（Centimeters）。

绝对长度单位。

1in=2.54cm=25.4mm=72pt=6pc=96px

示例代码：

div{font-size:

1cm;}

p{height:

10cm;}

-->

定义一个宽度为10cm的容器：

这是一个宽度为10cm的容器

3em

DOCTYPEhtml>

em_CSS参考手册_web前端开发参考手册系列

描述：

相对长度单位。

相对于当前对象内文本的字体尺寸。

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

-->

假定当前默认字体尺寸是14px，nem即为14px字体尺寸的n倍：

1em:

1em大小的文字

2em:

2em大小的文字

3em:

3em大小的文字

4ex

DOCTYPEhtml>

描述：

说明：

相对长度单位。

相对于字符“x”的高度。

通常为字体高度的一半。

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

-->

定义一条与字母x高度相同的线：

xxxx

5in

DOCTYPEhtml>

描述：

英寸（Inches）。

绝对长度单位。

1in=2.54cm=25.4mm=72pt=6pc=96px

示例代码：

div{font-size:

1in;}

p{height:

10in;}

-->

单位转换对比：

1in

72pt

6pc

96px

2.54cm

25.4mm

1in=2.54cm=25.4mm=72pt=6pc=96px

6lengthindex

DOCTYPEhtml>

LengthUnitsindex

描述：

长度。

-->

--[iflteIE8]>

[endif]-->

table{

border:

1pxsolid#666666;

border-width:

1px;

}

th{

border:

1pxsolid#666666;

}

tr{

border:

1pxsolid#666666;

height:

40px;

}

td{

border:

1pxsolid#666666;

}

CSSLengthUnits

长度单位

长度单位LengthUnits

LengthUnits
长度单位

CSSVersion
版本

Description
简介

文本相对长度单位Font-relativeLengthUnits

CSS1

相对于当前对象内文本的字体尺寸

CSS1

相对于字符“x”的高度。

通常为字体高度的一半

CSS3

数字“0”的宽度

rem

CSS3

相对于根元素（即html元素）font-size计算值的倍数

视口相对长度单位Viewport-relativeLengthUnits

CSS3

相对于视口的宽度。

视口被均分为100单位的vw

CSS3

相对于视口的高度。

视口被均分为100单位的vh

CSS3

相对于视口的宽度或高度，总是相对于小的那个。

视口的宽度或高度被均分为100单位的vm

绝对长度单位AbsoluteLengthUnits

CSS1

厘米

CSS1

毫米

CSS1

英寸（inches）;1in=2.54cm

CSS1

点（points）;1pt=1/72in

CSS1

派卡（picas）;1pc=12pt

CSS1

像素（pixels）;1px=1/96in

css长度单位.docx

定义一个宽度正好能装下10个0的容器：

定义一个宽度为10cm的容器：

假定当前默认字体尺寸是14px，nem即为14px字体尺寸的n倍：

定义一条与字母x高度相同的线：

单位转换对比：

定义一个宽度为100mm的容器：

单位转换对比：