iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 13
0
Modern Web

CSS大全閱讀筆記系列 第 13

第四章:數值與單位(2)

  • 分享至 

  • xImage
  •  
  1. 數字與百分比:
    a. 整數:
    - 一個以上的數字,前面可加正負號,數值語法裡以<integer>表示。
    - 超出定義範圍的整數值被視為不合法,會導致整個宣告被忽略。
    - 某些屬性定義的行為會讓超出容許範圍的數值被轉換為最接近的可接受數值,此行為被稱為clamping。
    b. 數字:
    - 可以是<integer>,也可以是小數,且正負不論,但必須是實數,數值語法裡以<number>表示。
    - 某些屬性只能接受<integer>,某些屬性能接受的是<number>,必須區分清楚。
    - 與整數相同,超出定義範圍的整數值被視為不合法,整個宣告都會被忽略。
    - 某些接受數字的屬性也有clamping行為。
    c. 百分比:
    - 由<number>加上百分號構成,在數值語法裡以<percentage>表示。
    - 百分比數值都會有被視為基準值的分母,有可能是同元素的另一屬性值、繼承自親代或祖先元素的數值,任何能夠使用百分比的屬性,都會同時定義容許範圍與視為分母的基準值。
    d. Fraction:
    - 是由<number>加上fr標記構成,一個等分單位記為1fr。
    - 這是格線佈局(Grid Layout)中的觀念,用來將佈局中沒有限制的空間分割成同樣的等份
  2. 距離:
    a. 所有長度單位都是一個包含正負值的數字加上標記,有些只接受正值、有些可以用<number>,最後會加上一個通常是兩個字母構成的標記單位,唯一的例外的是0,0不需要加上任何標記單位也不會被誤解。距離可以分為絕對長度單位和相對長度單位兩種。
    b. 絕對長度單位:
    - 其中前六項(in、cm、mm、q、pt、pica)很少使用在網頁設計上,像素(px)是比較常使用的網頁設計單位,但在定義列印樣式表時,英吋、點、pica也是常使用的單位。
    - 英吋(in):美制單位,1in=2.54cm。
    - 公分(cm):1cm=0.394in。
    - 公釐(mm):1cm=10mm。
    - 四分之一公釐(q):1mm=4q,注意支援度。
    - 點(pt):是印表機和活字排版使用的單位,同時也是文字處理程式中的標準單位。72pt=1in,因此font-size: 18pt;=font-size: 0.25in;
    - pica:這是另一個印刷領域的單位,1pica=12pt。
    - 像素(px):是指螢幕上的小格點,像素是常見的網頁設計單位,尤其適合表示影像大小,不過時下流行的響應式排版更常使用視埠(viewport)來處理。CSS規範定義96px=1in,且建議顯示器不等於96ppi要轉換成參考像素,但現今大多數螢幕某英吋的實際像素都大於此值,因此許多使用者代理都直接採用螢幕上實際的像素大小,而忽略此定義。

(絕對長度單位結束,距離未完)


上一篇
第四章:數值與單位(1)
下一篇
第四章:數值與單位(3)
系列文
CSS大全閱讀筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言