本文，学习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...