在线客服与您一对一交流
当前位置: 主页 > 行业新闻 > IT技术 >

CSS3 使用 calc() 计算宽度高度vw vh px

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);     
    }

相关文章:

  • 1. (function(){}())与(function(){})() 这两种写法,都是一种 立即执行函数 的写法,即IIFE (Immediately Invoked Function Expression)。这种函数在函数定义的地方就直接执行了。 通常的函数声明和调用分开的写...

  • 浏览器缓存有时挺大的,修改网站后半天看不到效果,今天西安蟠龙小编总结几种清缓存看网站修改效果的方法 清缓存方法: 一、ctrl+f5 多刷新几次 二、用浏览器的无痕模式或者隐私模式 三...

  • window.location.origin(?前边的URL) 如果有端口号,含端口号 结果如下: http://www.it2168.com:8080 window.location.origin兼容问题 if (!window.location.origin) { window.location.origin = window.location.protocol + // + window.l...

  • matchHeight使所有选定元素的高度完全相等。 尽管这曾经是一个棘手的问题,但如今建议在可能的地方使用CSS Flexbox和CSS Grid,尽管该库对于旧版浏览器仍然有用。 特征 自动匹配元素组的高度 使...

  • 收集整理了一些Web前端开发比较成熟的第三方插件,分享给大家。 ******************************************************************************* 一、国外插件 ace 版本:1.2.3au 官网:https://github.com/ajaxorg/ace-bu...

  • 懒加载插件 new AnimOnScroll(document.getElementById(grid), { minDuration: 0.4, maxDuration: 0.7, viewportFactor: 0.2 }); /*AnimOnScroll.js*/ /** * animOnScroll.js v1.0.0 * http://www.codrops.com * * Licensed under the MIT license. * http://www.op...

  • 为什么要用classie.js classie是一个 awesome,lightweight script。 用来添加,移除,toggleDom元素的类。那为什么不用jquery呢, 因为jquery相对于这几个简单的功能太冗余了(just too bloated for your needs)。 clas...

  • breakpoints.js 版本:0.4.2 官网:https://github.com/amazingSurge/breakpoints.js/ 许可:GPL 依赖:jQuerys DataAPI:无 功能:用于响应式布局设置断点 Breakpoints();...

  • 用来兼容jquery1.7 版本, jquery版本之间有一些方法可能不同或废弃,会有报错, 可以引入一个 jquery-migrate.min.js 来兼容。 比如1.9版本对于 live(),die(),toggle(),sub(),$.browser 等等都已经不支持了...

  • 1.breakpoints.js是什么? breakpoints.js是一个jQuery插件。定义响应性设计的断点,Breakpoints.js 将在浏览器进入和/或者退出断点时消除自定义事件。 breakpoints下载文件夹中readme.txt文件中有这么一句话...

  • 公司:西安蟠龙网络科技有限公司
  • 联系人:张经理
  • 手机/微信:187 2951 9978
  • Q Q: 136 8888 63 点击这里给我发消息
  • 地址:西安市雁塔区唐延南路11号逸翠园i都会
  • CSS3 使用 calc() 计算宽度高度vw vh px

    Viewport viewport:可视窗口,也就是浏览器。 vw Viewport宽度, 1vw 等于viewport宽度的1% vh Viewport高度, 1vh 等于viewport高的的1% CSS3使用Calc calc()使用通用的数学运算规则,但是也提供更智能的功能:...

  • !function foo()、(function(){}())与(function(){})()

    1. (function(){}())与(function(){})() 这两种写法,都是一种 立即执行函数 的写法,即IIFE (Immediately Invoked Function Expression)。这种函数在函数定义的地方就直接执行了。 通常的函数声明和调用分开的写...

  • 浏览器清缓存方法

    浏览器缓存有时挺大的,修改网站后半天看不到效果,今天西安蟠龙小编总结几种清缓存看网站修改效果的方法 清缓存方法: 一、ctrl+f5 多刷新几次 二、用浏览器的无痕模式或者隐私模式 三...

  • Javascript中window.location.origin是什么

    window.location.origin(?前边的URL) 如果有端口号,含端口号 结果如下: http://www.it2168.com:8080 window.location.origin兼容问题 if (!window.location.origin) { window.location.origin = window.location.protocol + // + window.l...

  • matchHeight使所有选定元素的高度完全相等 jQuery响应式匹配高度组件

    matchHeight使所有选定元素的高度完全相等。 尽管这曾经是一个棘手的问题,但如今建议在可能的地方使用CSS Flexbox和CSS Grid,尽管该库对于旧版浏览器仍然有用。 特征 自动匹配元素组的高度 使...

  • 收集整理了一些Web前端开发比较成熟的第三方插件,分享给大家

    收集整理了一些Web前端开发比较成熟的第三方插件,分享给大家。 ******************************************************************************* 一、国外插件 ace 版本:1.2.3au 官网:https://github.com/ajaxorg/ace-bu...