zoukankan      html  css  js  c++  java
  • px、em、rem、%、vw、wh、vm等单位有什么区别?

    1、px

    px就是pixel的缩写,意为像素。px就是一张图片最小的一个点,一张位图就是千千万万的这样的点构成的,比如常常听到的电脑像素是1024x768的,表示的是水平方向是1024个像素点,垂直方向是768个像素点。

    2、em

    参考物是父元素的font-size,具有继承的特点。如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值。

    3、rem

    css3新单位,相对于根元素html(网页)的font-size,不会像em那样,依赖于父元素的字体大小,而造成混乱。

    4、%

    一般宽泛的讲是相对于父元素,但是并不是十分准确。

    • 对于普通定位元素就是我们理解的父元素
    • 对于position: absolute;的元素是相对于已定位的父元素
    • 对于position: fixed;的元素是相对于ViewPort(可视窗口)

    5、vw

    css3新单位,viewpoint width的缩写,视窗宽度,1vw等于视窗宽度的1%。

    举个例子:浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。

    6、vh

    css3新单位,viewpoint height的缩写,视窗高度,1vh等于视窗高度的1%。

    举个例子:浏览器高度900px, 1 vh = 900px/100 = 9 px。

    7、vm

    css3新单位,相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vm

    举个例子:浏览器高度900px,宽度1200px,取最小的浏览器高度,1 vm = 900px/100 = 9 px。

  • 相关阅读:
    matlab中plot画图参数的设置
    TOF相机基本知识
    工业相机接口选择
    工业相机基本知识
    TwinCAT 3中基于UDP协议通讯的C++实现
    投影几何中的无穷远量
    基于CANopen DSP402的运动控制笔记
    C++ new 的用法
    C++中static用法总结
    设计模式——适配器模式(Adapter Pattern)
  • 原文地址:https://www.cnblogs.com/qinglaoshi/p/13246148.html
Copyright © 2011-2022 走看看