css3的calc()属性

语法:

calc() = calc(四则运算)

说明:

用于动态计算长度值。

需要注意的是,运算符前后都需要保留一个空格,例如:width:calc(100% - 10px);

任何长度值都可以使用calc()函数进行计算;

calc()函数支持+ - * / 运算

calc()函数使用标准的数学运算优先级规则

示例:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>css样式新标准</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			.col-3 {
				width: calc(100%/3 - 5px);/*means:总是比父容器的1/3小5px,所以5*3=15px*/
				float: left;
				margin-right: calc(5px*3 /2);/*7.5正好与上边计算结果符合*/
				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;
			}
		</style>
	</head>

	<body>
		<div class="container">
			<div class="col-3">1</div>
			<div class="col-3">2</div>
			<div class="col-3">3</div>
			<div class="col-3">4</div>

		</div>

	</body>

</html>

效果图:


猜你喜欢

转载自blog.csdn.net/zeroyulong/article/details/80005942