零基础教你学前端——86、CSS数学函数calc

本文，学习CSS数学函数。
CSS的数学函数允许将数学表达式作为属性值使用。calc()就是一个非常有用的数学函数。
calc() 函数执行一个计算，作为属性值使用。小括号里编写数学表达式，可以使用 + - * /运算符。举个例子：

创建 math-functions.html 文件和 math-functions-style.css 文件。在 html 里构建基础代码，引入外部样式。
在 body 里添加 div 元素，定义类属性 class="box"。

HTML

  

在 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

    
左
    
右

在 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

    
左
右
  

再来看看，左侧宽度固定，右侧自适应的两列布局就做好了。

本篇文章配套教程链接：https://www.bilibili.com/vide...