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. 杭电多校第九场 HDU6415 Rikka with Nash Equilibrium dp

    Rikka with Nash Equilibrium Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 524288/524288 K ...

  2. ACM-ICPC 2017 Asia Urumqi：A. Coins（DP） 组合数学

    Alice and Bob are playing a simple game. They line up a row of nn identical coins, all with the head ...

  3. 2015北京区域赛 Mysterious Antiques in Sackler Museum 几何基础+思维

    题意是,选出三个,看看是否可以凑成一个新的矩形. #include<bits/stdc++.h> using namespace std; struct node { ]; }a[]; b ...

  4. MAC下安装REDIS和REDIS可视化工具RDM并连接REDIS

    实验环境:一台mac V:10.13.6 一.安装redis brew install redis 二.安装RDM 直接下载安装rdm dmg文件 链接: https://pan.baidu.com/ ...

  5. android Drawable Resource学习

    转载自: http://blog.csdn.net/true100/article/details/52316423 http://blog.csdn.net/true100/article/deta ...

  6. 一些简单的Linux命令（centos修改网络ip，修改主机名）

    环境:linux centos 7 vi /etc/sysconfig/network-scripts/ifcfg-enp3s0f0 可以修改网关地址,网络IP地址,子网地址等等 [root@loca ...

  7. 记一次Mysql数据库Kill完之后启动不起来的解决方案

    在Mysql运行的时候,有时候会stop不了,这时候我们就会想直接把他的进程kill掉. 但是,有时候kill完了之后,在去start它就会直接抛异常了... ERROR! The server qu ...

  8. win下的mongodb安装和基础操作

    一.下载地址: https://www.mongodb.com/download-center/community 二.安装错误: 1.安装过程中报错(类似下图): 原因:没有管理员权限 解决:管理员 ...

  9. jenkins在windows上自动化部署.Net（.Net Core）项目

    前言 什么是持续集成呢?Continuous integration(CI).持续集成是一种软件开发实践,即团队开发成员经常集成他们的工作,通常每个成员至少集成一次,也就意味着每天可能会发生多次集成. ...

  10. Matlab 图论最短路问题模型代码

    最短路问题的基本内容 最短路问题研究的是,在一个点与点之间连接形成的网络图中,对应路径赋予一定的权重(可以理解为两点之间的距离),计算任意两点之间如何和走,路径最短的问题.在这里的距离可以理解成各种两 ...