宽度等于父元素的宽度减去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. Create maintenance backup plan in SQL Server 2008 R2 using the wizard

    You will need to identify how you want your maintenance plan to be setup. In this example the mainte ...

  2. shell编程（一）

    迷迷糊糊中发现了一个学习shell的非常好的教程,从头到尾看了一下,等看完全忘记了,没办法只能记录下来,教程网址http://c.biancheng.net/cpp/view/6994.html 以前 ...

  3. GNU Readline库函数的应用示例

    说明 GNU Readline是一个跨平台开源程序库,提供交互式的文本编辑功能.应用程序借助该库函数,允许用户编辑键入的命令行,并提供自动补全和命令历史等功能.Bash(Bourne Again Sh ...

  4. 【IOS】iOS 企业版应用网站下载plist文件

    如果想从自己公司的网站上下载安装应用,首先 准备一个 index.html文件 <!DOCTYPE html> <html lang="zh-cn"> &l ...

  5. linux计划任务之crontab

    语法:        crontab [ -u user ] file        crontab [ -u user ] [ -i ] { -e | -l | -r } 说明: crontab命令 ...

  6. 异常：Servlet class X is not a javax.servlet.Servlet

    使用Maven命令 mvn archetype:create 创建了一个简单的web项目.导入Eclipse运行时,报这样的异常信息: Servlet class X is not a javax.s ...

  7. SSL延迟有多大？

    http://www.ruanyifeng.com/blog/2014/09/ssl-latency.html 作者: 阮一峰 日期: 2014年9月24日 据说,Netscape公司当年设计SSL协 ...

  8. LeetCode 46 Permutations（全排列问题）

    题目链接:https://leetcode.com/problems/permutations/?tab=Description   Problem:给出一个数组(数组中的元素均不相同),求出这个数组 ...

  9. 路由器子网掩码设置不正确导致github无法访问

    奇怪的现象,路由器子网掩码设置成255.0.0.0会导致电脑访问不到https://github.com/ 改成默认的255.255.255.0就正常了.

  10. php 加密压缩

    php 把文件打成压缩包 ,可以去搜下 pclzip 搜很好多地方没有找到对压缩包进行加密操作的. 如果服务器是linux 那么见代码: $filename="test.csv"; ...