zoukankan      html  css  js  c++  java
  • css 单位 rem,em,px

    css单位

    css单位分为相对和绝对
    绝对单位包括:px
    相对单位包括:

    单位 相对于
    em 在 font-size 中使用是相对于父元素的字体大小,在其他属性中使用是相对于自身的字体大小,如 width
    ex 字符“x”的高度
    ch 数字“0”的宽度
    rem 根元素(html)的字体大小
    lh 元素的 line-height
    vw 视窗宽度的 1%
    vh 视窗高度的 1%
    vmin 视窗较小尺寸的 1%
    vmax 视图大尺寸的 1%

    例子:

    <html>
      <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <title></title>
        <meta name="description" content="" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" href="" />
        <style>
          .em {
            font-size: 16px;
             10em;
            border: 1px solid red;
          }
          .em1 {
            font-size: 1.2em;
             10em;
            border: 1px solid red;
          }
          .wrap {
            font-size: 20px;
          }
          html {
            font-size: 20px;
          }
          .rem {
            font-size: 1.5rem;
             10rem;
            border: 1px solid red;
          }
        </style>
      </head>
      <body>
        <div class="em">我是em单位 width=16*10</div>
        <div class="wrap">
          <div class="em1">我的font-szie em font-size =1.2*20=24 width=24*10</div>
        </div>
        <div class="rem">我是rem单位 font-szie= 20*1.5 =30 width=20*10</div>
        <script></script>
      </body>
    </html>
    
  • 相关阅读:
    POJ3613 k边最短路
    洛谷4014最大/小费用最大流
    POJ1734无向图求最小环
    洛谷4013数字梯形
    洛谷4147玉蟾宫
    洛谷4145上帝造题的七分钟2
    洛谷4092 树
    Nginx动静分离-tomcat
    nginx之Geoip读取地域信息模块
    Nginx与Lua开发
  • 原文地址:https://www.cnblogs.com/heihei-haha/p/14918169.html
Copyright © 2011-2022 走看看