• 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>
    
  • 相关阅读:
    Mac ssh登陆linux并且显示linux图形
    github proxy
    [makefile] filter-out
    linux svn
    界面UI测试的方法
    UI测试
    web 页面中 四种常见 必测控件
    面试工作经验参考
    测试用例
    接口测试基础
  • 原文地址:https://www.cnblogs.com/heihei-haha/p/14918169.html
Copyright © 2020-2023  润新知