CSS3 calc()会计算属性详解
发布时间：2018-02-27 15:07:48 作者：不负好时光 
我要评论
我要评论这篇文章主要介绍了CSS3 calc()会计算属性详解的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
前言
正如其名，calc是css3中新增的计算属性，让很多属性增加了一个表达式的说法；
calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，你可以使用calc()给元素的border、margin、pading、font-size、width和height等属性设置动态值。
怎么使用
calc()可以使用数学运算中的简单加（+）、减（-）、乘（*）和除（/）来解决问题，而且还可以根据单位如px,em,rem和百分比来转化计算。
标准的写法：
.class{
/*
area: expression;
*/
width:calc();
padding:calc();
margin-top:calc();
...
}
兼容性
基本理论
- calc可以做用于任何具有大小的东东，比如border、margin、pading、font-size和width等属性设置动态值
- 支持的运算单位： rem , em , percentage , px
- 计算优先级别和数学一致
注意点:
calc 内部的表达式，在使用运算符号时，两遍必须加上空格（虽然乘除可以无视，但还是建议带上）！！！！！，不然会解析错误！！，看演示写法
width:calc(10 * 10px);
width:calc(50% - 50px);
width:calc(50% + 5em);
width:calc(10% / 1rem);
小demo
仅仅作为演示,响应伸缩
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3 Calc</title>
<style type="text/css" media="screen">
html{
font-size:62.5%;
}
.wrapper{
width:100%;
border:5px solid #f00;
margin:10px ;
box-sizing:border-box;
height:200px;
clear:b;
}
.items{
height:calc(100% - 40px);
display:inline-block;
border:1px solid #f70;
text-align:center;
}
.w1 .items{
float:left;
margin-top:calc( 5 * 4px );
border:3px solid #0F16C6;
width:calc(100% / 3 - 6px)
}
.w2 .items{
float:left;
margin-top:calc(200px - 20px * 9);
width:calc(100% / 3 - 2px)
}
.w3 .items{
float:left;
width:calc(100% / 3 - (3 * 6px));
margin:calc(2px * 4 );
}
.w3 .items:first-child{
padding:calc(5 * 1rem - 3rem);
box-sizing:border-box;
}
</style>
</head>
<body>
<div class="wrapper w1">
<div class="items">margin-top:calc( 5 * 4px );</div>
<div class="items">margin-top:calc( 5 * 4px );</div>
<div class="items">margin-top:calc( 5 * 4px );</div>
</div>
<div class="wrapper w2">
<div class="items">margin-top:calc(200px - 20px * 9);</div>
<div class="items">margin-top:calc(200px - 20px * 9);</div>
<div class="items">margin-top:calc(200px - 20px * 9);</div>
</div>
<div class="wrapper w3">
<div class="items">width:calc(100% / 3 - (3 * 6px));<br>margin:calc(2px * 4 );<br>padding:calc(5 * 1rem - 3rem);</div>
<div class="items";>width:calc(100% / 3 - (3 * 6px));<br>margin:calc(2px * 4 )</div>
<div class="items";>width:calc(100% / 3 - (3 * 6px));<br>margin:calc(2px * 4 )</div>
</div>
</body>
</html>
总结
calac 和flexbox搭配，用来写流式布局非常好；
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
calc()对大家来说，或许很陌生，不太会相信calc()是css中的部分。但它却是就是css3的一部分，下面这篇文章主要给大家介绍了关于css3中calc函数的相关资料，文中通过示例代2018-07-10
本篇文章主要介绍了巧用CSS3的calc()宽度计算做响应模式布局的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-22- 这篇文章主要介绍了详解CSS 3 的 calc() 方法,非常不错，具有参考借鉴价值，需要的朋友可以参考下2018-01-12
- 这篇文章主要介绍了浅谈css3中calc在less编译时被计算的解决办法的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-04
calc是css3的一个新功能，用来指定元素的长度，calc()最大的好处就是用在流体布局上，可以通过calc()计算得到元素的宽度。接下来脚本之家小编给大家分享CSS3 Calc实现滚动2017-09-14- 这篇文章主要介绍了 CSS3的calc()做响应模式布局的实现方法,需要的朋友可以参考下2017-09-06
CSS3 函数技巧 用css 实现js实现的事情(clac Counters Tooltip)
这篇文章主要介绍了如何使用CSS3代码更好实现js中效果，clac Counters Tooltip等功能使得代码更为简洁明了,需要的朋友可以参考下2017-08-15- 数学表达式calc()是CSS中的函数，主要用于数学运算。这篇文章给大家介绍了CSS中的数学表达式calc()的相关知识，感兴趣的朋友一起看看吧2020-01-19
最新评论