宽度等于父元素的宽度减去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. RESTFul basic introduction

    http://www.ruanyifeng.com/blog/2011/09/restful.html

  2. Android应用程序的结构

    1.src目录 存放该项目的源代码 2.gen目录 该目录文件是ADT自动生成的,并不需要认为地去修改 3.Android2.1 该目录存放的是该项目支持的JAR包,同时还包含项目打包时需要的META ...

  3. 在MyEclipse（2015）中上传项目到github的步骤（很详细）

    (图文)在MyEclipse(2015)中上传项目到github的步骤(很详细) git|smartGit使用详解 SmartGit使用教程

  4. 《转载》Linux服务之搭建FTP服务器&&分布式文件服务器的比较

    参考帖子: Linux服务之FTP vsftpd的使用 大型网站图片服务器架构的演进 rsync同步文件的艺术  rsync命令详解 深入理解Tomcat虚拟目录  (测试已经OK)

  5. 【大数据系列】hadoop单节点安装官方文档翻译

    Hadoop: Setting up a Single Node Cluster. HADOOP:建立单节点集群 Purpose Prerequisites Supported Platforms R ...

  6. css案例 - 评分效果的星星✨外衣

    纳尼?什么星星外衣?好,直接上图比较能说清楚: 仔细看会发现规律:可以根据百分比/分值动态改变高亮星星的个数. 分步骤图: 这种效果,如果遇到一分一个星,没有半星(或者有也可以,直接加一个半星的类名) ...

  7. Android studio Unable to start the daemon process

    Unable to start the daemon process.This problem might be caused by incorrect configuration of the da ...

  8. Windows Phone Bing lock screen doesn't change解决方法

    之前一直用的Lumia 925,Bing lock screen每天都会更换.这几天换了Lumia 930,同步了账号相关的设置,发现Bing lock screen不再每天更换.尝试重启.使用cel ...

  9. 【CF883B】Berland Army 拓扑排序

    [CF883B]Berland Army 题意:给出n个点,m条有向边,有的点的点权已知,其余的未知,点权都在1-k中.先希望你确定出所有点的点权,满足: 对于所有边a->b,a的点权>b ...

  10. iOS - View的抖动效果

    /** * 抖动效果 * * @param view 要抖动的view */ - (void)shakeAnimationForView:(UIView *) view { CALayer *view ...