您當前的位置:首頁 > 前端開發 > css技術 css技術

css中的八種長度單位_CSS教程

發布時間:08-12  來源:云動網絡  作者:云動  點擊:

  其實css中的長度單位一共有8個,分別是px,em,pt,ex,pc,in,mm,cm;px:像素(Pixel),相對于設備的長度單位,像素是相對于顯示器屏幕分辨率而言的。譬如,WONDOWS的用戶所使用的分辨率一般是96像素/英寸。而MAC的用戶所使用的分辨率一般是72像素/英寸。
  em:相對長度單位。相對于當前對象內文本的字體尺寸。如當前行內文本的字體尺寸未被人為設置,則相對于瀏覽器的默認字體尺寸。
  ex:相對長度單位。相對于字符“x”的高度。此高度通常為字體尺寸的一半。如當前對行內文本的字體尺寸未被人為設置,則相對于瀏覽器的默認字體尺寸。
  pt:點(Point),絕對長度單位。
  pc:派卡(Pica),絕對長度單位。相當于我國新四號鉛字的尺寸。
  in:英寸(Inch),絕對長度單位。
  mm:毫米(Millimeter),絕對長度單位。
  cm:厘米(Centimeter),絕對長度單位。
  其中:1in = 2.54cm = 25.4 mm = 72pt = 6pc ;容器的大小我們經常用px做單位,大家都沒什么異議,字體大小(font-size)很多國內的人(包括我)使用px做單位,其實用px做字體單位唯一的致命缺點就是在IE下無法用瀏覽器字體縮放的功能。如圖。或者以前的按住Ctrl+滾動鼠標的中間的滾輪。
  所以多人建議使用em,對于用慣了px的人用em肯定不是很方便,這里提供一些轉換公式和對照表供大家參考:
  px to em:Example: 12px / 16px = .75em
  px to %:Example: 12px / 16px * 100 = 75%
  px to pt:Example: 16px * 72 (72 points = 1 inch) / 96 (96 pixels per inch in Windows, 72 in Mac) = 12ptem to px:Example: .75em * 16px = 12pxem to %:Example: .75em * 100 = 75%
  % to px:Example: 75 * 16px / 100 = 12px
  % to em:Example: 75 / 100 = .75em
  pt to px:Example: 12pt * 96ppi / 72ppi = 16px

Pixels EMs Percent Points
6px 0.375em 37.5% 5pt
7px 0.438em 43.8% 5pt
8px 0.5em 50% 6pt
9px 0.563em 56.3% 7pt
10px 0.625em 62.5% 8pt
11px 0.688em 68.8% 8pt
12px 0.75em 75% 9pt
13px 0.813em 81.3% 10pt
14px 0.875em 87.5% 11pt
15px 0.938em 93.8% 11pt
16px 1em 100% 12pt
17px 1.063em 106.3% 13pt
18px 1.125em 112.5% 14pt
19px 1.188em 118.8% 14pt
20px 1.25em 125% 15pt
21px 1.313em 131.3% 16pt
22px 1.375em 137.5% 17pt
23px 1.438em 143.8% 17pt
24px 1.5em 150% 18pt

 

更多
【打印】 【關閉】
欄目導航
同城游美女捕鱼宝藏系统在哪里 斗地主棋牌游戏 重庆时时开奖结果记录官 登录北京时时结果 时时彩怎么拉人最快 金蟾捕鱼在线玩 云南时时五星综合走势图 三方28必赚模式 最快的时时彩开奖软件 开元棋牌外挂 北京时时直播网 排列三预测号 极速时时彩是官方 老时时彩360开奖数据 千炮捕鱼大满贯免费安装 北京时时pk10走势 湖南幸运赛车彩票网