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;    //内容的宽度是200pxheight: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里calculate,calc() ---一个会计算的css属性
最近这个月一直在赶项目开发,遇到的问题和学到的前端知识没有更新到博客园,现在闲了下来,就整理一下前端知识. 在项目开发中,在样式这方面花费的时间较多,因为针对于数字的变化特别多,本人不爱记数字,在看设 ...
css中会计算的属性,2017年12月聚合文章--calc() ---一个会计算的css属性 | 码友网
最近这个月一直在赶项目开发,遇到的问题和学到的前端知识没有更新到博客园,现在闲了下来,就整理一下前端知识. 在项目开发中,在样式这方面花费的时间较多,因为针对于数字的变化特别多,本人不爱记数字,在看设 ...
[译] Font-size：一个意外复杂的 CSS 属性
原文地址:Font-size: An Unexpectedly Complex CSS Property 原文作者:Manish Goregaokar 译文出自:掘金翻译计划本文永久链接:githu ...
css提取页面元素唯一性_下面这个函数，能够获取一个元素的任意 CSS 属性值。...
在对网页进行调试的过程中,经常会用到js来获取元素的CSS样式,方法有很多很多,现在仅把我经常用的方法总结如下: 1. obj.style:这个方法只能JS只能获取写在html标签中的写在style属 ...
js获取css属性值的方法
js操作获取dom元素的样式属性值 obj.style: 它只能够获取通过style设置的元素CSS属性值: 在html标签内通过style设置行内属性通过.dom.style.width=&quo ...
css属性pointer-events
绝对定位元素盖住链接或添加某事件handle的元素后,那么该链接的默认行为(页面跳转)或元素事件将不会被触发. 现在Firefox3.6+/Safari4+/Chrome支持一个称为pointer-e ...
CSS 获取当前可视屏幕高度--使用calc()方法动态计算宽度或者高度
先了解一下CSS3的相对长度单位和绝对长度单位(参考详细教程) : 相对长度单位相对长度单位指定了一个长度相对于另一个长度的属性.对于不同的设备相对长度更适用. 单位描述 em 它是描述相对于应用 ...
CSS 属性计算过程
CSS 属性计算过程你是否了解 CSS 的属性计算过程呢? 有的同学可能会讲,CSS属性我倒是知道,例如: p{color : red; } 上面的 CSS 代码中,p 是元素选择器,color 就 ...
一个可能让页面渲染速度提升数倍的CSS属性
浏览器在接收到服务端返回的 HTML 之后,需要把这段数据渲染成用户看到的页面,在开始渲染第一个元素之前可能还需要经过很多步骤.这个过程会适用于整个页面,包括当前不可见的内容. 所以在首屏渲染时,是有 ...

calc() ---一个会计算的css属性

calc() ---一个会计算的css属性相关推荐

最新文章

热门文章