zoukankan      html  css  js  c++  java

  • 一些css单位

    https://blog.csdn.net/qq_40001322/article/details/80867289

    1.em

    在做手机端的时候经常会用到的做字体的尺寸单位

    说白了 em就相当于“倍”，比如设置当前的div的字体大小为1.5em，则当前的div的字体大小为：当前div继承的字体大小*1.5

    但是当div进行嵌套的时候，em始终是按照当前div继承的字体大小来缩放，参照后面的例子。

    2.rem

    这里的r就是root的意思，意思是相对于根节点来进行缩放，当有嵌套关系的时候，嵌套关系的元素的字体大小始终按照根节点的字体大小进行缩放。

    参照后面给的demo

    3.vh

    vh就是当前屏幕可见高度的1%，也就是说

    height:100vh == height:100%;

    但是有个好处是当元素没有内容时候，设置height:100%该元素不会被撑开，

    但是设置height:100vh，该元素会被撑开屏幕高度一致。

    4.vw

    vw就是当前屏幕宽度的1%

    补充一句，当设置100%，被设置元素的宽度是按照父元素的宽度来设置，

    但是100vw是相对于屏幕可见宽度来设置的，所以会出现50vw 比50%大的情况



    1. <!DOCTYPE html>
    2.  
      <html lang="Zh-cn">
    3.  
      <head>
    4.  
      <meta charset="UTF-8">
    5.  
      <title>恭贺新春</title>
    6.  
      </head>
    7.  
      <style type="text/css" media="screen">
    8.  
      html{
    9.  
      font-size: 14px;
    10.  
      }
    11.  
      .em,
    12.  
      .em > .em-son,
    13.  
      .em > .em-son > .em-grandson {
    14.  
      font-size: 1.2em;
    15.  
      }
    16.  
      .rem,
    17.  
      .rem > .rem-son,
    18.  
      .rem > .rem-son > .rem-grandson {
    19.  
      font-size: 1.2rem;
    20.  
      }
    21.  
      .rem-box {
    22.  
      background: #d60b3b;
    23.  
      10rem;
    24.  
      height: 10rem;
    25.  
      color: #fff;
    26.  
      text-align: center;
    27.  
      line-height:5rem;
    28.  
      }
    29.  
      .vhvw-box {
    30.  
      background: #d60b3b;
    31.  
      50vw;
    32.  
      height: 50vh;
    33.  
      color: #fff;
    34.  
      text-align: center;
    35.  
      line-height:25vh;
    36.  
      }
    37.  
      </style>
    38.  
      <body>
    39.  
      <h1>em 继承父元素的字体大小，来变大或变小，多层嵌套字体变化</h1>
    40.  
      <div class="em">
    41.  
      字体大小 1.2 * 14（父元素body） = 16px
    42.  
      <div class="em-son">
    43.  
      字体大小 1.2 * 16(父元素em) = 20px
    44.  
      <div class="em-grandson">
    45.  
      字体大小 1.2 * 20(父元素em-son) = 24px
    46.  
      </div>
    47.  
      </div>
    48.  
      </div>
    49.  
      <br>
    50.  
      <h1>rem 继承根节点元素的字体大小，来变大或变小，多层嵌套字体不变化</h1>
    51.  
      <div class="rem">
    52.  
      字体大小 1.2 * 14（根节点html） = 16px
    53.  
      <div class="rem-son">
    54.  
      字体大小 1.2 * 14（根节点html） = 16px
    55.  
      <div class="rem-grandson">
    56.  
      字体大小 1.2 * 14（根节点html） = 16px
    57.  
      </div>
    58.  
      </div>
    59.  
      </div>
    60.  
      <br>
    61.  
      <h1>rem 也可作为固定长度单位设置宽高等</h1>
    62.  
      <div class="rem-box">
    63.  
      宽：14 * 10 = 140px<br>
    64.  
      高：14 * 10 = 140px
    65.  
      </div>
    66.  
      <br>
    67.  
      <h1>vh,vw 屏幕可见区域的高度，宽度的1%</h1>
    68.  
      <div class="vhvw-box">
    69.  
      宽：屏幕宽度的50%<br>
    70.  
      高：屏幕高度的50%
    71.  
      </div>
    72.  
      </body>
    73.  
      </html>
      1. <!DOCTYPE html>
      2.  
        <html lang="Zh-cn">
      3.  
        <head>
      4.  
        <meta charset="UTF-8">
      5.  
        <title>恭贺新春</title>
      6.  
        </head>
      7.  
        <style type="text/css" media="screen">
      8.  
        html{
      9.  
        font-size: 14px;
      10.  
        }
      11.  
        .em,
      12.  
        .em > .em-son,
      13.  
        .em > .em-son > .em-grandson {
      14.  
        font-size: 1.2em;
      15.  
        }
      16.  
        .rem,
      17.  
        .rem > .rem-son,
      18.  
        .rem > .rem-son > .rem-grandson {
      19.  
        font-size: 1.2rem;
      20.  
        }
      21.  
        .rem-box {
      22.  
        background: #d60b3b;
      23.  
        10rem;
      24.  
        height: 10rem;
      25.  
        color: #fff;
      26.  
        text-align: center;
      27.  
        line-height:5rem;
      28.  
        }
      29.  
        .vhvw-box {
      30.  
        background: #d60b3b;
      31.  
        50vw;
      32.  
        height: 50vh;
      33.  
        color: #fff;
      34.  
        text-align: center;
      35.  
        line-height:25vh;
      36.  
        }
      37.  
        </style>
      38.  
        <body>
      39.  
        <h1>em 继承父元素的字体大小，来变大或变小，多层嵌套字体变化</h1>
      40.  
        <div class="em">
      41.  
        字体大小 1.2 * 14（父元素body） = 16px
      42.  
        <div class="em-son">
      43.  
        字体大小 1.2 * 16(父元素em) = 20px
      44.  
        <div class="em-grandson">
      45.  
        字体大小 1.2 * 20(父元素em-son) = 24px
      46.  
        </div>
      47.  
        </div>
      48.  
        </div>
      49.  
        <br>
      50.  
        <h1>rem 继承根节点元素的字体大小，来变大或变小，多层嵌套字体不变化</h1>
      51.  
        <div class="rem">
      52.  
        字体大小 1.2 * 14（根节点html） = 16px
      53.  
        <div class="rem-son">
      54.  
        字体大小 1.2 * 14（根节点html） = 16px
      55.  
        <div class="rem-grandson">
      56.  
        字体大小 1.2 * 14（根节点html） = 16px
      57.  
        </div>
      58.  
        </div>
      59.  
        </div>
      60.  
        <br>
      61.  
        <h1>rem 也可作为固定长度单位设置宽高等</h1>
      62.  
        <div class="rem-box">
      63.  
        宽：14 * 10 = 140px<br>
      64.  
        高：14 * 10 = 140px
      65.  
        </div>
      66.  
        <br>
      67.  
        <h1>vh,vw 屏幕可见区域的高度，宽度的1%</h1>
      68.  
        <div class="vhvw-box">
      69.  
        宽：屏幕宽度的50%<br>
      70.  
        高：屏幕高度的50%
      71.  
        </div>
      72.  
        </body>
      73.  
        </html>
  • 相关阅读:
    spring事务注解@Transactional注解失效场景
    Dubbo中服务消费者和服务提供者之间的请求和响应过程
    说说Java的Unsafe类
    java程序二叉树的深度优先和广度优先遍历
    重复注解与类型注解
    git pull 和 git fetch的区别？
    Java8新特性系列（Interface）
    二十种健康食品排行榜
    赞美的时机
    越过胆怯这道栅栏
  • 原文地址：https://www.cnblogs.com/maidongdong/p/10856213.html
Copyright © 2011-2022 走看看