CSS常用单位

CSS的长度单位主要有%, px, in, cm, ch, mm, ex, pt, pc, em, rem, vw, vh, vmin, vmax, 按照单位的计算方式大致可以分为绝对长度单位、相对长度单位、百分比单位

绝对长度单位

px 像素

通常而言, 一个CSS像素代表屏幕设备的一个像素点, 但是对于高分辨率屏幕而言一个CSS像素往往占多个设备像素, 也就是说有多个屏幕像素点来表示1px, 1px = 1in / 96

<style type="text/css">
  div {
    height: 30px;
    background-color: blue;
  }
  
  #t1 {
    width: 1px;
  }
</style>

<section>
  <div id="t1"></div>
</section>

in 英寸

1in = 2.54cm = 96px

<style type="text/css">
  div {
    height: 30px;
    background-color: blue;
  }
  
  #t2 {
    width: 1in;
  }
</style>

<section>
  <div id="t2"></div>
</section>

cm 厘米

1cm = 10mm = 96px/2.54 = 37.8px

<style type="text/css">
  div {
    height: 30px;
    background-color: blue;
  }
  
  #t3 {
    width: 1cm;
  }
</style>

<section>
  <div id="t3"></div>
</section>

mm毫米

1mm = 0.1cm = 3.78px

<style type="text/css">
  div {
    height: 30px;
    background-color: blue;
  }
  
  #t4 {
    width: 1mm;
  }
</style>

<section>
  <div id="t4"></div>
</section>

pt 磅

1pt = 1/72in = 0.0139in = 1/722.54cm = 1/7296px = 1.33px

<style type="text/css">
  div {
    height: 30px;
    background-color: blue;
  }
  
  #t5 {
    width: 1pt;
  }
</style>

<section>
  <div id="t5"></div>
</section>

pc 派卡

1pc = 1/6in = 12pt = 1/6*96px = 16px

<style type="text/css">
  div {
    height: 30px;
    background-color: blue;
  }
  
  #t6 {
    width: 1pc;
  }
</style>

<section>
  <div id="t6"></div>
</section>

相对长度单位

em

em表示元素的font-size属性的计算值, 如果用于font-size属性本身, 相对于父元素的font-size, 若用于其他属性, 相对于本身元素的font-size, 需要注意的是, 使用em可能会出现1.2 * 1.2 = 1.44的现象, 若父元素font-size属性设置为16px, 下一级元素设置为1.2em, 经计算实际像素为16px * 1.2 = 19.2px, 再下一级元素若继续设置为1.2em则经计算为16px * 1.2 * 1.2 = 23.04px, 这是因为父级的基准font-size属性被计算重设为另一个值, 在子元素中使用em时需要根据父元素的font-size重新计算子元素的em值

<style type="text/css">
  div {
    height: 30px;
    background-color: blue;
  }
  
  #t7 > div {
    background-color: blue;
    font-size: 2em;						/* 相对于父元素 2 * 10px = 20px */
    width: 5em;								/* 相对于元素本身 5 * 20px = 100px */
  }
</style>

<section class="except">
  <div id="t7">
    <div>文字</div>
  </div>
  <button onclick="emChange()">改变字体大小</button>
</setion>

<script type="text/javascript">
  function emChange() {
    document.getElementById("t7").style["font-size"] = "20px";
  }
</script>

rem

rem 单位都是相对于根元素html的font-size来决定大小的, 根元素的font-size相当于提供了一个基准, 当页面的sieze发生变化时, 只需改变font-size的值, 那么以rem为固定单位的元素的大小也会发生相应的变化. 由于所有元素都是以根元素的font-sieze为基准进行计算的, 也就不存在em的1.2 * 1.2 = 1.44现象. rem不是只对定义字体大小有用, 可以使用rem把整个网格系统或者UI样式库基于HTML根元素的字体大小上, 这将带来更加可预测的字体大小和比例缩放, 实现响应式的布局

<style type="text/css">
  html {
    font-size: 15px;
  }
  
  div {
    height: 30px;
    background-color: blue;
  }
  
  #t8 > div {
    background-color: blue;
    font-size: 2rem;						/* 相对于根元素 2 * 15px = 30px */
    width: 6rem;								/* 相对于根元素 6 * 15px = 90px */
  }
</style>

<section class="except">
  <div id="t8">
    <div>文字</div>
  </div>
  <button onclick="remChange()">改变字体大小</button>
</section>

<script type="text/javascript">
  function remChange() {
    document.getElementByTagName("html")[0].style["font-size"] = "20px";
  }
</script>

ex

ex是指所用字体中小写x的高度, 但不同字体x的高度可能不同, 对于很多字体来说1ex = 0.5em, 所以很多浏览器在实际应用中取em值一半作为ex值, ex单位在实际中常用于微调

<style type="text/css">
  #9 {
    font-size: 1ex;
  }
</style>

<section class="except">
  <div id="t9">文字</div>
  <span style="font-size: 1em">文字</span>
</section>

ch

ch与ex类似, 这一单位代表元素所用字体中0这一字形的宽度, 更准确地说是0这一字形的预测尺寸, 如果无法确定0字形的大小, 则必须假定其宽为0.5em高为1em, 也就是取em值的一半作为ch 值

<style type="text/css">
  #t10 {
    font-size: 1ch;
  }
</style>

<section class="except">
  <div id="t10">文字</div>
  <span style="font-size: 1em">文字</span>
</section>

百分比单位

%

当度量单位设置为百分比时, 即可使浏览器组件宽高随着浏览器的大小相应变化

• 子元素的height或width中使用百分比, 是相对于子元素的直接父元素, width相对于父元素的width, height相对于父元素的height
• 子元素的top和bottom如果设置百分比, 则相对于直接非static定位的父元素的高度, 同样子元素的left和right如果设置百分比, 则相对于直接非static定位父元素的宽度
• 子元素的padding如果设置百分比, 不论是垂直方向或者是水平方向, 都相对于直接父亲元素的width, 而与父元素的height无关
• 子元素的margin如果设置成百分比, 不论是垂直方向还是水平方向, 都相对于直接父元素的width
• 设置border-radius为百分比, 则是相对于自身的宽度, 还有translate, background-size等都是相对于自身的

<style type="text/css">
  div {
    height: 30px;
    background-color: blue;
  }
  
  #t11 {
    width: 50%;
  }
</style>

<section>
  <div id="t11"></div>
</section>

vh vw vmin vmax

• vh: 相对于视窗的高度, 1vh等于视窗高度的1%
• vw: 相对于视窗的宽度, 1vw等于视窗宽度的1%
• vmin: vw和vh中的较小值
• vmax: vw和vh中的较大值

<style type="text/css">
  div {
    height: 30px;
    background-color: blue;
  }
  
  #t12 {
    background-color: #fff;
  }
  
  #t12 > div:nth-child(1) {
    width: 50vh;
  }
  
  #t12 > div:nth-child(2) {
    width: 50vw;
  }
  
  #t12 > div:nth-child(3) {
    width: 50vmax;
  }
  
  #t12 > div:nth-child(4) {
    width: 50vmin;
  }
</style>

<section class="">
  <div id="t12">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
<section>