CSS中的長度單位以及寬度自適的實例分析

CSS 單位

作者：Chinaxiang 來源：互聯網 2015-12-01 23:36

CSS中的長度有忘備。

概覽

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

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

單位大致分為兩大類：

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

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

/c pt1pt = 1/72inpc,a🜎 1/10cmqQuarter-millimeters, 1q = 1/4mm%RelativeRelative當前字體環境中  vhvmin

單位	型	簡介
px	Absolute
AbsolutePoints,
Absolute,Pipt	Absolute	Inches, 1in = 96px = 2.54cm
cm	Absolute	Centimeters, 1cm = 96/2.54px
		Absolute
		Relative
相對於父元素的字體大小
rem	Relative	(即root em) 相對於html標籤的字體大小
ex		ch
0 數字的高度		vw1%Relative
Relative1% 視口（瀏覽器可視區域）的高度
Relative1% 視口（瀏覽器和高度中視區域）的寬度和高度中可見的尺寸。
vmax	Relative	1% 視口（瀏覽器可視區域）的寬度和高度中較大的尺寸

由於絕對單位是固定值，沒什麼要介紹的，以下主要介紹相對單位。

%

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

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

大多數瀏覽器中 和 標籤中的預設字體尺寸是100%.

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

100% = 1emm = 16p = 128和高等非字體尺寸，則以百分比為單位的長度值是基於具有相同屬性的父元素的長度值。

76c82f278ac045591c9159d381de2c57100db36a723c770d327fc0aef2ce13b193f0f5c25f18dab9d176bd4f6de5d30e
  4d0d87937f6c83b675e896c64d3eb7c9
  b2386ffb911b14667cb8f0f91ea547a7JS Bin6e916e0f7d1e588d4f442bf645aedb2f
  46d5fe1c7617e3914f214aaf043f4ccf
  p.parent {    margin:150px;    width: 200px;    height: 200px;    border: 1px solid blue;  }
  p.child {    width: 50%;    height: 50%;    border: 1px dashed black;  }
  531ac245ce3e4fe3d50054a55f2659279c3bca370b5104690d9ef395f2c5f8d16c04bd5ca3fcae76e30b72ad730ca86d
  2f947c059f95c7b6013fe75febf72946
    256623bcd80aa3c91f9a846bd694f70894b3e26ee717c64999d7867364b1b4a3
  94b3e26ee717c64999d7867364b1b4a336cc49f0c466276486e50c850b7e495673a6ac4ed44ffec12cee46588e518a5e

再啰嗦一点关于父元素的问题：何为父元素，相对定位（relative），绝对定位（absolute），浮动（float），固定（fixed）中如何找寻父元素？

由于HTML是树形结构，标签套标签，一般情况下的父子关系很明朗。

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

相对定位元素，它的父元素符合标签嵌套。

绝对定位元素，它的父元素是离它最近的定位元素（绝对定位，相对定位，固定，但不包括浮动）或者视窗尺寸（没找到定位元素时）。

浮动元素，它的父元素也符合标签嵌套。

固定元素（特殊的绝对定位），它的父元素是视窗（浏览器默认用来展示内容的区域的尺寸，不是html 或body 的尺寸）。

注意一下绝对定位就行了，其他的相对简单。

76c82f278ac045591c9159d381de2c57100db36a723c770d327fc0aef2ce13b193f0f5c25f18dab9d176bd4f6de5d30e
  4d0d87937f6c83b675e896c64d3eb7c9
  b2386ffb911b14667cb8f0f91ea547a7JS Bin6e916e0f7d1e588d4f442bf645aedb2f
  46d5fe1c7617e3914f214aaf043f4ccf
    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;    }
  531ac245ce3e4fe3d50054a55f265927 9c3bca370b5104690d9ef395f2c5f8d1  6c04bd5ca3fcae76e30b72ad730ca86d
    b81e3c3ff067fcbe0ce184ae68e680b4
        c189969b91a8a31e4e468e0458d9c98194b3e26ee717c64999d7867364b1b4a3
    94b3e26ee717c64999d7867364b1b4a3
    36cc49f0c466276486e50c850b7e4956  73a6ac4ed44ffec12cee46588e518a5e

