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 361 C. Levko and Array Recovery（暴力+思维）

    题目链接:http://codeforces.com/contest/361/problem/C 题意:对一个数列有这么两个操作 1.(1,l,r,p)..将区间[l,r]所有数都加上p 2.(2,l ...

  2. CodeForces 760 C. Pavel and barbecue（dfs+思维）

    题目链接:http://codeforces.com/contest/760/problem/C 题意:一共有N个烤炉,有N个烤串,一开始正面朝上放在N个位子上.一秒之后,在位子i的串串会移动到pi位 ...

  3. Catch That Cow POJ - 3278 [kuangbin带你飞]专题一 简单搜索

    Farmer John has been informed of the location of a fugitive cow and wants to catch her immediately. ...

  4. 【LeetCode】Two Sum II - Input array is sorted

    [Description] Given an array of integers that is already sorted in ascending order, find two numbers ...

  5. linux安装python串口工具pyserial遇到不能成功导入的问题

    常规方法:pip install pyserial导入serial后提示: 解决方法:apt install python3-serial 参考:https://stackoverflow.com/q ...

  6. Imageio: 'ffmpeg-win32-v3.2.4.exe' was not found on your computer; downloading it now.

    场景 在使用pip下载了Imageio之后,需要下载ffmpeag-win-32-v3.2.4.exe文件,一种是在代码的 开头部分加入: imageio.plugins.ffmpeg.downloa ...

  7. Winform中自定义xml配置文件后对节点进行读取与写入

    场景 Winform中自定义xml配置文件,并配置获取文件路径: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/100522648 ...

  8. mgo操作mongodb

    mgo基本使用: http://labix.org/mgo 安装 # go get gopkg.in/mgo.v2 package main import ( "fmt" &quo ...

  9. 上海地铁游移动APP需求分析

    人们在现实的生活中会遇到各种各样的问题,有不同的需求,我们需要加以解决,开发一个软件是一个很好的方法去解决这些需求和问题.那么,作为一个软件团队如何才能准确而全面地找到这些需求呢?主要有一下几个步骤. ...

  10. 数据库高级:SQL-CREATE-DATABASE语句

    CREATE DATABASE 语句 CREATE DATABASE 用于创建数据库. SQL CREATE DATABASE 语法 CREATE DATABASE database_name SQL ...