CSS 單位

ARGUS 發布于2019-08-28 18:23 / 3498人閱讀

摘要：概覽中的長度單位有很多，覺得有必要整理備忘。單位大體分為兩大類絕對單位，不會因為其他元素的尺寸變化而變化。如果想使用顯示窗口的寬度或高度而不是父元素的寬度將會怎么樣這正是和單位所提供的。和現代瀏覽器都支持這兩個單位。

概覽

CSS中的長度單位有很多，覺得有必要整理備忘。

網上介紹的也比較多和全，詳見參考資料。

單位大體分為兩大類：

絕對單位 ，不會因為其他元素的尺寸變化而變化。

相對單位 ，沒有一個固定的度量值，而是由其他元素尺寸來決定的相對值。

單位	類型	簡介
px	Absolute	像素 (計算機屏幕上的一個點)，1px = 1/96in
pt	Absolute	Points, 1pt = 1/72in
pc	Absolute	Picas, 1pc = 12pt
in	Absolute	Inches, 1in = 96px = 2.54cm
cm	Absolute	Centimeters, 1cm = 96/2.54px
mm	Absolute	Millimeters, 1mm = 1/10cm
q	Absolute	Quarter-millimeters, 1q = 1/4mm
%	Relative	相對于父元素的寬度或字體大小
em	Relative	相對于父元素的字體大小
rem	Relative	(即root em) 相對于html標簽的字體大小
ex	Relative	當前字體環境中 x 字母的高度
ch	Relative	當前字體環境中 0 數字的高度
vw	Relative	1% 視口（瀏覽器可視區域）的寬度
vh	Relative	1% 視口（瀏覽器可視區域）的高度
vmin	Relative	1% 視口（瀏覽器可視區域）的寬度和高度中較小的尺寸
vmax	Relative	1% 視口（瀏覽器可視區域）的寬度和高度中較大的尺寸

由于絕對單位是固定值，沒什么要介紹的，下面主要介紹相對單位。

相對于父元素的相同屬性的大小。這個其實談不上單位，但它畢竟可以作為長度單位來使，所以在此列出。

如果用來設置字體，則相對的就是父元素的字體大小。

大多數瀏覽器中和標簽中的默認字體尺寸是100%.

html {font-size: 100%;}
body {font-size: 100%;}

100% = 1em = 16px = 12pt

如果用來設置寬和高等非字體尺寸，則以百分比為單位的長度值是基于具有相同屬性的父元素的長度值。




  
  JS Bin

再啰嗦一點關于父元素的問題：何為父元素，相對定位（relative），絕對定位（absolute），浮動（float），固定（fixed）中如何找尋父元素？

由于HTML是樹形結構，標簽套標簽，一般情況下的父子關系很明朗。

相對定位元素，它的父元素符合標簽嵌套。

絕對定位元素，它的父元素是離它最近的定位元素（絕對定位，相對定位，固定，但不包括浮動）或者視窗尺寸（沒找到定位元素時）。

浮動元素，它的父元素也符合標簽嵌套。

固定元素（特殊的絕對定位），它的父元素是視窗（瀏覽器默認用來展示內容的區域的尺寸，不是html 或body 的尺寸）。

注意一下絕對定位就行了，其他的相對簡單。




  
  JS Bin

box 寬度為視窗的一半，can 的寬高是 box 的寬高的一半。

將 can 設置為 position: fixed; 則其父元素將不再是 box 而是瀏覽器視窗。

can 的寬高是視窗寬高的一半。

浮動元素的父元素跟普通元素的父元素是一樣的。




  
  JS Bin

注意： padding、 margin 如果設置了百分比，上，下，左，右用的都是父元素寬度的值為標準去計算。

em 和 rem

兩者都是基于字體尺寸的，區別在于 em 是相對于當前父元素的字體大小為標準，而 rem 是相對于 html 元素的字體大小為標準。

舉個例子你就明白了。




  
  JS Bin
  


  
    Test 
    
      Test 
      
        Test 
      
    
  
  
    Test 
    
      Test 
      
        Test

ex 和 ch

ex 和ch 單位，依賴于當前字體font-family 和字體大小 font-size。 ex 指當前字體環境中小寫字母x 的高度，ch 指當前字體環境中數字 0 的寬度。

IE9+ 和現代瀏覽器都已經支持。

vw 和 vh

響應式網頁設計技術很大程度上依賴于比例規則。然而，CSS比例不總是每個問題的最佳解決方案。如果想使用顯示窗口的寬度或高度而不是父元素的寬度將會怎么樣？這正是vh 和vw 單位所提供的。

