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-2387 Til the Cows Come Home ( 最短路 )

    题目链接: http://poj.org/problem?id=2387 Description Bessie is out in the field and wants to get back to ...

  2. 牛课练习赛34 Flittle w and Discretization 主席树维护Mex

    ittle w and Discretization 主席树维护Mex. 每个右端点 r 维护出一棵 在[1, r ] 区间中 其他所有的 值离这个 r 最近的的位置是多少. 然后询问区间[L,R]的 ...

  3. python控制台简单实现五子棋

    #棋盘#落子#规则import randomclass chess: def __init__(self): print('#---------------棋盘----------------#') ...

  4. XML的相关基础知识分享

    XML和Json是两种最常用的在网络中数据传输的数据序列化格式,随着时代的变迁,XML序列化用于网络传输也逐渐被Json取代,前几天,单位系统集成开发对接接口时,发现大部分都用的WebService技 ...

  5. 洛谷 P1980【计数问题】 题解（1）

    鉴于数据最高只有七位数,通过判断数位,逐位判断即可完成本题. (运行很快,打得手疼) //Stand up for the faith!#include<bits/stdc++.h> us ...

  6. React-router总结

    版本 v3和v4有一些差距: https://blog.csdn.net/qq_35484341/article/details/80500237 以下的总结,都是基于V4的 官方文档:https:/ ...

  7. MySql（二）_NHibernateHelper管理会话工厂

    1.定义接口的好处: (1) 清楚的看到里面有哪些方法: ( 2 )  可以更换实现类:Nhibernate实现件可以更换: Manger文件夹(另外两个是Model.Mappings文件夹) 首先M ...

  8. 搜索入门练习题9 LETTERS 题解

    题目出处:<信息学奥赛一本通>第五章上机练习1 或者 POJ1154 题目描述 给出一个 \(R\times S\) 的大写字母矩阵,一开始你所处的位置在左上角,你可以向上下左右四个方向移 ...

  9. Android 点九图机制讲解及在聊天气泡中的应用

    点九图简介 Android为了使用同一张图作为不同数量文字的背景,设计了一种可以指定区域拉伸的图片格式".9.png",这种图片格式就是点九图. 注意:这种图片格式只能被使用于An ...

  10. Android 让你的 Room 搭上 RxJava 的顺风车 从重复的代码中解脱出来

    # 什么是 Room ? 谷歌为了帮助开发者解决 Android 架构设计问题,在 Google I/O 2017 发布一套帮助开发者解决 Android 架构设计的方案:Android Archit ...