zoukankan      html  css  js  c++  java
  • css中的尺寸单位

    绝对单位:

    比例:

    1           in         inches  英寸

    2.54      cm       centimeter  厘米

    6           pc        picas  派卡

    25.4      mm      millimeter  毫米

    72         pt         points  磅

    96         px        pixel 像素

    101.6    q         quarter millimeter 1/4毫米

    相对单位:

    %          百分比

    em        element meter 根据文档字体计算尺寸

    rem      root element meter 根据文档(body/html)字体计算尺寸

    ex        文档字符“x”的高度

    ch        文档字符“0”的宽度

    vh        view height 可视范围高度

    vw        view width 可视范围宽度

    vmin     view min 可视范围的宽度和高度中较小的那个尺寸

    vmax    view max 可视范围的宽度和高度中较大的那个尺寸

    运算:

    cal()     四则运算

        eg:

        h1{calc(100% - 10px + 2rem);}

    详情:

    em:相对于当前文档对象内文本的字体尺寸而言,若未指定字体大小,则继承自上级元素,以此类推,直至body,若body未指定,则为浏览器默认大小.

      eg:

        body{font-size:14px;}

        h1{font-size:16px;

          2em;(宽为h1字体大小的2倍,也就是32px)

        }

    rem:相对于根文档对象(body/html)内字体尺寸大小而言的,若未指定字体大小,则相对于浏览器默认字体大小.

      eg:

        body{font-size:14px;}

        h1{font-size:16px;

          2rem;(宽为body字体大小的2倍,也就是28px)

        }

    ex:文档字符“x”的高度

    ch:文档字符“0”的宽度

                    图示:

      eg:

        h1{height:3ex;12ch;}

    vh-vw(可视范围):

      相对于可视范围的宽度和高度,vh-vw是将可视宽高分为100份中的其中一份。

      假如说可视范围 宽为960px 高为1366px 则1vw=960px/100=9.6px   1vh=1366px/100=13.66px

    vmin-vmax(可视范围的宽高中较小或较大的一方)

      可视范围中较小或较大的一方分为100份中的其中一份

      假如说可视范围 800px height:1200px 1vmin=8px 1vmax=12px

      假如说可视范围 1200px height:800px 1vmin=8px 1vmax=12px

      需要让一个元素在屏幕上始终可见

      div{100vmin;

            height:100vmin;

      }

      需要让一个元素在始终铺满整个可视区域

      div{

        100vmax;

        height:100vmax;

      }

  • 相关阅读:
    生产者消费者模型
    进程对象及其他方法、僵尸进程与孤儿进程(了解)、互斥锁、进程间通信、IPC机制、生产者消费者模型
    并发编程总结
    京东618一元抢宝系统的架构优化读后感
    阿里游戏高可用架构设计实践 ------读后感
    以《淘宝网》为例,描绘质量属性的六个常见属性场景
    余额宝技术架构及演进-----读后感
    《架构漫谈》---读后感
    心理小程序开发进度七
    心理小程序开发进度九
  • 原文地址:https://www.cnblogs.com/jy17/p/9931155.html
Copyright © 2011-2022 走看看