梦之都
CSS教程
,
CSS长度与单位
示例，可选择长度单位，查看效果
宽度
30px
em
ex
px
in
cm
mm
pt
pc
%
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS长度与单位体验</title> <style type="text/css" media="all"> .greenbox{background:#ddf8cc;text-align:center;margin:2em;padding:2em;} </style> <script type="text/javascript"> function ChangeUnits() { var oUnits = document.getElementById('theUnits'); var iUnits = oUnits.value; var oBox = document.getElementById('theBox'); oBox.style.width = oBox.innerHTML = "30"+iUnits; } </script> </head> <body> 宽度<br /><div id="theBox" class="greenbox">30px</div> <select id="theUnits" onchange="ChangeUnits(); return false"> <option value="em">em</option> <option value="ex">ex</option> <option value="px">px</option> <option value="in">in</option> <option value="cm">cm</option> <option value="mm">mm</option> <option value="pt">pt</option> <option value="pc">pc</option> <option value="%">%</option> </select> </body> </html>