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. POJ 2491 Scavenger Hunt map

    Scavenger Hunt Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 2848   Accepted: 1553 De ...

  2. 徐州邀请赛 江苏 icpc I. T-shirt 矩阵快速幂

    题目 题目描述 JSZKC is going to spend his vacation! His vacation has N days. Each day, he can choose a T-s ...

  3. ‎Cocos2d-x 学习笔记(24) ParticleSystem ParticleSystemQuad

    1. ParticleSystem ParticleData是存储粒子数据的类,ParticleSystem会关联一个ParticleData对象. ParticleSystem直接继承了Node.T ...

  4. CM & CDH 基本概念

    什么是 CDH Hadoop 是开源项目,所以很多公司在这个基础上进行商业化,不收费的 Hadoop 主要有三个: Apache,最原始的版本,所有发行版均基于这个版本进行 Cloudear,全称 C ...

  5. Taro框架下qq小程序开发体验

    qq小程序发布了,作为第一批体验者 .还是发现了和微信小程序很多不同的地方. 最新的小程序我这里都是用Taro开发的,体验较为不错.数据管理用的是redux.JS用的ES6加async等. 微信小程序 ...

  6. Netty源码分析 （六）----- 客户端连接接入accept过程

    通读本文,你会了解到1.netty如何接受新的请求2.netty如何给新请求分配reactor线程3.netty如何给每个新连接增加ChannelHandler netty中的reactor线程 ne ...

  7. SpringBoot使用注解的方式构建Elasticsearch查询语句，实现多条件的复杂查询

    背景&痛点 通过ES进行查询,如果需要新增查询条件,则每次都需要进行硬编码,然后实现对应的查询功能.这样不仅开发工作量大,而且如果有多个不同的索引对象需要进行同样的查询,则需要开发多次,代码复 ...

  8. 使用vitamio长时间播放崩溃的另类处理

    最近公司一个项目在公交站旁边弄一个 广告牌,上面是广告视频,下面是广告图片,都是无限轮播的.要求从早上6点到晚上11点不间断播放.剩余时间为关机状态. 图片部分还好说,就是viewpager弄一个无限 ...

  9. pageable多字段排序问题

    Sort sort = new Sort(Sort.Direction.DESC, "createdate") .and(new Sort(Sort.Direction.AES, ...

  10. 【转载】pandas中的循环

    原始文章链接: https://towardsdatascience.com/how-to-make-your-pandas-loop-71-803-times-faster-805030df4f06 ...