calc() ---一个会计算的css属性
最近这个月一直在赶项目开发，遇到的问题和学到的前端知识没有更新到博客园，现在闲了下来，就整理一下前端知识。
在项目开发中，在样式这方面花费的时间较多，因为针对于数字的变化特别多，本人不爱记数字，在看设计图时总是反复计算之间的数值，觉得很麻烦，偶然谷歌一下，发现了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属性的更多相关文章
- css属性pointer-events
绝对定位元素盖住链接或添加某事件handle的元素后,那么该链接的默认行为(页面跳转)或元素事件将不会被触发.现在Firefox3.6+/Safari4+/Chrome支持一个称为pointer-ev ...
- JS里引用CSS属性时候的命名
如果JS代码中设置<p>元素的另一个CSS属性font-family.这个属性的获取方式与color属性略有不同,因为 font和family之间的连字符与JS中减法操作符相同,J ...
- 【转载】神奇的css属性pointer-events
绝对定位元素盖住链接或添加某事件handle的元素后,那么该链接的默认行为(页面跳转)或元素事件将不会被触发.现在Firefox3.6+/Safari4+/Chrome支持一个称为pointer-ev ...
- 一个可以查询CSS属性兼容性的网站。
平时遇到CSS属性是不是道理具体兼容哪些网站,就可以直接上这个网站查询啦.http://www.caniuse.com/ 这个是网站地址. 例如查询 inline-block属性兼容性 就可以看到 ...
- css样式重叠、css样式继承、css 属性计算，，a元素下的文字颜色不能继承
1.属性的重叠 在渲染前浏览器将判断使用哪个样式 我们书写的样式会覆盖浏览器的自带样式 我们写的样式进行权重比较,规则如下 !import Infiniti无穷大 进制伪256行内样式 1000.id ...
- 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧
记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...
- 用js控制css属性
在用js控制css属性时,行内css属性可以任意控制,但若是在<style></style>中写的css属性,均不能用alert读取,但是赋值却有几种现象, 第一种:无法读取, ...
- CSS属性操作/下
CSS属性操作/下 1.伪类 anchor伪类 跟<a>/</a>有关:专用于控制链接的显示效果 a:link(没有接触过的链接),用于定义了链接的常规状态. a:hover( ...
- CSS属性操作
CSS属性操作 1 属性选择器 Elenment(元素) E[att] 匹配所有具有att属性的E元素,不考虑它的值.(注意:E在此处可以省略)(推荐使用) 例如:[po]{ font-size: 5 ...
随机推荐
- 老大哥在看着你！我国部署超2000万个AI监控系统
原文:Big brother is watching you! China installs 'the world's most advanced video surveillance system' ...
- C++实现引用和被引用对象分离
上一篇博客简单介绍了C++中引用的底层实现,接下来,通过简单的代码验证如何将引用和被引用对象分离. 代码如下; #include <iostream> #include<string ...
- Holding Bin-Laden Captive!（1.多重背包 2.母函数）
Holding Bin-Laden Captive! Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/ ...
- 关于php加密库加密数据上传数据库或解密出错的问题
php加密拓展库随着php版本的更新,函数的使用方法有所改变,所以加密模式推荐使用ecb,其中加密算法19种,加密模式8种,通过这种方式加密后的数据上传数据库后提取出来进行解密会发现结果是乱码,我认为 ...
- java爬虫--jsoup简单的表单抓取案例
分析需求: 某农产品网站的农产品价格抓取 网站链接:点击打开链接 页面展示如上: 标签展示如上: 分析发现每日价格行情包括了蔬菜,水果,肉等所有的信息,所以直接抓每日行情的内容就可以实现抓取全部数据. ...
- JavaScript 中对变量和函数声明的“提前（hoist）”
hoist vt.升起,提起; vi.被举起或抬高; n.起重机,升降机; 升起; <俚>推,托,举; 这篇文章不讲英语,但是对于某些英语单词找不到很好的翻译,一上来就列出“hoist”这 ...
- 《项目架构那点儿事》——快速构建Junit用例
[前 言]按照惯例,在实际项目中我往往会对自己编写的程序进行测试,当测试通过后才能将其用于实战中,当然,编写单元测试是不可避免的,可以直接清晰的检验出 我们程序的可靠性.可只执行性,从中发现问题从而得 ...
- C#中泛型之Dictionary
1.命名空间:System.Collections.Generic(程序集:mscorlib)2.描述: 1).从一组键(Key)到一组值(Value)的映射,每一个添加项都是由一个值及其相关连的键组 ...
- [转]ORACLE SQL解析之硬解析和软解析
http://blog.chinaunix.net/uid-25909722-id-3363789.html 当客户端进程,将SQL语句通过监听器发送到Oracle时, 会触发一个Server pro ...
- 你好 JSONP ！！！！
跨域与JSONP ==JSONP是解决跨域问题的一种常见方式== ==跨域问题==:因为浏览器有同源策略,所以当不同域间进行数据交互的时候就会出现跨域问题 ···· 同源策略:只有在同协议,同域名,同 ...