CSS数值与单位

CSS常用的单位有 em rem 百分数 px vw vh

. em

相对长度单位相对当前元素的字体大小相同，「font-size」em会继承父元素字体的大小（基于父元素「相对于父元素的font-size」

. rem（root em）

相对长度单位，基于根元素

. px

长度单位像素

百分比 %

相对单位，以字体width为例?根据当前值属性的「百分比」乘以父元素「width」的具体数值，如果「父元素本身也是百分比%」则需要把父元素的值换算成具体单位的数值才能让子元素继承

「通过实例代码展示em rem 百分数的区别」

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <title>JS Bin</title>  <style>    .son {      border: 1px solid red;      color: green;    }    .father {      border: 2px solid blue;    }/* font-size width height为具体的数字*/     div.father {      font-size: 24px;      width: 200px;      height: 150px;    }/* 父元素的font-size width height为百分数*/     /* div.father {      font-size: 200%;      width: 50%;      height: 50%;    } */        /*1. em */    div.son {      font-size: 2em;      height: 2em;      width: 2em;    }    /* 2. 百分比  */    /* div.son {      font-size: 200%;      height: 200%;      width: 200%;    } */        /*  3. rem   */   /*  div.son {      font-size: 2rem;      width: 2rem;      height: 2rem    } */  </style></head><body>  <div class="father">爸爸    <div class="son">儿子</div>  </div></body></html>

当父元素的『font-size』『height』『width』具体大小数值为「24px 150px 200px」

相对子元素「div.son」的对应的值单位分别是下面三个值：

div.son {      font-size: 2em;      height: 2em;      width: 2em;    }

font-size 48px
height 96px
width 96px

son-em

根据上面代码和截图所显示的结果可以明显得出1em是基于单前自身字体的大小值，但是当前的「font-size」1em 会继承父元素的字体的大小，而width height则是基于自身字体的大小而非父元素

百分数
font-size 48px
height 300px
width 400px

div.son {      font-size: 200%;      height: 200%;      width: 200%;    }

som-%

百分比相对单位，把父元素的值得大小换算成具体数值的px，通过当前的「font-size」「height」「width」的百分数的值，乘以父元素的具体数值的大小，从而de得到单前元素的具体数值

rem
font-size 32px
height 32px
width 32px

div.son {      font-size: 2rem;      width: 2rem;      height: 2rem    }

som-rem

1rem 基于根元素<html>,因为Chrome浏览器默认font-size为16px 所以，2rem既为32px

当父元素的『font-size』『height』『width』具体值为给定百分数,「200%」「50%」「50%」

父元素百分比

相对子元素「div.son」的对应的值单位分别是下面三个值：

div.son {      font-size: 2em;      height: 2em;      width: 2em;    }

font-size 64px
height 128px
width 128px

当前的父元素的font-size值为32px，子元素的「font-szie」「height」「width」的具体值分别为 64px 128px 128px
，则当父元素的font-size为百分比时，子元素的大小1em,即为父元素的百分比的值换算成具体数值,em仍然是基于自身font-size但是可以继承继承父元素的font-size的大小

父元素百分比 son-em

百分数

div.son {      font-size: 200%;      height: 200%;      width: 200%;    }

font-size 64px

父元素百分比 son-%

父元素的百分比font-size换算成具体值大小为32，则子元素的font-size: 200%,及为父元素的2倍，即为64px

div.son {      font-size: 2rem;      width: 2rem;      height: 2rem    }

font-size 32px
height 32px
width 32px

父元素百分比 son-rem

父元素的百分比font-size换算成具体值大小为32，html文档相对的根元素的fong-size大小为16px,子元素的font-size：2rem，即为根元素的font-size大小的两倍，与当前的父元素的实际大小并无实际关联

. 视窗单位(viewport) vw vh

1vw 1vh 分别为「当前视口」宽度的1/100与「视口高度」的1/100

<div class="test" style="border: 1px solid #000; width: 50vw; height: 50vh;"></div>

效果

CSS单位vw vh

无单位的数字

数字0

当前值得单位的大小为「零」可以不带单位

line-height

无单位值，其具体大小为当前font-size的倍数

参考：

MDN-css数值和单位

文章转载于:https://www.jianshu.com/p/97276186afa8

原著是一个有趣的人,若有侵权,请通知删除

本博客所有文章如无特别注明均为原创。
复制或转载请以超链接形式注明转自起风了，原文地址《CSS数值与单位》