CSS 單位

時間 2019-12-05

標籤 css 單位欄目 CSS 简体版

原文原文鏈接

概覽

CSS中的長度單位有不少，以爲有必要整理備忘。css

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

單位大致分爲兩大類：jquery

絕對單位 ，不會由於其餘元素的尺寸變化而變化。css3
相對單位 ，沒有一個固定的度量值，而是由其餘元素尺寸來決定的相對值。web

單位	類型	簡介
`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% 視口（瀏覽器可視區域）的寬度和高度中較大的尺寸

因爲絕對單位是固定值，沒什麼要介紹的，下面主要介紹相對單位。segmentfault

`%`

相對於父元素的相同屬性的大小。這個其實談不上單位，但它畢竟能夠做爲長度單位來使，因此在此列出。瀏覽器

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

大多數瀏覽器中<html> 和<body> 標籤中的默認字體尺寸是100%.spa

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

100% = 1em = 16px = 12pt設計

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style type="text/css">
  div.parent {
    margin:150px;
    width: 200px;
    height: 200px;
    border: 1px solid blue;
  }
  div.child {
    width: 50%;
    height: 50%;
    border: 1px dashed black;
  }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child"></div>
  </div>
</body>
</html>

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

因爲HTML是樹形結構，標籤套標籤，通常狀況下的父子關係很明朗。

<div class="parent">
    <div class="child"></div>
</div>

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

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

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

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

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style type="text/css">
    html {
        width:1000px;
    }
    body {
        width:800px;
    }
    #box {
        width:50%;
        height:300px;
        position: absolute;
        margin-left: 200px;
        border: 1px solid red;
    }
    #can {
        position:absolute;
        top:100px;
        left:100px;
        width:50%;
        height:50%;
        border:1px solid black;
    }
  </style> 
</head>  
<body>
    <div id="box">
        <div id="can"></div>
    </div>
    
</body>  
</html>

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

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

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

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style type="text/css">
    html {
        width:1000px;
    }
    body {
        width:800px;
    }
    #box {
        width:50%;
        height:300px;
        position: absolute;
        margin-left: 200px;
        border: 1px solid red;
    }
    #can {
        float:left;
        width:50%;
        height:50%;
        border:1px solid black;
    }
  </style> 
</head>  
<body>
    <div id="box">
        <div id="can"></div>
    </div>
    
</body>  
</html>

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

`em` 和 `rem`

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

舉個例子你就明白了。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style type="text/css">
  html {
    font-size: 30px;
  }
  body {
    font-size: 14px;
  }
  div.em {
    font-size: 1.2em;
  }
  div.rem {
    font-size: 1.2rem;
  }
  </style>
</head>
<body>
  <div class="em">
    Test <!-- 14 * 1.2 = 16.8px -->
    <div class="em">
      Test <!-- 16.8 * 1.2 = 20.16px -->
      <div class="em">
        Test <!-- 20.16 * 1.2 = 24.192px -->
      </div>
    </div>
  </div>
  <div  class="rem">
    Test <!-- 30 * 1.2 = 36px -->
    <div  class="rem">
      Test <!-- 30 * 1.2 = 36px -->
      <div  class="rem">
        Test <!-- 30 * 1.2 = 36px -->
      </div>
    </div>
  </div>
</body>
</html>

`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產品吧。

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style type="text/css">
    body {
      padding: 20px;
    }
    div {
      background: #99ff99;
      padding: 5px;
      margin-bottom: 10px;
      white-space: nowrap;
      width: 0;
    }
    div:after {
      content: " (supported)";
    }
    div.fail {
      width: 100% !important;
      background: #ff6666 !important;
    }
    div.fail:after {
      content: " (NOT supported)";
    }
  </style> 
</head>  
<body>

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

<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.js"></script>
<script>
// 給指定元素設置寬度
var percentage = $("#percentage").css("width", "50%");
// 若是寬度值爲0,即不支持，爲此元素添加fail類
if (percentage.width() == 0) percentage.addClass("fail");

var pixel = $("#pixel").css("width", "400px");
if (pixel.width() == 0) pixel.addClass("fail");

var em = $("#em").css("width", "20em");
if (em.width() == 0) em.addClass("fail");

var rem = $("#rem").css("width", "20rem");
if (rem.width() == 0) rem.addClass("fail");

var vw = $("#vw").css("width", "15vw");
if (vw.width() == 0) vw.addClass("fail");

var vh = $("#vh").css("width", "60vh");
if (vh.width() == 0) vh.addClass("fail");

var vmin = $("#vmin").css("width", "60vmin");
if (vmin.width() == 0) vmin.addClass("fail");

var vmax = $("#vmax").css("width", "60vmax");
if (vmax.width() == 0) vmax.addClass("fail");

var inch = $("#inch").css("width", "4in");
if (inch.width() == 0) inch.addClass("fail");

var cm = $("#cm").css("width", "20cm");
if (cm.width() == 0) cm.addClass("fail");

var mm = $("#mm").css("width", "200mm");
if (mm.width() == 0) mm.addClass("fail");

var pt = $("#pt").css("width", "120pt");
if (pt.width() == 0) pt.addClass("fail");

var pc = $("#pc").css("width", "40pc");
if (pc.width() == 0) pc.addClass("fail");

var ex = $("#ex").css("width", "60ex");
if (ex.width() == 0) ex.addClass("fail");

var ch = $("#ch").css("width", "60ch");
if (ch.width() == 0) ch.addClass("fail");
</script>
</body>  
</html>