宽度等于父元素的宽度减去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. Ansible 管理任务计划

    ansible 使用 cron 模块来管理任务计划: [root@localhost ~]$ ansible 192.168.119.134 -m cron -a "name='test c ...

  2. Nginx 访问日志

    配置访问日志: [root@localhost ~]$ cat /usr/local/nginx/conf/nginx.conf http { log_format main '$remote_add ...

  3. 解决16bit压缩贴图失真问题

    选择索引模式

  4. Android学习之AutoCompleteTextView

    AutoCompleteTextView有点类似于EditText和Spinner的混合体.当用户在输入时,如果应用程序的文本输入框中使用了自动完成控件,预输入文本被看作是一个前缀过滤器,与用户当前输 ...

  5. 基于VLAN的二三层转发

    [章节内容]1 MAC地址2 冲突域和广播域3 集线器.交换机.路由器   3.1 集线器   3.2 网桥和交换机   3.3 路由器4 VLAN   4.1 VLAN帧格式      4.1.1 ...

  6. 【.netcore学习】.netcore添加到 supervisor 守护进程自启动报错

    配置 supervisor [program:HelloWebApp] command=dotnet run directory=/home/python/dotnet/myweb/mywebapi ...

  7. 【推荐系统论文笔记】Introduction To Recommender Systems: Algorithms and Evaluation

    这篇论文比较短,正如题目所说,主要还是简单地介绍了一下推荐系统的一些算法以及评估的方法. 推荐系统之前是基于关键字信息的过滤系统,后来发展成为协同过滤系统,解决了两个问题:1.通过人工审核去评价那些具 ...

  8. Linux(CentOS)安装JDK(.tar.gz)并配置

    本文思路转自http://blog.sina.com.cn/s/blog_81631744010137iy.html 点击(此处)折叠或打开 1.到 甲骨文(oracle)下载jdk不用多说 tar ...

  9. Unity3D笔记十四 力

    Unity中力的方式有两种:第一种为普通力,需要设定力的方向与大小:第二种为目标位置力,需要设定目标点的位置,该物体将朝向这个目标位置施加力. 1.案例 添加两个球体和一个立方体,另外还要给两个球体添 ...

  10. vue--子组件主动获取父组件的数据和方法

    子组件主动获取父组件的数据和方法 简单示例: this.$parent.数组 this.$parent.方法 示例: <template> <div id="Header& ...