宽度等于父元素的宽度减去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. ASP代码审计学习笔记 -4.命令执行漏洞

    命令执行漏洞: 保存为cmd.asp,提交链接: http://localhost/cmd.asp?ip=127.0.0.1 即可执行命令 <%ip=request("ip" ...

  2. Kafka（二）-- 安装配置

    一.单机部署 1.下载kafka,可在apache官网上下载,kafka要和JDK版本对应,我使用的是JDK1.7,kafka为0.10 2.进入到 /usr/java 中,解压到 此文件夹中 tar ...

  3. 使用pyenv管理不同的python版本

    1. pvenv的安装 git clone https://github.com/yyuu/pyenv.git ~/.pyenv echo 'export PYENV_ROOT="$HOME ...

  4. 《转载》Python3安装Scrapy

    运行平台:Windows Python版本:Python3.x IDE:Sublime text3 转载自:http://blog.csdn.net/c406495762/article/detail ...

  5. Android井字游戏（一）首页制作

    创建一个新程序: 应用名: Tic Tac Toe 公司域名: example.org 尺寸: Phone and Tablet 最低SDK: API16: Android 4.1 添加活动: Emp ...

  6. Esper学习之十：EPL语法（六）

    在esper的文档中,epl访问数据库的配置放在了比较靠后的位置,不过为了方便各位学习,这里会先说明和数据库交互的相关配置,然后再说epl怎么访问数据库. 配置文件在官方esper包的etc文件夹下, ...

  7. 学习 python 编写规范 pep8 的问题笔记

    决定开始Python之路了,利用业余时间,争取更深入学习Python.编程语言不是艺术,而是工作或者说是工具,所以整理并遵循一套编码规范是十分必要的.所以今天下午我根据PEP 8整理了一份,以后都照此 ...

  8. photobeamer

    NOKIA出品的photobeamer https://www.photobeamer.com/你打开这个网站,会生成的二维码手机上打开photobeamer这个软件,选择要显示的相片,再扫描刚才网页 ...

  9. LeetCode 80 Remove Duplicates from Sorted Array II（移除数组中出现两次以上的元素）

    题目链接:https://leetcode.com/problems/remove-duplicates-from-sorted-array-ii/#/description 给定一个已经排好序的数组 ...

  10. mysql语句性能分析案例

    写法不一样而功能完全相同的两条 SQL 的在性能方面的差异.示例一需求:取出某个 group(假设 id 为 100)下的用户编号(id),用户昵称(nick_name).用户性别( sexualit ...