CSS单位

一.em单位:相对单位,相对于父级大小.

<div class="fs">
        你看看我的字体大小
        <div class="fs">
            你在看看我的字体大小
        </div>
</div>

css样式:

body {
        font-size: 12px;
    }
    
    .fs {
        width: 5em;
        height: 5em;
        font-size: 2em;
        background-color: red;
    }
    
    div .fs {
        background-color: pink;
    }

效果:

父级的大小是子级的一半

二.rem：绝对单位，都是相对于基准值(html标签的font-size的值大小);

代码:

<html lang="en" style="font-size:24px;">
<div>
   我的字体大小
     <div class="fs">
         我的字体大小2
           <div class="fs">
              我的字体大小3
         </div>
     </div>
</div>

css样式:

.fs {
        font-size: 2rem;
    }

效果:

字体第一行没有设置.自己大小.按照我们在html中设置的为24.下面两个都为24*2rem=48px;

 

 

三.vh和vw

 vw:viewpoint width，视窗宽度，1vw=视窗宽度的1%;如果100vw相当于浏览器视窗宽度的100%;

 vh:viewpoint height，视窗高度，1vh=视窗高度的1%;如果100vh相当于浏览器视窗高度的100%;

 html代码:

<div class="one"></div>
<div class="two"></div>

css样式:

*{
    margin: 0;
    padding: 0;
  }
.one{
      width: 100vw;
      height: 50vh;
      background-color: red;
    }
    
 .two{
      width: 100vw;
      height: 50vh;
      background-color: pink;
    }

效果:

 

 

四:vmin和vmax

vmin:vw和vh中较小的那个值。

vmax:vw和vh中较大的那个值。

例如:如果浏览器宽1000高800那么1vmin=8,1vmax=10;

　　如果浏览器宽700高1100那么1vmin=7,1vmax=11;

      ie不支持vmax!!!

代码:

    <style>
    * {
        margin: 0;
        padding: 0;
    }
    .one {
        width: 10vmin;
        height: 10vmin;
        background-color: red;
    }
    .two {
        width: 10vmax;
        height: 10vmax;
        background-color: pink;
    }
    </style>
</head>
<body>
    <div class="one"></div>
    <div class="two"></div>
</body>

效果:

　　

 

posted @ 2017-07-20 19:29  魔都叛徒  阅读(286)  评论(0)  编辑  收藏  举报