CSS3中calc()函数用法与心得
1、打开Dreamweaver软件，新建一个空白HTML页面，页面代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>calc()函数测试</title>
<style type="text/css">
html,body,div{
margin:0;
padding:0;}
.left{
float:left;
width:200px;
height:100px;
background:#F63;}
.right{
float:left;
width: calc(100% - 200px);
height:100px;
background:#f1f2f4;}
</style>
</head>
<body>
<div class="left">200px宽度100px高度</div>
<div class="right">calc(100% - 100px)宽度100px高度</div>
</body>
</html>
在浏览器中运行结果如下：
2、上面是理想的情况，但是本人在使用中却发现，calc(100% - 200px)中的100%虽然可以按CSS3中定义说明的用100vw代替，但同样的代码却会出现如下图的情况，被挤下一行了！
注：100vw指100%的viewpoint width即浏览器可视区域宽度，同理100vh指100%的viewpoint height
3、经过本人仔细研究发现，使用100vw时好像谷歌浏览器的滚动条宽度没算进去，导致得出的结果超出了浏览器可视区域宽度，所以就被挤到第二行去了。
解决方法：
1.calc运算时多减去一点宽度（10px的滚动条宽度），但会导致右边空出一点空间，影响美观；
2.不要使用100vw，直接使用100%