vh 等于視窗高度的 1/100.例如，如果瀏覽器的高是 900px, 1vh 求得的值為 9px 。同理，如果顯示窗口寬度為 750px, 1vw 求得的值為 7.5px。

IE10＋和現代瀏覽器都支持這兩個單位。

vmin 和 vmax

這兩個單位是針對vw和vh

vmin 是vw和vh中比較小的值

vmax 是vw和vh中比較大的值

.box {
    height: 100vmin;
    width: 100vmin;
}

.box {
    height: 100vmax;
    width: 100vmax;
}

IE10+ 和現代瀏覽器都已經支持 vmin

webkit瀏覽器之前不支持vmax，現在已經支持，所有現代瀏覽器已經支持，但是IE不支持 vmax.

總結

尺寸單位雖然說不是很難的內容，但能夠做到精準理解和熟練使用也是極其難得的，也許隨著CSS的發展會有更多有用的單位引進。

對單位斤斤計較是一個優秀CSS使用者應該具備的品質，趕緊去挑選合適的單位去開發你的NB產品吧。

下面的代碼用來檢測您的瀏覽器是否支持常用單位：




  
  JS Bin
   
  


50% - percentage
400px - pixels (device pixels)
20em - relative unit
20rem - root em
15vw - viewport width
60vh - viewport height
60vmin - smaller of vw or vh
60vmax - larger of vw or vh
4in - inches
20cm - centimeters
200mm - millimeters
120pt - points
40pc - picas
60ex - x-height
60ch - based on width of zero (0) character

參考資料

關于CSS中的字體尺寸設置

七個你可能不了解的CSS單位

你可能沒注意的CSS單位

CSS的長度單位

The Lengths of CSS —— Chris Coyier

Distance Units —— w3

云服務器 GPU云服務器機柜單位單位域名字體單位單位郵箱

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111213.html

聊一聊CSS中的長度單位

摘要：有的是日常生活中使用的單位，比如厘米和英寸有的是印刷行業使用的單位，比如和有的是專門為發明的單位，比如。但是，由于目前低端打印機的每英寸點數為，而高端屏幕的每英寸點數為，因此所謂的高分辨率可能介于兩者之間。。 CSS中有很多屬性可以接受長度值，比如： width, height, margin, padding, border-width, font-size, text-shadow...

史占廣 2019-08-30 15:55 評論0 收藏0
無單位數字和行高 —— 別說你懂CSS相對單位

摘要：無單位數字和行高有一些屬性可以接收不帶單位的數值意思就是一個不帶長度單位的數字，如和等于，等于，如此類推。警告不帶單位的只可以表示長度單位和百分比的值，譬如和。段落繼承了的行高。長度有兩種類型絕對的和相對的。前段時間試譯了Keith J.Grant的CSS好書《CSS in Depth》，其中的第二章《Working with relative units》，書中對relative ...

Airmusic 2019-08-29 16:06 評論0 收藏0
視口相關單位的應用 —— 別說你懂CSS相對單位

摘要：還有視口相關單位，依賴瀏覽器的視口大小來定義長度的。如果你不熟悉視口相關單位的話，在這里簡單介紹一下。筆記視口相關單位對于大多數瀏覽器還是一項比較新的特性，所以當你試圖把這個特性和其他樣式混搭時，有可能會有一些很奇怪的。前段時間試譯了Keith J.Grant的CSS好書《CSS in Depth》，其中的第二章《Working with relative units》，書中對rel...

lbool 2019-08-29 16:06 評論0 收藏0
css單位

摘要：數字與單位之間不能出現空格。有兩種類型的長度單位相對和絕對。是可視區寬度單位。以百分比為單位的長度值是基于具有相同屬性的父元素的長度值。絕對長度單位視輸出介質而定，不依賴于環境顯示器分辨率操作系統等。 css有幾個不同的單位表示長度一些設置css長度的屬性有 width，height，margin，padding等長度有一個數字和單位組成如10px，2em，等。數字與單位之間不能...

longmon 2019-08-30 10:58 評論0 收藏0
css單位

摘要：數字與單位之間不能出現空格。有兩種類型的長度單位相對和絕對。是可視區寬度單位。以百分比為單位的長度值是基于具有相同屬性的父元素的長度值。絕對長度單位視輸出介質而定，不依賴于環境顯示器分辨率操作系統等。 css有幾個不同的單位表示長度一些設置css長度的屬性有 width，height，margin，padding等長度有一個數字和單位組成如10px，2em，等。數字與單位之間不能...

Lin_YT 2019-08-02 15:08 評論0 收藏0