CSS之calc()使用

1.什么是calc()

calc()从字面我们可以把他理解为一个函数function。其实calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元素的长度

2.calc()能做什么？

calc()能让你给元素的值做计算，你可以给一个div元素结合百分比、em、px和rem单位值计算出其宽度或者高度，比如说“width:calc(50% + 2em)”，这样一来你就不用考虑元素DIV的宽度值到底是多少，而把这个烦人的任务交由浏览器去计算

3.calc()语法

calc()语法非常简单，就像我们小时候学加 （+）、减（-）、乘（*）、除（/）一样，使用数学表达式来表示

4.calc()的运算规则

• 使用“+”、“-”、“*” 和 “/”四则运算
• 可以使用百分比、px、em、rem等单位
• 可以混合使用各种单位进行计算
• 表达式中有“+”和“-”时，其前后必须要有空格，如”widht: calc(12%+5em)”这种没有空格的写法是错误的
• 表达式中有“*”和“/”时，其前后可以没有空格，但建议留有空格

5.实例：我们一起来看一个自适应布局的例子

在这个布局中，我采用了自适应布局。整个布局包含了“头部”、“主内容”、“边栏”和“脚部”，并且“主内容”居左，“边栏”靠右

1.在body中设置一个内距，并附上一些基本的样式，大家可以根据自己需要进行不同的设置

2.设置主容器“wrapper”的样式

主容器的宽度是“100% - 20px * 2”,并且水平居中，给不支持calc()的浏览器设置了一个固定宽度值“1024px”

3.给header和footer设置样式

这个例子中的header和footer很简单，给他们添加了一个内距为20px，其他就是一些基本的样式设置，那么其对应的宽度应该是”100% - 20px * 2”

4.给主内容设置样式

给主内容设置了一个8px的边框，20px的内距，并且向左浮动，同时设置了一个向右的外边距“20”px，关键之处，我们主内容占容器宽度的75%，这样一来，主内容的宽度应该是“75% - 8px * 2 - 20px * 2”

5.设置右边栏样式

给边栏设置了一个25%的宽度，其除了包含8px的边框，10px的内距外，还有主内容外距20px也要去掉，不然整个宽度与容器会相差20px,换句话说就会撑破容器掉下来。因此边栏的实际宽度应该是”25% - 10px * 2 - 8px * 2 -20px”