1、px

像素,我们在网页布局中一般都是用px。

2、百分比

百分比一般宽泛的讲是相对于父元素,自适应网页布局越来越多,百分比也经常用到了。

3、Viewport
    viewport:可视窗口,也就是浏览器。
    vw Viewport宽度, 1vw 等于viewport宽度的1%
    vh Viewport高度, 1vh 等于viewport高的的1%

CSS3使用Calc

calc()使用通用的数学运算规则,但是也提供更智能的功能:

>使用“+”、“-”、“*” 和 “/”四则运算;
    >可以使用百分比、px、em、rem等单位;
    >可以混合使用各种单位进行计算;
    >表达式中有“+”和“-”时,其前后必须要有空格,如"widht: calc(12%+5em)"这种没有空格的写法是错误的;
    >表达式中有“*”和“/”时,其前后可以没有空格,但建议留有空格。
   
    例如 :设置div元素的高度为当前窗口高度-100px
     div{
       height: calc(100vh - 100px);     
    }
————————————————
版权声明:本文为CSDN博主「图云梦」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_17518593/article/details/52689178

[转]CSS3 使用 calc() 计算高度 vh px的更多相关文章

  1. CSS3 使用 calc() 计算高度 vh px

    Viewport    viewport:可视窗口,也就是浏览器.    vw Viewport宽度, 1vw 等于viewport宽度的1%    vh Viewport高度, 1vh 等于view ...

  2. CSS的单位及css3的calc()及line-height百分比

    锚点:css中百分比减去固定元素 单位介绍 说到css的单位,大家应该首先想到的是px,也就是像素,我们在网页布局中一般都是用px,但是近年来自适应网页布局越来越多,em和百分比也经常用到了.然后随着 ...

  3. CSS的单位 及 css3的calc() 及 line-height 百分比

    CSS的单位及css3的calc()及line-height百分比 摘自:http://www.haorooms.com/post/css_unit_calc 单位介绍 说到css的单位,大家应该首先 ...

  4. CSS3的calc()使用

    CSS3的calc()使用 calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,用来指定元素的长度.比如说,你可以使用calc()给元素的border.margin.pad ...

  5. CSS3表达式calc( )

    CSS3表达式calc( ) 第一次看到calc( )时,不太相信calc()是css中的部分.因为看其外表像个函数,但是CSS里为啥会有表达式我也不太清楚,偶然机会在网页里看到的,自己切片写自适应时 ...

  6. css3 的 calc()函数在布局中的使用----头部高度固定,页面正好占满一屏

    最近项目遇到一个布局需求,头部高度固定,页面需要刚好占满一屏幕. 如下示意图: 方法:使用calc .wrap{ position: relative; margin-left: 24px; marg ...

  7. css3的calc() css3的百分比减宽,减高,加,乘,除,适合用于后台的排版定位

    css3的calc() css3的百分比减宽,减高,加,乘,除,适合用于后台的排版定位 浏览器支持IE9+.FF4.0+.Chrome19+.Safari6+ calc()语法非常简单,就像我们小时候 ...

  8. css3的calc属性不生效问题

    css3的 calc:计算属性.由于自己做的项目中这个属性不常用到,偶尔用一次还没效果. 后来研究了下是因为运算符两边没加空格. 错误示例:.content{width:calc(100%-50px) ...

  9. css3的 calc属性无效问题解决

    css3的 calc:计算属性. 运算符两边需要加空格,才有效. 错误示例:.mystyle{width:calc(100%-25px)}这样是不生效的 运算符"+ - * /"左 ...

随机推荐

  1. JMeter java.net.BindException: Address already in use: connect

    原文:https://blog.csdn.net/macwhirr123/article/details/77199057 出现原因:TCP/IP连接数不够或TIME_WAIT中存在很多链接,导致吞吐 ...

  2. 解决pycharm导入pygame包问题

    在正确用pip命令安装好pygame后, 运行pycharm仍然会报错找不到pygame包, 这时候我们可以用pycharm自带的工具安装好pygame包,操作步骤如下: 点击设置,(或者ctrl+a ...

  3. Pthon魔术方法(Magic Methods)-容器相关方法

    Pthon魔术方法(Magic Methods)-容器相关方法 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.容器相关方法汇总 __len__: 内建函数len(),返回对象的 ...

  4. 一个线上JVM的CPU资源占用过高问题的排查

    原文:https://www.iteye.com/blog/tyrion-2293369 上午线上某应用的一台JVM的CPU占比突然飙高到192%,并且一直下不来,导致监控一直告警,好久没处理这种问题 ...

  5. 4.Linq To Xml操作XML增删改查

    转自https://www.cnblogs.com/wujy/p/3366812.html 对XML文件的操作在平时项目中经常要运用到,比如用于存放一些配置相关的内容:本文将简单运用Linq TO X ...

  6. Fiddler抓包工具使用指南|手机安装Fiddler的安全证书

    Fiddler 4 1.设置: Tools ->  Telerik Fiddler Options 勾选远程 手机安装证书 ->使用Android手机的浏览器打开:http://10.2. ...

  7. janusgraph-创建索引出现GraphIndexStatusReport[success=false, indexName='mixedvlabel', targetStatus=[REGISTERED], notConverged={vlabel=INSTALLED}, converged={}, elapsed=PT1M0.07S]

    参考网址: https://www.cnblogs.com/Uglthinx/p/9630779.html 原因:我的是事务没有完全关闭 解决办法: 创建一个混合索引: // 在graph中有事务执行 ...

  8. AFL Fuzz安装及完成一次简单的模糊测试

    关于AFL fuzz AFL fuzz是一个模糊测试工具,它封装了一个GCC/CLang编译器,用于对被测代码重新编译的过程中进行插桩.插桩完毕后,AFL fuzz就可以给其编译过的代码输入不同的参数 ...

  9. [ARIA] Create an Accessible Tooltip on a Text Input

    Here we use HTML and CSS to create a stylish yet semantic tooltip on a form input. I am using aria-d ...

  10. 持续集成学习1 gitlab和jenkins安装

    一.gitlab安装参照链接 https://www.cnblogs.com/linuxk/p/10100431.html 二.安装jenkins 1.获取jenkins源码包 https://blo ...