一日一練-CSS CSS中percentage百分值的使用
阿新 • • 發佈:2018-04-18
水平 -h form 經驗 gin mod transform height font
子曰:學好百分值,考試考百分
首先是確定CSS 中的percentage 都可以應用在CSS 中的哪些屬性,以及這些屬性的值如何進行計算的,參考CSS 參考手冊進行統計。
定位(Positioning)
top
用百分比來定義距離頂部的偏移量。百分比參照包含塊的高度。可以為負值。right
用百分比來定義距離右邊的偏移量。百分比參照包含塊的寬度。可以為負值。bottom
用百分比來定義距離底部的偏移量。百分比參照包含塊的高度。可以為負值。left
用百分比來定義距離左邊的偏移量。百分比參照包含塊的寬度。可以為負值。
尺寸與補白(Dimension)
width
用百分比來定義寬度。百分比參照包含塊寬度。不允許負值。min-width
用百分比來定義最小寬度。不允許負值。max-width
用百分比來定義最大寬度。不允許負值。height
用百分比來定義高度。百分比參照包含塊高度。不允許負值。min-height
用百分比來定義最小高度。不允許負值。max-height
用百分比來定義最大高度。不允許負值margin
用百分比來定義外補白。水平(默認)書寫模式下,參照其包含塊的width
進行計算,其它情況參照height
,可以為負值。padding
用百分比來定義內補白。水平(默認)書寫模式下,參照其包含塊的width
進行計算,其它情況參照height
,不允許負值。
背景與邊框(Backgrounds and Borders)
border-radius
用百分比定義圓形半徑或橢圓的半長軸,半短軸。水平方向百分比參照元素寬度(非內容寬度),垂直方向參照元素高度。不允許負值。border-image-width
用百分比指定圖像邊框的厚度。參照圖像邊框區域的大小(包含border和padding)進行換算。不允許負值。background-position
用百分比指定背景圖像在元素中出現的位置。可以為負值。參考容器尺寸減去背景圖尺寸進行換算。background-size
當屬性值為百分比時,參照背景圖像的background-origin
區域大小進行換算(而不是包含塊大小)。
字體(Font)
font-size
用百分比指定文字大小。其百分比取值是基於父對象中字體的尺寸。不允許負值。
文本(Text)
word-spacing
用百分比指定單詞間隔。可以為負值。(CSS3)。text-indent
用百分比指定文本的縮進。可以為負值。vertical-align
把當前盒提升(正值)或者降低(負值)這個距離,百分比相對line-height計算。當值為0%時等同於baseline。line-height
用百分比指定行高,其百分比基於文本的font-size進行換算。不允許負值。text-size-adjust
用百分比來指定文本大小在設備尺寸不同的情況下如何調整。
伸縮盒(Flexible Box)(新)
flex-basis
用百分比來定義寬度。不允許負值。
變換(Transform)
transform-origin
用百分比指定坐標值。可以為負值。perspective-origin
用百分比指定透視點坐標值,相對於元素寬度。可以為負值。
總結
- 定位中的
top
、right
、bottom
、left
值為百分比時,都是參考包含塊同方向的width
或height
進行計算值 - 尺寸與補白中的
height
、*-height
、width
、*-width
值為百分比時,也是參考包含塊同方向的width
或height
進行計算值 - 而尺寸與補白中的
padding
、margin
,則是水平(默認)書寫模式下,參照其包含塊的width
進行計算,也就是說同書寫的方向相同。(大概是由於padding
是同內容相關的,同時沒有 繼承性,在同一書寫方向上便於計算值) - 字體中的
font-size
則是基於父對象中字體的尺寸(大該是由於font-size
有繼承性) - 文本中的
text-indent
也是基於包含塊的width
進行計算的,(推測是同書寫方向相同,經驗證確實是,當設置writing-mode
為vertical-lr
時,是基於包含塊的height
進行計算的) - 文本中的
line-height
基於font-size
進行計算,而vertical-align
則是基於line-height
進行計算的。 背景與邊框中的
background-position
則是基於容器尺寸減去背景圖尺寸進行換算(是這麽理解的,因為值為50% 時,使得圖像居中,也就是)`background-position` = (容器尺寸-背景尺寸)/2
- 背景與邊框中的
background-size
則是基於background-origin
區域大小(很容易將一個圖進行放大或縮小,下面兩個圖,分別是設置為50% 和33.3333% 的效果)
變換中的
transform-origin
值為百分比時,橫坐標參考元素的寬度,縱坐標參考元素的高度
一日一練-CSS CSS中percentage百分值的使用