CSS単位

Author: Chinaxiang Source: Internet 2015-12-01 23:36

CSSには長さの単位がたくさんあるのでメモとして整理する必要があると感じました。

概要

CSSには長さの単位がたくさんあるのでメモを整理する必要があると感じます。

オンライン上にも多くの完全な紹介があります。詳細については参考資料を参照してください。

単位は、

絶対単位の 2 つのカテゴリに大別されます。これは、他の要素のサイズが変化しても変化しません。
相対単位は固定の測定値ではなく、他の要素の大きさによって決まる相対的な値です。

🎜pc🎜🎜Absolute🎜🎜Picas, 1 個 = 12pt🎜🎜🎜🎜in🎜🎜Absolute🎜🎜インチ、1in = 96px = 2.54cm🎜🎜絶対センチメートル,mm🎜🎜絶対🎜🎜ミリメートル,1mm = 1/10cm🎜🎜🎜🎜q🎜🎜絶対🎜🎜クォーターミリメートル、1q = 1/4mm🎜🎜🎜🎜%🎜🎜相対🎜🎜父元素の宽度または文字体大小🎜🎜🎜🎜em🎜🎜相対🎜🎜父元素の文字大小🎜🎜Relative(つまり、root em) HTML タグに対する相対的なフォントサイズex🎜🎜Relative🎜 現在のフォント環境 x 🎜🎜 🎜🎜ch🎜🎜現在のフォント環境 vh🎜🎜Relative🎜🎜1% ビューポートの高さ (ブラウザーの表示領域)🎜🎜🎜🎜vmin🎜🎜Relative🎜🎜1% ビューポート (ブラウザーの表示領域) の幅と高さの小さい方🎜🎜

单位	型	简介
`px` (计算机画面上の 1 つ)点)，`1px = 1/96inpx`	Absolute	像素 (计算机屏幕上的一个点)，`1px = 1/96in`
`pt`	Absolute	Points, `1pt = 1/72in`
`pc`	Absolute	Picas, `1pc = 12pt`
`in`	Absolute	Inches, `1in = 96px = 2.54cm`
`cmcm`	Absolute	Centimeters, `1cm = 96/2.54px`
`mm`	Absolute	Millimeters, `1mm = 1/10cm`
`q`	Absolute	Quarter-millimeters, `1q = 1/4mm`
`%`	Relative	相对于父元素的宽度或字体大小
`em`
`remrem`	Relative	(即root em) 相对于html标签的字体大小
`ex`	Relative	当前字体环境中 `x` 字母的高度
`ch`	Relative	当前字体环境中 `0` 数字的高度
`vw`	Relative	1% 视口（浏览器可视区域）的宽度
`vh`	Relative	1% 视口（浏览器可视区域）的高度
`vmin`
`vmax`	相対	1% ビューポート(ブラウザの表示領域)の幅と高さの大きい方

絶対単位は固定値なので特に紹介するものはありません。以下では主に相対単位を紹介します。

`%`

%

相对于父元素的相同属性的大小。这个其实谈不上单位，但它毕竟可以作为长度单位来使，所以在此列出。

如果用来设置字体，则相对的就是父元素的字体大小。

大多数浏览器中<html> 和<body> 标签中的默认字体尺寸是100%親要素の同じ属性に対する相対的なサイズ。これは実際には単位ではありませんが、結局長さの単位として使用できるため、ここに記載します。

フォントの設定に使用した場合、親要素のフォントサイズに相対します。
ほとんどのブラウザでは<html> および <body> タグのデフォルトのフォントサイズは absolute），浮动（float），固定（fixed）中如何找寻父元素？
由于HTML是树形结构，标签套标签，一般情况下的父子关系很明朗。
<p class="parent">
    <p class="child"></p>
</p>
ログイン後にコピー
相对定位元素，它的父元素符合标签嵌套。
绝对定位元素，它的父元素是离它最近的定位元素（绝对定位，相对定位，固定，但不包括浮动）或者视窗尺寸（没找到定位元素时）。
浮动元素，它的父元素也符合标签嵌套。
固定元素（特殊的绝对定位），它的父元素是视窗（浏览器默认用来展示内容的区域的尺寸，不是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>
    <p id="box">
        <p id="can"></p>
    </p>
    </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>
    <p id="box">
        <p id="can"></p>
    </p>
    </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;  }
  p.em {    font-size: 1.2em;  }
  p.rem {    font-size: 1.2rem;  }
  </style></head><body>
  <p class="em">
    Test 
    <p class="em">
      Test 
      <p class="em">
        Test 
      </p>
    </p>
  </p>
  <p  class="rem">
    Test 
    <p  class="rem">
      Test 
      <p  class="rem">
        Test 
      </p>
    </p>
  </p></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>
ログイン後にコピー
関連ラベル：
css 幅

ソース：php.cn