box 宽度为视窗的一半，can 的宽高是 box 的宽高的一半。

将 can 设置为 position: fixed; 则其父元素将不再是 box 而是浏览器视窗。

can 的宽高是视窗宽高的一半。

浮动元素的父元素跟普通元素的父元素是一样的。

76c82f278ac045591c9159d381de2c57100db36a723c770d327fc0aef2ce13b193f0f5c25f18dab9d176bd4f6de5d30e
  4d0d87937f6c83b675e896c64d3eb7c9
  b2386ffb911b14667cb8f0f91ea547a7JS Bin6e916e0f7d1e588d4f442bf645aedb2f
  46d5fe1c7617e3914f214aaf043f4ccf
    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;    }
  531ac245ce3e4fe3d50054a55f265927 9c3bca370b5104690d9ef395f2c5f8d1  6c04bd5ca3fcae76e30b72ad730ca86d
    b81e3c3ff067fcbe0ce184ae68e680b4
        c189969b91a8a31e4e468e0458d9c98194b3e26ee717c64999d7867364b1b4a3
    94b3e26ee717c64999d7867364b1b4a3
    36cc49f0c466276486e50c850b7e4956  73a6ac4ed44ffec12cee46588e518a5e

注意： padding、 margin 如果设置了百分比，上，下，左，右 用的都是父元素宽度 的值为标准去计算。

em 和 rem

两者都是基于字体尺寸的，区别在于 em 是相对于当前父元素的字体大小为标准，而 rem 是相对于 html 元素的字体大小为标准。

举个例子你就明白了。

76c82f278ac045591c9159d381de2c57100db36a723c770d327fc0aef2ce13b193f0f5c25f18dab9d176bd4f6de5d30e
  4d0d87937f6c83b675e896c64d3eb7c9
  b2386ffb911b14667cb8f0f91ea547a7JS Bin6e916e0f7d1e588d4f442bf645aedb2f
  46d5fe1c7617e3914f214aaf043f4ccf
  html {    font-size: 30px;  }
  body {    font-size: 14px;  }
  p.em {    font-size: 1.2em;  }
  p.rem {    font-size: 1.2rem;  }
  531ac245ce3e4fe3d50054a55f2659279c3bca370b5104690d9ef395f2c5f8d16c04bd5ca3fcae76e30b72ad730ca86d
  7141ea82a6d8e125d197a4f4e92d9838
    Test fcd38dfe03ee250c19b5b2a62a5d19ef
    7141ea82a6d8e125d197a4f4e92d9838
      Test fa9011ae4b711ef93042299459843a74
      7141ea82a6d8e125d197a4f4e92d9838
        Test 901871655ff1d2496ad717ebd97d8f82
      94b3e26ee717c64999d7867364b1b4a3
    94b3e26ee717c64999d7867364b1b4a3
  94b3e26ee717c64999d7867364b1b4a3
  fcf8a40af854b70c2075a39629f12e45
    Test af02d60b0bb9e9b2dfc5de10decdf1d7
    fcf8a40af854b70c2075a39629f12e45
      Test af02d60b0bb9e9b2dfc5de10decdf1d7
      fcf8a40af854b70c2075a39629f12e45
        Test af02d60b0bb9e9b2dfc5de10decdf1d7
      94b3e26ee717c64999d7867364b1b4a3
    94b3e26ee717c64999d7867364b1b4a3
  94b3e26ee717c64999d7867364b1b4a336cc49f0c466276486e50c850b7e495673a6ac4ed44ffec12cee46588e518a5e

 

ex收到 ex 指在當前字體環境中小寫字母

x

 的高度，ch指在當前字體環境中數字 0 的寬度。 IE9+ 和現代瀏覽器都已經支援。

vw 和 vh

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

vh 等於視窗高度的 1/100.例如，瀏覽器的高度若是 900px, 1vh.同理，若顯示視窗寬度為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中文網其他相關文章！