?? 060_css_length_unit.html
字號:
<html>
<head>
<title>CSS長度單位參考-CSS教程-網頁教程與代碼的中文站點-布啦布啦-blabla.cn</title>
<meta name="author" content="布啦布啦 www.blabla.cn">
<meta name="keywords" content="CSS教程,CSS代碼,CSS示例,CSS長度單位參考,px與pt區別,pt,px,em,ex,網頁教程和代碼的中文網站,網頁制作,源代碼,示例,布啦布拉,blabla.cn,examples">
<meta name="description" content="-網頁教程與代碼的中文站點-網頁制作-布啦布啦-blabla.cn">
<meta name="generator" content="blabla buildsite v2.0 - C:\CodeBank\BLABLA\blablasource\webtutorials\200_css\060_css_length_unit.txt">
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<link rel="stylesheet" href="../styles/bla01.css" type="text/css">
<script type="text/javascript">
function WsFvt() {
window.external.addFavorite(
"../default.htm",
"布啦布啦網頁教程與代碼[www.blabla.cn]");
}
function WsHome() {
event.srcElement.style.behavior = "url(#default#homepage)";
event.srcElement.setHomePage("../default.htm");
}
function WsActOn() {
event.srcElement.className = "wsacton";
}
function WsAct() {
event.srcElement.className = "wsact";
}
</script>
</head>
<body class=wsbody>
<div class=wsheader>
<table cellpadding=0 cellspacing=0 class=wslogoarea>
<td class=ws_a1><img src="../images/logo/blabla_logo01.gif" class=blablalogo03></td>
<td class=ws_a2>
<div>
<font class=wsact onmouseover="WsActOn()" onmouseout="WsAct()" onclick="WsFvt()">加入收藏</font> |
<font class=wsact onmouseover="WsActOn()" onmouseout="WsAct()" onclick="WsHome()">設為首頁</font>|
<a href="mailto:webmaster@blabla.cn">聯系我們</a>
</div>
<div style = "height:20px;"></div>
<div>
<a href="../html_tutorials/index.html">HTML教程</a> |
<a href="../html_tutorials/100_html_examples.html">HTML示例代碼</a> |
<a href="index.html">CSS教程</a> |
<a href="100_CSS_examples.html">CSS示例代碼</a> |
<a href="../js_tutorials/index.html">Javascript教程</a> |
<a href="../js_tutorials/100_js_examples.html">Javascript示例代碼</a>
</div>
</td>
</tr></table>
</div>
<div class=wscontent>
<table cellpadding=0 cellspacing=0 class=wscgrid>
<td class=a1>
<div class=wsmenu><div class=box><div class=box>
<!--menupart Start -->
<a href = "../index.html"><H1>網站首頁</H1></a>
<a href = "../html_tutorials/index.html" ><H1>HTML網頁教程與代碼</H1></a><a href = "../html_tutorials/001_HTML_Overview.html" ><P>HTML基本概念</P></a><a href = "../html_tutorials/005_Basic_HTML_Tags.html" ><P>HTML基礎Tag</P></a><a href = "../html_tutorials/010_Format_Tags.html" ><P>HTML常用格式</P></a><a href = "../html_tutorials/015_HTML_entities.html" ><P>HTML特殊字符</P></a><a href = "../html_tutorials/020_HTML_links.html" ><P>HTML超鏈接(Hyperlinks)</P></a><a href = "../html_tutorials/022_html_path.html" ><P>HTML相對和絕對路徑</P></a><a href = "../html_tutorials/025_HTML_tables.html" ><P>HTML表格(Tables)</P></a><a href = "../html_tutorials/030_html_frame.html" ><P>HTML框架(Frames)</P></a><a href = "../html_tutorials/035_html_list.html" ><P>HTML列表(Lists)</P></a><a href = "../html_tutorials/037_html_form.html" ><P>HTML表單(Forms)</P></a><a href = "../html_tutorials/040_html_image.html" ><P>HTML圖片(Images)</P></a><a href = "../html_tutorials/042_html_font.html" ><P>HTML字體(Fonts)</P></a><a href = "../html_tutorials/045_html_bgcolor_background.html" ><P>HTML背景顏色和圖片</P></a><a href = "../html_tutorials/047_html_head.html" ><P>HTML頭部信息(Head)</P></a><a href = "../html_tutorials/050_html_color_ref.html" ><P>HTML顏色參考(Color)</P></a><a href = "../html_tutorials/100_html_examples.html" ><P>HTML演示示例代碼</P></a><a href = "../html_ref/index.html" ><H1>HTML參考(Reference)</H1></a><a href = "../html_tag_ref/index.html" ><P>HTML元素參考</P></a><a href = "../html_attr_ref/index.html" ><P>HTML屬性參考</P></a><a href = "index.html" ><H1>CSS教程和代碼</H1></a><a href = "001_CSS_Overview.html" ><P>CSS簡介</P></a><a href = "005_CSS_Syntax.html" ><P>CSS語法</P></a><a href = "010_css_font.html" ><P>CSS常用字體屬性(font)</P></a><a href = "015_css_text.html" ><P>CSS常用文本屬性</P></a><a href = "020_CSS_background.html" ><P>CSS常用背景屬性</P></a><a href = "025_css_border.html" ><P>CSS常用邊框屬性(border)</P></a><a href = "030_css_margin.html" ><P>CSS邊距屬性(margin)</P></a><a href = "035_css_padding.html" ><P>CSS間隙屬性(padding)</P></a><a href = "040_css_diff_border_margin_padding.html" ><P>邊框/邊距/間隙的區別</P></a><a href = "045_css_list_style.html" ><P>CSS列表屬性(list-style)</P></a><a href = "050_pseudo_class.html" ><P>CSS常用偽類(pseudo-class)</P></a><a href = "060_css_length_unit.html" ><P><B>CSS長度單位參考</B></P></a><a href = "100_CSS_examples.html" ><P>CSS演示示例代碼</P></a><a href = "../js_tutorials/index.html" ><H1>Javascript教程和代碼</H1></a><a href = "../js_tutorials/001_js_overview.html" ><P>Javascript簡介</P></a><a href = "../js_tutorials/020_js_where2write.html" ><P>Javascript寫在哪里</P></a><a href = "../js_tutorials/025_js_variables.html" ><P>Javascript變量(Variables)</P></a><a href = "../js_tutorials/090_js_reserved_words.html" ><P>Javascript保留字</P></a><a href = "../js_tutorials/100_js_examples.html" ><P>Javascript入門代碼示例</P></a><a href = "../js_tutorials/101_js_dom_examples.html" ><P>Javascript DOM代碼示例</P></a><a href = "../ref/index.html" ><H1>參考(Reference)</H1></a><a href = "../ref/ascii.html" ><P>ASCII編碼表</P></a><a href = "../ref/iso_latin_1.html" ><P>ISO Latin-1字符集</P></a>
<!--menupart end -->
</div></div></div>
</td>
<td class=a2><div class=wsarticle><div class=articlepart id = ap>
<div class=wstitle><div class=box><div class=box><h1>CSS長度單位參考</h1></div></div></div>
<!--articlepart start-->
<div class = changefont>
<span onclick= "ap.className='ArticlePartBig';" class = bfont>大字體</span>
<span onclick= "ap.className='ArticlePart';" class = sfont>小字體</span>
</div>
<P>在CSS樣式表中，我們經常會看到pt， px，em，ex，in等這類長度單位。它們各是什么意思，有什么區別呢？</P><P>在CSS樣式表中，長度單位分兩種：</P><UL><LI>相對長度單位，如px, em等 <LI>絕對長度單位，如pt,mm等</LI></UL><H2>也談px和pt的區別</H2><P>經常看到有人拿px和pt比較，主要是為了爭辯在確定字體大小(font-size)或其它CSS屬性大小時，用什么樣的CSS長度單位更加好。有人說，用pt更好，因為pt是絕對長度單位，不會因為屏幕分辨率大小，或者其它因素而改變。</P><P>我去做了一個測試，寫了這樣一個HTML例子。代碼如下：</P><PRE><html></PRE><PRE><head><title>CSS單位長度區別 - px和pt的區別</title></head></PRE><PRE><body ></PRE><PRE><p style = "font-size:20pt;">Font-size is 20pt</p></PRE><PRE><p style = "font-size:20px;">Font-size is 20px</p></PRE><PRE></body></PRE><PRE></html></PRE><P><A href="../asdocs/css_tutorials/css_length_unt_pt_px.html">點擊瀏覽文件</A></P><P>我將我的顯示器分別調到1024*768和800*600的分辨率(指screen resolution)。不管是用pt還是用px設置的字體，都隨著分辨率變化而變化。(我使用的瀏覽器是IE6，其它瀏覽器上尚未測試過。)</P><P>我又寫了另外一個HTML例子，測試一下cm(厘米)。代碼如下：</P><PRE><html></PRE><PRE><head><title>CSS長度單位的區別 - pt,px和cm的區別</title></head></PRE><PRE><body ></PRE><PRE>以下div寬度300pt，高度30pt： <br></PRE><PRE><div style = "width:300pt;height:30pt;border:1px solid blue;"></div></PRE><PRE>以下div寬度300px，高度30px：<br></PRE><PRE><div style = "width:300px;height:30px;border:1px solid blue;"></div></PRE><PRE>以下div寬度10cm，高度3cm： <br></PRE><PRE><div style = "width:10cm;height:3cm;border:1px solid blue;"></div></PRE><PRE></body></PRE><PRE></html></PRE><P><A href="../asdocs/css_tutorials/css_length_unit_div_pt_px_cm.html">點擊瀏覽文件</A></P><P>結果是，cm(厘米)也是隨著顯示器分辨率變化而變化的。</P><P>對于計算機的屏幕設備而言，像素(Pixel)或者說px是一個最基本的單位，就是一個點。其它所有的單位，都和像素成一個固定的比例換算關系。所有的長度單位基于屏幕進行顯示的時候，都統一先換算成為像素的多少，然后進行顯示。所以，就計算機的屏幕而言，相對長度和絕對長度沒有本質差別。任何單位其實都是像素，差別只是比例不同。</P><P>如果把討論擴展到其它輸出設備，比如打印機，基本的長度單位可能不是像素，而是其它的和生活中的度量單位一致的單位了。</P><P>CSS絕對長度單位是對于輸出設備(output device)而言的。拿pt來說，這是一個在文字排版工具(word,adobe等)中非常常用的字體單位，不管你的顯示器分辨率是1024*768，還是800*600，同一篇文檔打印在紙面上的結果是一樣的。</P><P>寫網頁用哪個長度單位更好，是px還是pt呢？</P><P>我個人比較偏向px，因為px能夠精確地表示元素在屏幕中的位置和大小，網頁主要是為了屏幕顯示，而不是為了打印等其它需要的。</P><H2>CSS相對長度單位(relative length unit)</H2><P>CSS相對長度單位中的相對二字，表明了其長度單位會隨著它的參考值的變化而變化，不是固定的。</P><P>以下是CSS相對長度單位列表：</P><P><TABLE><TBODY><TR class=header><TD>CSS相對長度單位</TD><TD>說明</TD></TR><TR><TD>em</TD><TD>元素的字體高度The height of the element's font</TD></TR><TR><TD>ex</TD><TD>字母x的高度The height of the letter "x"</TD></TR><TR><TD>px</TD><TD>像素Pixels</TD></TR><TR><TD>%</TD><TD>百分比Percentage</TD></TR></TBODY></TABLE></P><H2>CSS絕對長度單位(absolute length unit) </H2><P>絕對長度單位是一個固定的值。比如我們常用的有mm，就是毫米的意思。</P><P>以下是CSS絕對長度單位列表：</P><P><TABLE><TBODY><TR class=header><TD>CSS絕對長度單位</TD><TD>說明</TD></TR><TR><TD>in</TD><TD>英寸Inches (1 英寸 = 2.54 厘米)</TD></TR><TR><TD>cm</TD><TD>厘米Centimeters</TD></TR><TR><TD>mm</TD><TD>毫米Millimeters</TD></TR><TR><TD>pt</TD><TD>點Points (1點 = 1/72英寸)</TD></TR><TR><TD>pc</TD><TD>皮卡Picas (1 皮卡 = 12 點)</TD></TR></TBODY></TABLE></P>
<!--articlepart end-->
</div><div></td>
<td class=a3><div class=wslink>
<div class=wsportrait>
<img src="../images/logo/blabla_logo02.gif" class=blablalogo21>
</div>
<div class=wslgreen><div class=box><div class=box>
<h2>布啦布啦旗下網站</h2>
<p><a href="../index.html">布啦布啦網頁教程與代碼</a></p>
<p><a href="http://www.wowstory.com">小斧的魔獸世界</a></p>
<p><a href="../wow/index.html">小斧的魔獸世界鏡像</a></p>
<p><a href="http://hardware.blabla.cn">數碼資訊</a></p>
</div></div></div>
<div style= "background-color:#FFFFF0;
border-top:3px solid #FFCC66; border-bottom:3px solid #FFCC66;border-left:1px solid #FFE0A1;border-right:1px solid #FFE0A1;">
<!-- SiteSearch Google -->
<form method="get" action="http://www.google.com/custom" target="_top">
<table border="0" bgcolor="#ffffff">
<tr><td nowrap="nowrap" valign="top" align="left" height="32">
</td>
<td nowrap="nowrap">
<input type="hidden" name="domains" value="blabla.cn"></input>
<input type="text" name="q" size="18" maxlength="255" value=""></input>
</td></tr>
<tr>
<td> </td>
<td nowrap="nowrap">
<table>
<tr>
<td>
<input type="radio" name="sitesearch" value=""></input>
<font size="-1" color="#000000" style = "font-size:12px;">Web</font>
</td>
<td>
<input type="radio" name="sitesearch" value="blabla.cn" checked="checked"></input>
<font size="-1" color="#000000" style = "font-size:12px;">blabla.cn</font>
</td>
</tr>
</table>
<input type="submit" name="sa" value="Google 搜索"></input>
<input type="hidden" name="client" value="pub-3105632846497229"></input>
<input type="hidden" name="forid" value="1"></input>
<input type="hidden" name="ie" value="GB2312"></input>
<input type="hidden" name="oe" value="GB2312"></input>
<input type="hidden" name="cof" value="GALT:#008000;GL:1;DIV:#336699;VLC:663399;AH:center;BGC:FFFFFF;LBGC:336699;ALC:0000FF;LC:0000FF;T:000000;GFNT:0000FF;GIMP:0000FF;FORID:1;"></input>
<input type="hidden" name="hl" value="zh-CN"></input>
</td></tr></table>
</form>
<!-- SiteSearch Google -->
</div>
<div style ="height:8px;font-size:8px;"></div>
<!--Google Adsense start-->
<div id="googlead" style = "width:160px; height:600px;" ></div>
<!--Google Adsense end-->
</div>
</td></tr>
</table></div>
<div class=wsfooter>
<table cellpadding=0 cellspacing=0 class=wsgrid>
<tr><td class=ws_a1>
<!--footer label start-->
© 2005 blabla.cn版權所有
<!--51yes statistics start-->
<script language="javascript" src="http://count1.51yes.com/click.aspx?id=13420718&logo=12"></script>
<!--51yes statistics end-->
</td></tr></table>
</div>
<!--Google Ad Script Start -->
<div id="googleadcode" style="display:none;">
<script type="text/javascript"><!--
google_ad_client = "pub-3105632846497229";
google_alternate_color = "FFFFFF";
google_ad_width = 160;
google_ad_height = 600;
google_ad_format = "160x600_as";
google_ad_type = "text_image";
google_ad_channel ="";
google_color_border = "A8C8FF";
google_color_bg = "F5F9FF";
google_color_link = "0058DB";
google_color_url = "008000";
google_color_text = "000000";
//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<script language="javascript">
if(document.all.item("googlead") != null)
{
googlead.innerHTML = googleadcode.innerHTML;
}
</script>
<!--Google Ad Script End-->
</body>
</html>?? 快捷鍵說明
復制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -