宽度等于父元素的宽度减去16像素
高度等于父元素的高度减去16像素
注意：100%和16px   与减号之间必须有空格，否则高度会失效！！！！
.box{
　　width:calc(100% - 16px);
　　height:calc(100% - 16px);
　　margin:8px;
 
}
 

css 计算属性 calc的使用的更多相关文章

  1. css计算属性 calc()

    left: calc((100vw - 400px) / 2);   calc 进行简单的运算时,运算符号左右各要有一个空格,不然不起作用.

  2. css3中样式计算属性calc()的使用和总结

    calc的介绍 在css3样式中有一个类似与函数的计算属性calc(),它主要用于指定元素的长度,无论是border.margin.pading.font-size和width等属性都可以使用calc ...

  3. css3计算属性(calc)

    如果有固定头部高度和底部高度,内容的高度或者宽度想要根据浏览器屏幕自适应的话,可以用到css3的计算属性,即calc. 用法如下: 内容区域高/宽 = calc(100% - 头部高宽 - 底部高宽) ...

  4. 20190614笔记（颜色透明度,css,filter,滤镜,计算属性,json和formData转换）

    今天忙里偷闲,把最近做的笔记做一下整理. 1.json和formData互相转换 适用场景:对接后台接口.后台接口写的因人而异,不同的人有不同的风格.比如,文件上传,原本就是formData格式,有人 ...

  5. CSS中新属性calc()

    CSS3的calc()使用 原文: http://www.w3cplus.com/css3/how-to-use-css3-calc-function.html © w3cplus.com calc( ...

  6. 纯CSS实现自动轮播，CSS变量的定义与使用，计算属性的使用

    先来看一下实现的效果: 实现原理: HTML中使用ul>li存放图片 CSS使用CSS3的animation来完成动画 <!-- HTML --> <section class ...

  7. 【演示】在CSS里用calc进行计算

    请阅读 在CSS里用calc进行计算   下面的元素的width,padding,margin都使用了CSS calc进行计算. 简单计算: 100% – 100px 这是经过简单计算的元素宽度 复杂 ...

  8. css中新增的属性calc()可以计算使用

    什么是calc: calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,用来指定元素的长度.可以使用calc()给元素的border.margin.pading.font-s ...

  9. 【转】CSS z-index 属性的使用方法和层级树的概念

    文章转自:CSS z-index 属性的使用方法和层级树的概念,另外加了一点自己的注释 CSS 中的 z-index 属性用于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面 ...

随机推荐

  1. PHP代码审计笔记--文件包含漏洞

    有限制的本地文件包含: <?php include($_GET['file'].".php"); ?> %00截断: ?file=C://Windows//win.in ...

  2. ubuntu 上安装vnc server

    Ubuntu下设置VNCServer   Virtual Network Computing(VNC)是进行远程桌面控制的一个软件.客户端的键盘输入和鼠标操作通过网络传输到远程服务器,控制服务器的操作 ...

  3. osgearth2.8关于RectangleNodeEditor编辑点不可见的问题

    static_cast<SphereDragger*>(_llDragger)->setColor(osg::Vec4(0,0,1,0)); Alpha写成了0 应该写成 stati ...

  4. CentOS7--使用yum安装和管理软件

    yum是红帽软件包管理器,它能能够查询,安装和卸载软件包,以及将整个系统更新到最新的可用版本.Yum可以在安装的过程中自动解决依赖关系. 1. 检查和更新软件包 1.1 查询更新 查看系统上哪些已安装 ...

  5. Apache Kafka 0.11版本新功能简介

    Apache Kafka近日推出0.11版本.这是一个里程碑式的大版本,特别是Kafka从这个版本开始支持“exactly-once”语义(下称EOS, exactly-once semantics) ...

  6. flask实现简单的接收json返回json的接口

    结合http://docs.jinkan.org/docs/flask/quickstart.html#a-minimal-application这个flask文档实现 #!/usr/bin/pyth ...

  7. [iOS] 在 ios10 中使用 imessage

    本文转载至 http://www.tuicool.com/articles/zIFvQn7   原文  http://www.bourbonz.cn/在ios10中使用imessage/ 主题 iOS ...

  8. 自定义 Core Data 迁移

    本文转载至 http://objccn.io/issue-4-7/ 感谢本文作者 朱宏旭 的不啬分享 自定义 Core Data 迁移似乎是一个不太起眼的话题.苹果在这方面只提供了很少的文档,若是初次 ...

  9. 《Lua程序设计》第3章 表达式 学习笔记

    3.1 算术操作符“+”(加法).“-”(减法).“*”(乘法).“/”(除法).“^”(指数).“%”(取模).3.2 关系运算符< > <= >= == ~=3.3 逻辑操 ...

  10. Android学习之BitMap用法实例

    下面简单说明了BitMap的用法: 从服务器下载一张图片,显示在ImageView控件上,并将该图片保存在移动设备的SD上. // 根据网络URL获取输入流 public InputStream ge ...