CSS3自动计算宽度calc()函数

定义与用法

calc() 函数用于动态计算长度值
需要注意的是,运算符前后都需要保留一个空格,例如:width: calc(100% - 10px);
任何长度值都可以使用calc()函数进行计算;
calc()函数支持 “+”, “-”, “*”, “/” 运算;
calc()函数使用标准的数学运算优先级规则;

语法

此 calc()函数用一个表达式作为它的参数,用这个表达式的结果作为值。这个表达式可以是任何如下操作符的组合,采用标准操作符处理法则的简单表达式。

width: calc(100% - 80px);

例子

固定一侧的宽度,另外一侧自适应宽度

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box
			{
    
    
				width: 100%;
				height: 60px;
				border: 1px solid black;
			}
			.box-left 
			{
    
    
			    float: left;
			    width: 280px;
			    height: 100%;
			    background-color: lightskyblue;
			}
			.box-right 
			{
    
    
			    float: right;
			    width: calc(100% - 280px);
			    height: 100%;
			    background-color: hotpink;
			}
		</style>
	</head>
	<body>
		  <div class="box">
		        <div class="box-left"></div>
		        <div class="box-right"></div>
		  </div>
	</body>
</html>

猜你喜欢

转载自blog.csdn.net/weixin_43983960/article/details/118488381