共计 2035 个字符，预计需要花费 6 分钟才能阅读完成。
本文，学习 CSS 数学函数。
CSS 的数学函数容许将数学表达式作为属性值应用。calc() 就是一个十分有用的数学函数。
calc() 函数执行一个计算，作为属性值应用。小括号里编写数学表达式，能够应用 + – * / 运算符。举个例子：
创立 math-functions.html 文件和 math-functions-style.css 文件。在 html 里构建根底代码，引入内部款式。
在 body 里增加 div 元素，定义类属性 class=”box”。
HTML
<body>
<div class="box"></div>
</body>
在 css 文件里，定义根本款式：定义通用选择器，申明款式：box-sizing: border-box，margin: 0，padding: 0。定义群组选择器，申明款式：html, body，height: 100%。
定义类选择器 .box，申明款式 width: 100%，height: 50px，border: 1px solid black，background-color: yellow。
CSS
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body {height: 100%;}
CSS
.box {
width: 100%;
height: 50px;
border: 1px solid black;
background-color: yellow;
}
在浏览器里查看成果，一个高为 50px，黄色背景，彩色边框的容器，横向撑满了整个屏幕。
当初有个需要：给容器两端留出 50px 的空隙，且容器宽度自适应。
此时 calc 函数就派上用场了。给 box 增加款式 width: calc(100% – 100px)，意思是使元素在 100% 宽度的根底上缩小 100px。
成果是这样的。
而后再给 box 增加款式 position: absolute，left: 50px，使他向右再挪动 50px。
咱们看，容器两端各留出了 50px 的距离。当缩放窗口时，容器依然能够自适应。成果实现了。
接下来咱们利用 calc 函数实现两列布局。calc 实现两列布局的基本思路是：左右两侧设置款式 display: inline-block，让它们左右排列。左侧设置固定宽度，右侧通过 calc 函数计算宽度。咱们来实现一下。
创立 calc-double-column.html 文件和 calc-double-column-style.css 文件。
在 html 文件里构建根底代码，在 body 里增加元素 div，定义款式类 class=”container”。在 div 里增加一个子元素，定义类属性 class=”left”，填入文本“左”；再增加一个子元素，定义类属性 class=”right”，填入文本“右”。
HTML
<div class="container">
<div class="left"> 左 </div>
<div class="right"> 右 </div>
</div>
在 css 文件里构建根底代码。
CSS
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body {height: 100%;}
定义选择器 .container，申明款式 width: 100%，height: 500px，min-width: 800px，border: 10px solid tomato。
在浏览器里预览成果，容器横向铺满屏幕，当窗口宽度小于 800px 时，容器不再放大。
回到款式，定义选择器 .left，申明款式：display: inline-block，width: 200px，height: 100%，background-color:gold。
定义选择器 .right，申明款式：display: inline-block，width: calc(100% – 200px)，height: 100%，background-color: aliceblue。
CSS
.left {
display: inline-block;
width: 200px;
height: 100%;
background-color:gold;
}
.right {
display: inline-block;
width: calc(100% - 200px);
height: 100%;
background-color:aliceblue;
}
回到浏览器，看看成果。诶，页面布局错乱了！
你能想到是什么起因吗？
对了，起因就是，两个领有 display: inline-block 款式的元素两头会有空隙，所以右面元素折行显示了。
产生这个空隙的起因是容器里的两个子元素两头有换行，去掉这个换行。
CSS
<div class="container">
<div class="left"> 左 </div><div class="right"> 右 </div>
</div>
再来看看，左侧宽度固定，右侧自适应的两列布局就做好了。
本篇文章配套教程链接：https://www.bilibili.com/vide…
