CSS3 calc() 会计算的样式

在这里看到的
https://codepen.io/pen/?&editable=true
就查了下
刚见识到的,转过来存一下,应该用勤了挺好的

calc()是英文单词calculate(计算)的缩写,是css3的一个新增的功能,你可以使用calc()计算border、margin、pading、font-size和width等属性设置动态值。

以前我们可以使用box-sizing:border-box;来设置盒子的属性为不加上边距。现在我们又多了一个选择了。但要注意,两者只能使用一个哦,否则就会造成冲突了。

怎么使用
calc()可以使用数学运算中的简单加(+)、减(-)、乘(*)和除(/)来解决问题,而且还可以根据单位如px,em,rem和百分比来转化计算。

比如三局平均分布的布局,中间间距为5像素。

CSS3 calc() 会计算的样式_第1张图片

*{margin: 0; padding: 0;}
.col-3{
	width: calc(100%/3 - 5px); 
	float: left;
	margin-right: calc(5px*3 /2);
	background: #eee; 
	color: #333; 
	height: 100px; 
	text-align: center; 
	margin-bottom: calc(5px*3 /2); 
	font-size: 18px; 
	line-height: 100px;}
.col-3:nth-child(3){margin-right: 0;}

演示地址http://caibaojian.com/demo/2014/12/calc.html
CSS3 calc() 会计算的样式_第2张图片

著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
链接:http://caibaojian.com/calc.html
来源:http://caibaojian.com

你可能感兴趣的:(css,frontend笔记,笔记)