1. 程式人生 > >一日一練-CSS CSS中percentage百分值的使用

一日一練-CSS CSS中percentage百分值的使用

水平 -h form 經驗 gin mod transform height font

子曰:學好百分值,考試考百分

首先是確定CSS 中的percentage 都可以應用在CSS 中的哪些屬性,以及這些屬性的值如何進行計算的,參考CSS 參考手冊進行統計。

定位(Positioning)

  1. top
    用百分比來定義距離頂部的偏移量。百分比參照包含塊的高度。可以為負值。
  2. right
    用百分比來定義距離右邊的偏移量。百分比參照包含塊的寬度。可以為負值。
  3. bottom
    用百分比來定義距離底部的偏移量。百分比參照包含塊的高度。可以為負值。
  4. left
    用百分比來定義距離左邊的偏移量。百分比參照包含塊的寬度。可以為負值。

尺寸與補白(Dimension)

  1. width
    用百分比來定義寬度。百分比參照包含塊寬度。不允許負值。
  2. min-width
    用百分比來定義最小寬度。不允許負值。
  3. max-width
    用百分比來定義最大寬度。不允許負值。
  4. height
    用百分比來定義高度。百分比參照包含塊高度。不允許負值。
  5. min-height
    用百分比來定義最小高度。不允許負值。
  6. max-height
    用百分比來定義最大高度。不允許負值
  7. margin
    用百分比來定義外補白。水平(默認)書寫模式下,參照其包含塊的width進行計算,其它情況參照height,可以為負值。
  8. padding
    用百分比來定義內補白。水平(默認)書寫模式下,參照其包含塊的width進行計算,其它情況參照height,不允許負值。

背景與邊框(Backgrounds and Borders)

  1. border-radius
    用百分比定義圓形半徑或橢圓的半長軸,半短軸。水平方向百分比參照元素寬度(非內容寬度),垂直方向參照元素高度。不允許負值。
  2. border-image-width
    用百分比指定圖像邊框的厚度。參照圖像邊框區域的大小(包含border和padding)進行換算。不允許負值。
  3. background-position
    用百分比指定背景圖像在元素中出現的位置。可以為負值。參考容器尺寸減去背景圖尺寸進行換算。
  4. background-size
    當屬性值為百分比時,參照背景圖像的background-origin區域大小進行換算(而不是包含塊大小)。

字體(Font)

  1. font-size

    用百分比指定文字大小。其百分比取值是基於父對象中字體的尺寸。不允許負值。

文本(Text)

  1. word-spacing
    用百分比指定單詞間隔。可以為負值。(CSS3)。
  2. text-indent
    用百分比指定文本的縮進。可以為負值。
  3. vertical-align
    把當前盒提升(正值)或者降低(負值)這個距離,百分比相對line-height計算。當值為0%時等同於baseline。
  4. line-height
    用百分比指定行高,其百分比基於文本的font-size進行換算。不允許負值。
  5. text-size-adjust
    用百分比來指定文本大小在設備尺寸不同的情況下如何調整。

伸縮盒(Flexible Box)(新)

  1. flex-basis
    用百分比來定義寬度。不允許負值。

變換(Transform)

  1. transform-origin
    用百分比指定坐標值。可以為負值。
  2. perspective-origin
    用百分比指定透視點坐標值,相對於元素寬度。可以為負值。

總結

  1. 定位中的toprightbottomleft 值為百分比時,都是參考包含塊同方向的widthheight 進行計算值
  2. 尺寸與補白中的height*-heightwidth*-width 值為百分比時,也是參考包含塊同方向的widthheight 進行計算值
  3. 而尺寸與補白中的paddingmargin,則是水平(默認)書寫模式下,參照其包含塊的width進行計算,也就是說同書寫的方向相同。(大概是由於padding 是同內容相關的,同時沒有 繼承性,在同一書寫方向上便於計算值)
  4. 字體中的font-size則是基於父對象中字體的尺寸(大該是由於font-size 有繼承性)
  5. 文本中的text-indent 也是基於包含塊的width 進行計算的,(推測是同書寫方向相同,經驗證確實是,當設置writing-modevertical-lr 時,是基於包含塊的height 進行計算的)
  6. 文本中的line-height 基於font-size 進行計算,而vertical-align 則是基於line-height 進行計算的。
  7. 背景與邊框中的background-position 則是基於容器尺寸減去背景圖尺寸進行換算(是這麽理解的,因為值為50% 時,使得圖像居中,也就是)

    `background-position` = (容器尺寸-背景尺寸)/2
  8. 背景與邊框中的background-size 則是基於background-origin區域大小(很容易將一個圖進行放大或縮小,下面兩個圖,分別是設置為50% 和33.3333% 的效果)
    技術分享圖片
    技術分享圖片
  9. 變換中的transform-origin 值為百分比時,橫坐標參考元素的寬度,縱坐標參考元素的高度

一日一練-CSS CSS中percentage百分值的使用