转载自:css3 calc()的用法

说明:calc(四则运算);任何长度值都可以使用calc()函数进行计算;和平时的加减乘除优先顺序一样一样的;

特别注意:calc()里面的运算符必须前后都留一个空格,不然浏览器识别不了,比如:calc(100% - 5px);

兼容性:

HTML:

<div class="out">
    <div class="in">in</div>
</div>

CSS:

.out{
    width: 200px;
    height: 200px;
    background: red;
    padding: 10px;
    margin: 40px auto;
  }
.in{
    width: 100%;
    height: 100%;
    background: skyblue;
    padding: 20px 10% 12% 30px;
  }

结果:

这个时候out被撑破了怎么办呢,padding百分比不好计算啊。。。css3的calc()属性就帮了大忙了。

重新设置in的css属性:

.in{
  width: calc(100% - 30px - 10%);
  width: -webkit-calc(100% - 30px - 10%);
  width: -moz-calc(100% - 30px - 10%);   height: calc(100% - 20px - 12%);
  height: -webkit-calc(100% - 20px - 12%);
  height: -moz-calc(100% - 20px - 12%);   background: skyblue;
  padding: 20px 10% 12% 30px;
}

结果:

css3 calc()的用法的更多相关文章

  1. CSS3的@keyframes用法详解:

    CSS3的@keyframes用法详解:此属性与animation属性是密切相关的,关于animation属性可以参阅CSS3的animation属性用法详解一章节. 一.基本知识:keyframes ...

  2. css3 calc():css简单的数学运算-加减乘除

    css3 calc():css简单的数学运算–加减乘除 多好的东西啊,不用js,一个css就解决了. .box{ border:1px solid #ddd; width:calc(100% - 10 ...

  3. css3 calc()

    概述 CSS函数calc()可以用在任何一个需要<length>的地方.有了calc(),你可以通过计算来决定一个对象的大小和形状. 你还可以在一个calc()内部嵌套另一个calc(). ...

  4. css基础之 font的简写规则 以及 自定义 CSS3 @font-face详细用法

    Part 1 font简写 CSS的命名规则是用英文字母 数字 和下划线(一般用小写)来命名.简写css font的好处有三:一是写起来方便(就像键盘快捷键):二是简化代码:三是帮助你熟悉和深刻理解c ...

  5. CSS3 calc()函数使用

    1.calc是什么? calc是英文单词calculate(计算)的缩写,用于动态计算长度值. calc()函数支持 "+", "-", "*&quo ...

  6. border-box和CSS3 calc()解决盒模型加边框或边距后尺寸变大的问题

    box-sizing box-sizing的CSS属性是用来改变默认的CSS框模型 属性 初始值:content-box 适用于:接受的所有元素的宽度或高度 继承:无 媒体:visual 指定的:as ...

  7. 前端CSS3动画animation用法

    前端CSS3动画animation用法 学习如下动画属性 @keyframes animation-name animation-duration animation-delay animation- ...

  8. CSS3 calc()的使用

    前言: 平时在制作页面的时候,总会碰到有的元素是100%的宽度.众所周知,如果元素宽度为100%时,其自身不带其他盒模型属性设置还好,要是有别的,那将导致盒子撑破.比如说,有一个边框,或者说有marg ...

  9. css3 calc()方法详解

    calc()对大家来说,或许很陌生,不太会相信calc()是css中的部分.因为看其外表像个函数,既然是函数为何又出现在CSS中呢?这一点也让我百思不得其解,今天有一同事告诉我,说CSS3中有一个属性 ...

随机推荐

  1. 使用 js,自己写一个简单的滚动条

    当我们给元素加上 overflow: auto;  的时候,就会出现滚动条,然而浏览的不同,滚动条的样式大不一样,有些甚至非常丑. 于是就想着自己写一个滚动条,大概需要弄清楚一下这几个点: 1.滚动条 ...

  2. EF中,保存实体报错:Validation failed for one or more entities. 如何知道具体错误在哪?

    异常提示:Validation failed for one or more entities. See 'EntityValidationErrors' property for more deta ...

  3. webpack基础小结。

    想写写webpack的学习体验的小结,加深自己的理解和使用技能,顺便过一下文档(4.0的功能感觉还是满好玩的). 本文主简写描述webpack中对各种文件的简单处理 基本知识点 处理js 加载css文 ...

  4. Python3.0科学计算学习之绘图(一)

    基本绘图: (1)  plot是标准的绘图库,调用函数plot(x,y)就可以创建一个带有绘图的图形窗口(其中y是x的函数).输入的参数为具有相同长度的数组(或列表):或者plot(y)是plot(r ...

  5. 2017 5 31 php面向过程 面向对象1

    面向过程的语法定义变量:定义函数:使用变量(输出,赋值,等)调用函数:流程控制(if,switch,for,while等) 面向对象的语法1,定义类:定义类的语法中,只有这3种代码:1.1定义属性(变 ...

  6. PHP 获取一篇文章内容中的全部图片,并下载

    做个记录,在工作or面试中有可能会遇到function downImagesFromTargetUrl($url, $target_dir = null) { if(!filter_var($url, ...

  7. Fiddler抓包【3】_设置断点修改

    1. 断点修改Request 1.1.Request全部中断 设置中断:Rules---> Automatic Breakpoints--->Before Requests 取消中断:Ru ...

  8. Django中怎么做图片上传--图片展示

    1.首先是html页面的form表单的三大属性,action是提交到哪,method是提交方式,enctype只要有图片上传就要加这个属性 Django框架自带csrf_token ,所以需要在前端页 ...

  9. NuGet的简单使用

    什么是NuGet? NuGet(读作New Get)是用于微软.NET开发平台的软件包管理器,是一个Visual Studio的扩展.在使用Visual Studio开发基于.NET Framewor ...

  10. 第一个Spring程序HelloWorld

    对于初学者而言,任何理论化的讲解都比不上一个简单的HelloWorld,我们在学习Spring时也不外乎用最简单的HelloWorld程序来将这个灵活而又强大的轻量级框架推送到诸位面前.想要说明的是现 ...