zoukankan      html  css  js  c++  java
  • 关于height:100%和height:100vh的区别

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

    height:100vh == height:100%;

    但是当元素没有内容时候,设置height:100%,该元素不会被撑开,此时高度为0,

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

    vh/vw 
    vh: 相对于视窗的高度, 视窗被均分为100单位的vh; 
    vw: 相对于视窗的宽度, 视窗被均分为100单位的vw;

    vmax: 相对于视窗的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax; 
    vmin: 相对于视窗的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin; 
    视区所指为浏览器内部的可视区域大小, 
    window.innerWidth/window.innerHeight大小,不包含任务栏标题栏以及底部工具栏的浏览器区域大小。

    calc 
    calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,用来指定元素的长度。比如说,你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。为何说是动态值呢?因为我们使用的表达式来得到的值。不过calc()最大的好处就是用在流体布局上,可以通过calc()计算得到元素的宽度。

    calc是 css3提供的一个在css文件中计算值的函数:

    • 用于动态计算长度值。
    • 需要注意的是,运算符前后都需要保留一个空格,例如: calc(100% - 10px);
    • 任何长度值都可以使用calc()函数进行计算;
    • calc()函数支持 “+”, “-“, “*”, “/” 运算;
    • calc()函数使用标准的数学运算优先级规则;
    1. calc(100vh - 10px) 表示整个浏览器窗口高度减去10px的大小
    2. calc(100vw - 10px) 表示整个浏览器窗口宽度减去10px的大小
  • 相关阅读:
    NOIP201208同余方程
    NOIP模拟赛 最佳组合
    NOIP模拟赛 拓展
    CF1253E Antenna Coverage(DP)
    LOJ6033「雅礼集训 2017 Day2」棋盘游戏 (博弈论,二分图,匈牙利算法)
    CF582E Boolean Function(DP,状态压缩,FMT)
    CF750G New Year and Binary Tree Paths(DP)
    Codeforces Round 596 题解
    AGC008E Next or Nextnext(组合计数,神奇思路)
    ARC082E ConvexScore(神奇思路)
  • 原文地址:https://www.cnblogs.com/xaun/p/13673798.html
Copyright © 2011-2022 走看看