css如何计算长度值;cacl()的使用
1、新建一个html页面，在这个代码页面创建一个<div>标签，然后给这个<div>设置一个class类。如图：
2、为了让效果更佳清晰明了，在案例中设置这个cacl类的高度、背景颜色，以及最重要的宽度。如图：
css样式代码：
<style>
body{margin: 0;}
.cacl{
height: 300px;
background: red;
width: calc(100% - 100px);
}
</style>
3、保存html文件后使用浏览器打开即可看到效果，会发现右边div的宽度小了100px。如图
4、所有代码。可以直接复制所有代码到html文件，粘贴保存后运行即可看到效果
所有代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动态计算长度值</title>
<style>
body{margin: 0;}
.cacl{
height: 300px;
background: red;
width: calc(100% - 100px);
}
</style>
</head>
<body>
<div class="cacl">设置div的宽为100%-100px大小</div>
</body>
</html>
阅读量：168
阅读量：84
阅读量：123
阅读量：159
阅读量：159