DIV+CSS基础DIV+CSS补充知识:CSS基本单位和特殊单位

DIV+CSS补充知识:CSS基本单位和特殊单位

CSS中最常见的单位是px(像素)和相对单位em,以及百分比。除了这些单位,我们还可以使用传统的长度单位来定义元素,例如cm(厘米),mm(毫米),in(英寸),pt(磅)等,例如:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试网页标题</title>
<style type="text/css">
#a1 {font-size:0.8cm;}
#a2 {width:8cm;height:1in;font-size:14pt;background:#eee;}
</style>
</head>
<body>
<div id="a1">
<p>青花瓷是用含氧化钴的钴矿为原料,在陶瓷坯体上描绘纹饰,再罩上一层透明釉,经高温还原焰一次烧成。</p>
</div>
<div id="a2">
<p>明清时期,还创烧了青花五彩、孔雀绿釉青花、豆青釉青花、青花红彩、黄地青花、哥釉青花等衍生品种。</p>
</div>
</body>
</html>

浏览这个网页,我们可以看到通过这些单位都可以定义元素的尺寸及字体大小等,不过这些单位并不常用。

考虑到用户设备分辨率的不同,如果想要制作自适应电脑和手机的网页,则建议大家使用百分比来定义元素宽度,使用相对单位em定义字体大小,这样更具有灵活性。

在CSS3中,还新增了一些有用的单位:

ch 通常是数字“0”的宽度,假如给定一个等宽字体的字体,一个N个字符单位宽的盒子,比如width:10ch,它刚好可以一直容纳一个有10个字符的应用那个特定字体的字符串。

rem 相对于根元素(即html元素)的font-size计算值的倍数,与em单位略有不同,em单位是相对于父元素

vw 表示当前视窗宽度的1%,也就是说100vw=当前视窗的宽度

vh 表示当前视窗高度的1%,也就是说100vh=当前视窗的高度

vmin 表示vw和vh中较小的那个

vmain 表示vw和vh中较大的那个

当我们制作自适应电脑和手机的网页,也许以上几个单位会很有用,大家可以试试看。

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.cssaaa.com/div_css/19.html