calc使用
用于动态计算长度值。
需要注意的是, +、- 运算符前后都需要保留一个空格, 例如：width: calc(100% - 10px)；
任何长度值都可以使用calc()函数进行计算；
calc()函数支持 "+", "-", "*", "/" 运算；
calc()函数使用标准的数学运算优先级规则；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
div{
width: calc(20%*3 - 10px*2);
height: 200px;
border: 10px solid green;
background-color: red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>固比固格局(双飞翼布局或圣杯布局)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
ul{
min-width: 500px;
height: 200px;
}
li{
float: left;
}
li:nth-child(1){
width: 200px;
height: 200px;
background-color: red;
}
li:nth-child(2){
width: calc(100% - 500px);
height: 200px;
background-color: green;
}
li:nth-child(3){
width: 300px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<ul>
<li>11111</li>
<li>22222</li>
<li>33333</li>
</ul>
</body>
</html>