width:calc(100% - 20px);

width:-webkit-calc(100% - 20px);//chrome

width:-moz-calc(100% - 20px);//firefox

height:calc(80% + 20px);

height:-webkit-calc(80% + 20px);//chrome

height:-moz-calc(80% + 20px);//firefox

特别注意：+或者-两边都要用空格隔开！！！

【CSS】width和height计算的更多相关文章

  1. JQuery获取元素宽度.width()与.css(‘width’)两个函数的区别

    整理翻译自:http://blog.jquery.com/2012/08/16/jquery-1-8-box-sizing-width-csswidth-and-outerwidth/ 大意是: 在J ...

  2. CSS中width和height与盒子模型的关系

    盒子模型 css中盒子模型包含属性margin.border.padding.width与height,他们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也具有这些属性,所以 ...

  3. 【CSS中width、height的默认值】

    对于初学者来说,CSS中的width.height的默认值是很神奇的,因为经常看到如下这样的代码:明明只给一个#father标签(红色的div)设置了一个width,为啥它在浏览器中显示出来是有一个固 ...

  4. IE6以下版本对元素width和height的处理与CSS标准的兼容性问题

    1.CSS使用width和height定义元素框的内容,Windows平台的IE6以下版本浏览器并未按照标准处理而是使用width和height来定义可见元素框的尺寸,IE/win使用width来描述 ...

  5. canvas基础入门（一）canvas的width、height于css样式中的宽高区别

    canvas的width.height于css样式中的宽高对画布的内容显示是有所区别的 1.在canvas标签下调用他的width和height,而且是没有单位的宽高,这种指定canvas大小的方法也 ...

  6. css中width和height默认值

    width和height默认都是auto自动伸缩的,但不同的标签效果却不一样比如div默认是width:100%,通常不用写100%如果是table,如果div内的table没有设定100%,那就是最 ...

  7. CSS过渡约束的计算

    CSS过度约束性质 什么是CSS过度约束 当没有开启绝对定位或固定定位时 水平布局必须要满足以下等式 探寻能够设置成auto的CSS属性 等式不成立(过度约束)时的几种情况 当margin与width ...

  8. 看完就懂--CSS选择器优先级的计算

    CSS选择器优先级的计算 什么是选择器的优先级 优先级的计算与比较(一) - 优先级具有可加性 - 选择器优先级不会超过自身最大数量级 - 同等优先级情况下,后写的覆盖前写的 - 并集选择器之间的优先 ...

  9. H5 canvas的 width、height 与style中宽高的区别

    Canvas 的width height属性 1.当使用width height属性时,显示正常不会被拉伸:如下 <canvas id="mycanvas" width=&q ...

随机推荐

  1. CodeForces 982 D Shark

    Shark 题意:一个研究员观察了一条鲨鱼n天的运动,然后这条鲨鱼他只会往前走,不会回到去过的地方,现在有一个k,,如果鲨鱼当天游过的距离 >= k, 代表的鲨鱼在这天会前往下一个地点,现在求鲨 ...

  2. CSS3 01. CSS3现状、属性选择器、伪类选择器、结构伪类、伪元素选择器、颜色、文本阴影shadow、盒子模型、私有化前缀

    CSS 3 现状 兼容性差,需添加私有前缀/移动端优于PC端/不断改进中/渐进增强原则/考虑用户群体/遵照产品的方案 : CSS3手册 需要阅读其--阅读及使用指引 []表示全部的可选项 || 或者 ...

  3. NameNode数据存储

    HDFS架构图 HDFS原理 1)  三大组件 NameNode. DataNode .SecondaryNameNode 2)NameNode 存储元数据(文件名.创建时间.大小.权限.文件与blo ...

  4. Java SSM三端分离开发在线教育平台实战视频教程

    目录: 1-01——在线网校实战课程介绍1-02——Eclipse.Maven.JDK介绍1-03——Maven构建Project1-04——新浪SAE介绍2-01——平台业务结构概览2-02——平台 ...

  5. Python 为了提升性能，竟运用了共享经济

    大家或许知道,Python 为了提高内存的利用效率,采用了一套共用对象内存的分配策略. 例如,对于那些数值较小的数字对象([-5, 256]).布尔值对象.None 对象.较短的字符串对象(通常 是 ...

  6. Java如何创建不存在的指定路径的文件？

    实际应用中,要在指定位置创建一个文件,但文件及文件之前的目录都不存在,此时可用以下方法进行创建. 以下是主要代码: File f = new File("I:" + File.se ...

  7. 使用 Envoy 和 AdGuard Home 阻挡烦人的广告

    原文链接:使用 Envoy 和 AdGuard Home 阻挡烦人的广告 通常我们使用网络时,宽带运营商会为我们分配一个 DNS 服务器.这个 DNS 通常是最快的,距离最近的服务器,但会有很多问题, ...

  8. Android四大组件之服务的两种启动方式详解

    Service简单概述 Service(服务):是一个没有用户界面.可以在后台长期运行且可以执行操作的应用组件.服务可由其他应用组件启动(如:Activity.另一个service).此外,组件可以绑 ...

  9. aclocal-1.14: 未找到命令

    WARNING: 'aclocal-1.14' is missing on your system. 一条命令解决 autoreconf -ivf

  10. DOM之节点操作

    DOM提供了很多实用的API,这些API让我们可以轻松的访问HTML文档.所谓API(应用程序接口),简单来说,就是让我们可以直接使用它访问程序的一些属性或方法,而不用了解程序内部的运作过程和原理. ...