绝对长度单位比较
宽度20cm的盒子
宽度20mm的盒子
宽度20Q的盒子,1Q等于四分之一毫米
宽度2in(英寸)的盒子，1 in=2.54cm = 96px
宽度20pc的盒子，1 pc=1/16 in
宽度20pt的盒子, 1 pt=1/72 in
宽度20px的盒子, 1 px=1/96 in
相对长度单位比较
宽度40vw的盒子,高度30vh，vw视窗宽度的1%,vh视窗高度的1%
宽度40vmin的盒子,高度30vmin的盒子，vmin视窗较小尺寸的1%
宽度40vmin的盒子,高度30vmin的盒子,视图大尺寸的1%
相对长度单位比较
20ex字符“x”的高度
宽度20ch的盒子,ch数字“0”的宽度
20lh的盒子,元素的line-height
em,rem单位比较
这里的字体是1.3em,em以父元素section为准， font-size:14px
这里的字体是1.3rem,rem以根元素html为准， font-size:18px
百分比单位比较
I am 200px wide
I am 40% wide
I am 200px wide
I am 40% wide
只有数字的单位
这个盒子定义透明度为0.6，背景色为skyblue
各种颜色值演示
这个盒子定义背景色: deeppink;
这个盒子定义背景色：#c55da1
这个盒子定义背景色：rgb(197, 93, 161)
这个盒子定义背景色：rgba(197, 93, 161,.6)
这个盒子定义背景色：hsl(321, 47%, 57%)
函数
这个盒子的宽度是calc(20% + 50px)
最大尺寸演示--width: 100%，max-width: 100%
最小尺寸演示--width: 100%，min-width: 300px,max-width: 900px
盒子演示
