最近这个月一直在赶项目开发，遇到的问题和学到的前端知识没有更新到博客园，现在闲了下来，就整理一下前端知识。
　　在项目开发中，在样式这方面花费的时间较多，因为针对于数字的变化特别多，本人不爱记数字，在看设计图时总是反复计算之间的数值，觉得很麻烦，偶然谷歌一下，发现了css3的一个属性--calc()
　　calc() 很显然，是calculate的缩写--计算。是css3的一个属性。可以用来给width，height，border，margin以及padding等属性值设置动态值，拿个例子说：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .one{

            width:200px;    //内容的宽度是200px

            height:200px;

            background: red;

            border: 1px solid;

        }

        .two {

            height:100%;

            padding-left: 10px;

            padding-right: 20px;

            background: pink;

            width:calc(100% - 10px - 20px);  //内容的宽度是170px

        }

        .three {

            height:100%;

            padding-left: 20px;

            background: aqua;

            width: calc(100% - 20px);    //内容的宽度是150px

        }

    </style>

</head>

<body>

    <div class="one">

        <div class="two">

            <div class="three">abc</div>

        </div>

    </div>

</body>

</html>

里面的子元素不管怎么撑开，都不会超过父元素的边框。这样就不会考虑父元素的宽度是多少，直接写出calc()，浏览器自动计算width的属性值。大大的提高了效率。

使用方法：
　　1. 可以嵌套使用    例如：calc( calc() );
　　2. 可以使用四则运算 + - * ／；
　　3. 可以% ，px，em，rem 混合使用。

注意事项：
　　1. +和-在计算时前后要有空格，否则不识别。* 和 ／没要求，为了规范都加空格吧。 例如： calc(100%-10px) 这样不会识别。
　　2. 0 不能作为除数，否则会报错。很显然。

兼容性：
　　既然是css3的新属性，避免不了兼容性问题。

　　ie9以下不支持，火狐4以下不支持，4.0-15.0需要加前缀，谷歌19.0以下不支持，19.0-25.0需要加前缀，苹果5.1以下（包括5.1）不支持，6.0需要加前缀，欧朋15.0以下不支持。

　　

calc() ---一个会计算的css属性的更多相关文章

  1. css属性pointer-events

    绝对定位元素盖住链接或添加某事件handle的元素后,那么该链接的默认行为(页面跳转)或元素事件将不会被触发.现在Firefox3.6+/Safari4+/Chrome支持一个称为pointer-ev ...

  2. JS里引用CSS属性时候的命名

        如果JS代码中设置<p>元素的另一个CSS属性font-family.这个属性的获取方式与color属性略有不同,因为 font和family之间的连字符与JS中减法操作符相同,J ...

  3. 【转载】神奇的css属性pointer-events

    绝对定位元素盖住链接或添加某事件handle的元素后,那么该链接的默认行为(页面跳转)或元素事件将不会被触发.现在Firefox3.6+/Safari4+/Chrome支持一个称为pointer-ev ...

  4. 一个可以查询CSS属性兼容性的网站。

    平时遇到CSS属性是不是道理具体兼容哪些网站,就可以直接上这个网站查询啦.http://www.caniuse.com/ 这个是网站地址.  例如查询 inline-block属性兼容性 就可以看到 ...

  5. css样式重叠、css样式继承、css 属性计算，，a元素下的文字颜色不能继承

    1.属性的重叠 在渲染前浏览器将判断使用哪个样式 我们书写的样式会覆盖浏览器的自带样式 我们写的样式进行权重比较,规则如下 !import Infiniti无穷大 进制伪256行内样式 1000.id ...

  6. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

  7. 用js控制css属性

    在用js控制css属性时,行内css属性可以任意控制,但若是在<style></style>中写的css属性,均不能用alert读取,但是赋值却有几种现象, 第一种:无法读取, ...

  8. CSS属性操作/下

    CSS属性操作/下 1.伪类 anchor伪类 跟<a>/</a>有关:专用于控制链接的显示效果 a:link(没有接触过的链接),用于定义了链接的常规状态. a:hover( ...

  9. CSS属性操作

    CSS属性操作 1 属性选择器 Elenment(元素) E[att] 匹配所有具有att属性的E元素,不考虑它的值.(注意:E在此处可以省略)(推荐使用) 例如:[po]{ font-size: 5 ...

随机推荐

  1. 计数排序（O(n+k)的排序算法，空间换时间）

    计数排序就是利用空间换时间,时间复杂度O(n+k) n是元素个数,k是最大数的个数: 统计每个数比他小的有多少,比如比a[i]小的有x个,那么a[i]应该排在x+1的位置 代码: /* * @Auth ...

  2. hdu 2196 Computer(树形DP经典)

    Computer Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Su ...

  3. 默认权限umask、文件系统权限、特殊权限

    第1章 权限相关错误 1.1 普通用户 ls /root/ /root  属于root 普通用户没有任何权限,所以无法查看 [oldboy@znix ~]$ ls /root/ ls: cannot ...

  4. Python-week2，第二周（基于Python3.0以上）

    1,列表 存储数据我们可以使用变量,但是当有很多个数据的时候用变量就会出现很多的局限性,所以这时候就用到了列表.列表就是中括号里每个元素使用逗号隔开.列如     [1,2,3]     这就是一个列 ...

  5. mysql索引优化建议

    1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. 2.应尽量避免在 where 子句中对字段进行 null 值判断,否则将导致引擎放弃使用索 ...

  6. Android 开发笔记___EditText__文本编辑框

    常用属性: inputType:(代码中:setiputtype)设置输入类型,多种类型中间用"|" maxlength:最大长度,无法通过代码设置 hint:提示文本内容,(代码 ...

  7. javascript中的变量、作用域和内存问题

    1.变量 变量的值的类型:基本类型值和引用类型值两种. 基本类型:Undefined.Null.Boolean.String.Number,这五类基本数据类型的值在内存中占有固定大小的空间,因此保存在 ...

  8. 【WEB API项目实战干货系列】- WEB API入门(一)

    这篇做为这个系列的第一篇,做基本的介绍,有经验的人可以直接跳到第二部分创建 ProductController.   创建 Web API 项目 在这里我们使用VS2013, .NET 4.5.1创建 ...

  9. eclipse安装checkstyle无法加载到preferences的问题

    描述一下问题,eclipse安装checkstyle,不管是在线安装还是下载安装,在preferences都没有checkstyle选项,如下: 然我们要的效果是这样的:   解决方案如下: 1 启动 ...

  10. 淘宝轮播JS

    taobao首页轮播原生js面对对象封装版 Author:wyf 2012/2/25