CSS数值与单位

CSS数值与单位

YYPL
2019.08.14 11:29:49字数 858阅读 309

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」的对应的值单位分别是下面三个值：

  • em
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」的对应的值单位分别是下面三个值：

  • em
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

  • rem
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的倍数

posted @ 2020-09-18 21:11  JAVA之家TY  阅读(245)  评论(0)  编辑  收藏  举报