CSS中各種長度單位總結

在前端開發工作過程中曾碰到這樣一問題:

<style type="text/css">
.parent{ width:400px; height:300px; border:1px solid #ccc; }
.child{ margin:10%; background-color: red; }
</style>
<div class="parent">
    <div class="child"></div>
</div>

問這類名為child元素在網頁中顯示的高寬？

答案：width:320px;height:160px;
如果您的答案正確，那說明您CSS功底比較強，如果您也不知所以然，希望這篇博文對您有所幫助

CSS中長度單位類型

css中長度單位有很多，可謂五花八門，但可分為這兩類：

1. 絕對長度單位
   彼此固定，不會因為其他元素的尺寸變化而變化。主要有cm mm Q in pc pt px
2. 相對長度單位
   指定相對於另一長度的長度。主要有em ex ch rem %和可視區百分比長度單位 vm vh vmin vmax

由於各種單位比較多，我們這里只介紹常用的一些單位,其他單位的詳細情況可查詢W3C規范

px

px單位名稱為像素，像素是固定大小的單元,用於屏幕媒體(即在電腦屏幕上讀取)。一個像素等於電腦屏幕上的一個點 (是你屏幕分辨率的最小分割)。許多網頁設計師在web文檔使用像素單位以生產瀏覽器渲染的像素完美呈現的網站。

像素單位的一個問題是在IE下無法用瀏覽器字體縮放的功能(影響不是很大)。

%

百分比是一個相對長度單位，相對於包含塊（containing block）的高寬或字體大小。
關於包含塊（containing block）的概念，不能簡單地理解成是父元素。
如果是靜態定位和相對定位，包含塊一般就是其父元素。
如果是絕對定位的元素，包含塊應該是離它最近的 position為非static屬性的祖先元素。
如果是固定定位的元素，它的包含塊是視口（viewport）。
具體可以參考 W3Help。

在使用百分比單位的時候，最讓人困惑的就是不清楚它到底是相對於誰計算的，下面將詳細介紹列出

• 相對於包含塊的寬度
  left、right、
  width、max-width、min-width、
  margin、padding、
  text-indent;

• 相對於包含塊的高度
  top、 bottom、
  height、 max-height、 min-height;

• 相對於自身的高寬
  border-radius、background-size、transform: translate()、transform-origin、zoom(css3縮放)、clip-path

• 相對於自身的字體大小
  line-height

• 相對於自身的行高（不常用）
  vertical-align

• 相對於繼承字體大小
  font-size

• 特殊對象

  • 背景定位中的百分比 background-position 分別設置水平方向和垂直方向上的兩個值，如果使用百分比，那么百分比值會同時應用於元素和圖像。例如 50% 50% 會把圖片的（50%, 50%）這一點與框的（50%, 50%）處對齊，相當於設置了 center center。同理 0% 0% 相當於 left top，100% 100% 相當於 right bottom。
  • filter(css3濾鏡，不常用) filter: none | blur(%) | brightness(%) | contrast(%) | drop-shadow(%) | grayscale(%) | hue-rotate(%) | invert(%) | opacity(%) | saturate(%) | sepia(%) | url(%);

百分比的繼承

如果某個元素設置了百分比的屬性，則后代元素繼承的是計算后的值。例如：

p { font-size: 10px;line-height: 120%; }

那么p的子元素繼承到的值是 line-height: 12px，而不是 line-height: 120%。

em

em是相對字體長度單位。如果用於font-size屬性本身，則是相對於父元素的font-size。若用於其他屬性（width,height），則是相對於本身元素的font-size。國外使用比較多；

em單位有如下特點：

1. em的值並不是固定的;
2. em會繼承父級元素的字體大小。

我們知道任意瀏覽器的默認字體大小都是16px。所有未經調整的瀏覽器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。為了簡化font-size的換算，需要在css中的body選擇器中聲明font-size=62.5%，這就使em值變為 16px*62.5%=10px, 這樣12px=1.2em, 10px=1em, 也就是說只需要將你的原來的px數值除以10，然后換上em作為單位就行了。

em是繼承父元素的字體大小，可是當父元素字體大小改變時，又得重新計算了，這不怎么方便，還好rem解決了這個問題

rem

rem是CSS3新增的一個相對字體長度單位，只相對根元素即html元素字體大小
所以我們只要在html標簽上設置字體大小為標准，文檔中的字體大小都會以此為參照

html{font-size:62.5%; }
body{font-size:12px;font-size:1.2rem ;}
p{font-size:14px;font-size:1.4rem;}

兼容性：

IE 9 & IE 10 do not support rem units when used in the font shorthand property (the entire declaration is ignored) or when used on pseudo elements.

IE9/10中font縮寫和偽元素中不支持rem單位
IE9/10部分支持，IE11+、Firefox、Chrome、Safari、Opera 的主流版本都支持，為了兼容不支持 rem 的瀏覽器，我們需要在 rem 前面寫上對應的 px 值，這樣不支持的瀏覽器可以優雅降級。

vm vh vmin vmax

響應式布局的實現依靠媒體查詢（ Media Queries ）來實現，選取主流設備寬度尺寸作為斷點針對性寫額外的樣式進行適配，但這樣做會比較麻煩，只能在選取的幾個主流設備尺寸下呈現完美適配。CSS3中引入一種新的辦法去真正地適配所有設備尺寸。

視口單位

視口在桌面端，指的是瀏覽器的可視區域；而在移動端較為復雜，它涉及到三個視口：分別是 Layout Viewport（布局視口）、 Visual Viewport（視覺視口）、Ideal Viewport。
視口單位中的“視口”，在桌面端，毫無疑問指的就是瀏覽器的可視區域；但是在移動端，它指的則是Layout Viewport（布局視口） 。

根據CSS3規范，視口單位主要包括以下4個：

• vw : 1vw 等於視口寬度的1%
• vh : 1vh 等於視口高度的1%
• vmin : 選取 vw 和 vh 中最小的那個
• vmax : 選取 vw 和 vh 中最大的那個

兼容性

在PC端用的很少，主要在移動端
在移動端 ios 8 以上以及 Android 4.4 以上獲得支持，並且在微信 x5 內核中也得到完美的全面支持。

搭配vw和rem，布局更優化

• 給根元素大小設置隨着視口變化而變化的 vw 單位，這樣就可以實現動態改變其大小。
• 限制根元素字體大小的最大最小值，配合 body 加上最大寬度和最小寬度

個人總結

在一般的PC端網頁制作過程中，一般直接用px為單位，在移動端由於vw,vh單位的兼容性，目前一般采用rem + %或者rem + vw/vh。

參考文章

CSS Values and Units Module Level 3
KB008: 包含塊( Containing block )
css樣式的百分比都相對於誰？
CSS參考手冊
純CSS3使用vw和vh視口單位實現自適應