css百分比的應用

時間 2019-12-09

標籤 css 百分比應用欄目 CSS 简体版

原文原文鏈接

前言

百分比的應用隨處可見，在這裏作一個小小的總結。git

使用百分比的場合

[ 盒子模型 ]
- width、height
[ 文本 ]
- font-size、line-height 、vertical-align
[ 背景 ]
- border-radius、background-position
[ 佈局 ]
- bottom、left、right、top
[ 動畫 ]
- transform: translate

若是上面列舉的全部屬性你都可以輕鬆地說出它們的百分比含義，那麼估計這篇文章就不大適合你了。github

接下去咱們使用JsFiddle上面的demo來逐個說說這些樣式的百分比bash

1. width 和 height

這個最經常使用也是最簡單的了，它們的百分比計算是基於包裹它的父元素的寬和高來計算，好比:佈局

其盒子模型如圖所示 :
動畫

有一種特殊狀況是，父元素沒有明確的高度定義 [ 指的是不定義height或者使用min/max-height這種，都屬於不明確的高度定義 ]，而且子元素使用百分比而且不是絕對定位，那麼這時候的百分比等同於auto。this

width : auto

在 CSS3 中，width:auto多種尺寸表現有了專門的屬性值進行對應spa

.example1 {
    width: fill-available;
}
.example2 {
    width: max-content;
}
.example3 {
    width: min-content;
}
.example4 {
    width: fit-content;
}
複製代碼

width 的四種表現

充分利用可用空間 [ fill-available ]

塊級元素
<div> 、<p>這些元素的寬度默認是100%基於父級容器的
行內元素
<inline-block> 內容超過一行，且寬度大於容器寬度的時候

收縮與包裹 [ fit-content ]

float 、position : absolute
width = 內容寬度
收縮到最小 [ min-content ]
- table-layout = auto、父元素爲position : relative且寬度很小，子元素爲position : absolute
  [ 你們空間都不夠的時候，文字能斷的就斷，中文是隨便斷的，英文單詞不能斷 ]

超出容器限制 [ max-content ]

行內元素
white-space:nowrap

height : auto

height:100% 暗示元素將具備其父容器的100％高度。
height:auto 意味着，該元素將具備靈活的高度，即其高度將取決於其子元素的高度翻譯

塊級元素
- 子元素 => (塊級元素)
  height = .子元素 { height }
- 子元素 => (行內元素)
  由行內元素組成line-box高度撐開
行內元素
line-height與vertical-align

2. margin和padding

這兩個屬性的百分比就比較有意思了，也是咱們常常用錯的兩個。在CSS盒子模型規範明確提出了其百分比的含義：設計

The percentage is calculated with respect to the width of the generated box's containing block. Note that this is true for 'margin-top' and 'margin-bottom' as well. If the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.1.3d

padding的解釋也是相似。

上面的意思能夠總結出三點：

百分比的計算是基於其包含塊的寬度
百分比的計算規則適用於 margin 和 padding 的四個方向
若是包含塊的寬度取決於該元素，那麼百分比的使用結果是未定義的。

這時定有童鞋會疑惑，爲何 CSS 規範的制定者會選擇使用包含塊的寬度來做爲參考值，而不是高度？

其實在上面總結的三點中已經有所涉及的了，在咱們平時的樣式佈局中，元素的高度取決於子元素的高度，若是子元素的 margin 或者 padding 的百分比又依賴於包含塊的高度，那麼兩者互相依賴，就永遠沒法獲得一個穩定的值，陷入了一種死循環，所以也許是基於這個考慮，CSS 的規範中才會提到上面要點的第三點。以上純屬本身的猜想，僅供參考。