宽度等于父元素的宽度减去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. 如何删除一个CSDN上自己上传的资源

    原文地址:http://www.xuebuyuan.com/1875216.html 昨天晚上进行测试,上传了一个压缩包和大家分享,测试完成后,为了不想给被测试的公司造成伤害,决定把上传的包删除,结果 ...

  2. IOS音频1:之采用四种方式播放音频文件(一)AudioToolbox AVFoundation OpenAL AUDIO QUEUE

    本文转载至 http://blog.csdn.net/u014011807/article/details/40187737 在本卷你可以学到什么? 采用四种方法设计应用于各种场合的音频播放器: 基于 ...

  3. codeforces水题100道 第十五题 Codeforces Round #262 (Div. 2) A. Vasya and Socks (brute force)

    题目链接:http://www.codeforces.com/problemset/problem/460/A题意:Vasya每天用掉一双袜子,她妈妈每m天给他送一双袜子,Vasya一开始有n双袜子, ...

  4. open-falcon之alarm、sender、links说明.md

    alarm 功能 处理judge 产生的告警event 区分告警优先级,优先处理级别比较高的告警 为用户提供回调接口 生成告警msg 展示未恢复的告警 配置文件 { "debug" ...

  5. MFC 虚函数与消息映射区别

    初学MFC添加函数时,总是纠结于是 Add  windows message handler or Add virtual function 说到底不理解MFC中虚函数与消息处理函数的设计区别 本人理 ...

  6. scanf printf sprintf fprintf

    都是C语言中的函数,但C++保留了这些函数,在头文件iostream中声明了. 1 scanf(格式控制,输出列表) printf (格式控制,输出列表) 举例: #include <iostr ...

  7. Python tkinter 控件更新信息

    下面几个例子关于tkinter界面更新的,简单易懂,分享一下. 例子_1: 代码_1: from tkinter import Tk, Checkbutton, Label from tkinter ...

  8. Struts2之Action三种接收参数形式与简单的表单验证

    有了前几篇的基础,相信大家对于Struts2已经有了一个很不错的认识,本篇我将为大家介绍一些关于Action接收参数的三种形式,以及简单的表单验证实现,下面进入正题,首先我们一起先来了解一下最基本的A ...

  9. 基于spring-cloud的微服务(1) 服务注册中心eureka

    eureka是Netflix提供的服务注册中心组建,springcloud将其做了封装,作为自己的微服务架构中的一个注册中心组建 下面的例子在IDEA中启动一个eureka的实例,然后提供一个prov ...

  10. DragonBones龙骨发布后在Egret中的位置

    DragonBones发布后的动画,加载到Egret中场景中,原点的位置在哪呢? DragonBones中的图片位置 导出 加载到Egret中.可见DragonBones中的图片位置原点左下方(0,0 ...