calc()函数功能实现上面的效果来得更简单

Calc（）可能对每个人都不熟悉，很难相信calc（）是CSS的一部分。因为它看起来像一个函数，所以如果它是一个函数，为什么它会出现在CSS中？这也让我感到困惑。今天，一位同事告诉我，CSS3中有一个属性可以实现自适应布局。让我想到的第一件事是框大小调整，但是可以计算出来。我必须考虑calc（）。因为我在较早的官方网站和一些博客上看到过相关的介绍，但是我没有深入，也没有自己测试过。今天我花了一个下午彻底学习calc（）。所以我有这个博客，希望对大家有帮助。

通常在制作页面时，某些元素总是100％宽。众所周知，如果元素宽度为100％，则无需其他框模型属性设置也可以。如果还有其他物品，将导致盒子破裂。例如，如果有边框，或者有边距和填充，这些将使您的装箱中断。换句话说，如果您的元素宽度为100％，则只要您向元素添加border，padding，margin的任何值，元素框就会被破坏（在标准模式下，IE怪异模式除外）。这将很麻烦。当我们遇到这种现象时，我们通常会非常谨慎，有时甚至无法解决，只能通过更改结构来实现。即使您通过繁琐的方法来实现它，由于浏览器的兼容性，最终效果也是不一致的。尽管上面介绍的CSS3属性中的框大小在一定程度上解决了这个问题，但实际上，今天的calc（）函数功能更容易实现上述效果。

什么是calc（）？

在学习calc（）之前，有必要让我们知道calc（）是什么？只知道他是什么？在实际应用中更好地利用他。

Calc（）从字面上我们可以将其理解为函数。实际上，calc是英文单词calc的缩写，它是css3的新功能，用于指定元素的长度。例如，您可以使用calc（）为元素的border，margin，padding，font-size和width属性设置动态值。为什么是动态值？因为我们使用表达式来获取值。但是calc（）的最大优点是它用于流体布局，并且元素的宽度可以通过calc（）来计算。

calc（）可以做什么？

calc（）允许您对元素进行计算。您可以使用百分比，em，px和rem单位值来计算div元素的宽度或高度。例如，“ width：calc（50％+ 2em））”，因此您不必考虑元素DIV的宽度，而将这个烦人的任务留给浏览器进行计算。

calc（）语法

calc（）的语法非常简单，就像我们年轻时学会加（+），减（-），乘（*）和除（/）一样，我们使用数学表达式来表达：

.elm {
  width: calc(expression);
}

其中“ expression”是一个表达式，用于计算长度。

calc（）的计算规则

calc（）使用一般的数学规则，但也提供了更智能的功能：

使用四个算术运算符“ +”，“-”，“ *”和“ /”；可以使用百分比，px，em，rem等单位；可以混合使用各种单位进行计算；表达式中有一个“ +”，“-”和“-”前后必须有空格。例如，“ widht：calc（12％+ 5em）”是一种不带空格的错误书写方式；当表达式中有“ *”和“ /”时，前后不能有空格，但建议使用空格。浏览器兼容性

浏览器与calc（）的兼容性非常好。在IE9 +，FF 4. 0 +，Chrome19 +和Safari6 +中得到很好的支持。它还需要在其前面添加每个浏览器制造商的标识符。但是，遗憾的是，“ firefox for android 1 4. 0”不仅支持移动浏览器，而且其余的浏览器已被完全清除。

实际使用时，还需要添加浏览器前缀

 .elm {
	/*Firefox*/
	-moz-calc(expression);
	/*chrome safari*/
	-webkit-calc(expression);
	/*Standard */
	calc();
 }

通过以上了解，您对calc（）并不陌生，但是您可能对实际应用程序并不了解。然后每个人都会从我开始，并通过示例认识他。首先，让我们看一个最常用的例子：

<div class="demo">
	 <div class="box">div>
div>	

上面的结构非常简单，即div.demo元素包含div.box元素。接下来，我们将逐步查看更改。

第一步：添加通用样式：

.demo {
	width: 300px;
	background: #60f;
}
.box {
  width: 100%;
	background: #f60;
	height: 50px;
}

此时的效果非常简单，即div.box完全覆盖了div.demo，如下所示：

第二步是在div.box中添加边框和填充

此步骤非常棘手。在div.box上同时添加10px的内部填充和5px的边框：

.demo {
	width: 300px;
	background: #60f;
}
.box {
  width: 100%;
  background: #f60;
  height: 50px;
  padding: 10px;
  border: 5px solid green;
}

为了更好地说明问题，我在div.demo中添加了填充：3px 0;

.demo {
	width: 300px;
	background: #60f;
padding: 3px 0;	
}
.box {
  width: 100%;
  background: #f60;
  height: 50px;
  padding: 10px;
  border: 5px solid green;
}

这时，您不知道是否可以想到问题会发生在哪里？实际上，这很简单。此时，div.box的宽度大于其容器div.demo的总宽度，以便将容器拉出，如图所示：

第三步，使用calc（）

为了解决打破容器的问题，我们只能通过从容器宽度中减去padding和border值来计算div.box的宽度，但有时我们不知道容器的总宽度例如，自适应布局只知道一个百分比值，但其他值是像px这样的值。这是困难，并且被卡住了。随着CSS3的出现，使用box-sizing来更改元素的box模型类型确实很有效，但是我们今天学习的calc（）方法更加方便。

知道总宽度为100％，在此基础上减去boder的宽度（5px * 2 = 10px），然后减去填充的宽度（10px * 2 = 20px），即“ 100％- （10px + 5px））* 2 = 30px“，最终值为div.box的宽度值：

.demo {
	width: 300px;
	background: #60f;
	padding: 3px 0;
}
.box {
	background: #f60;
	height: 50px;
	padding: 10px;
	border: 5px solid green;
width: 90%;/*写给不支持calc()的浏览器*/
	width:-moz-calc(100% - (10px + 5px) * 2);
	width:-webkit-calc(100% - (10px + 5px) * 2);
	width: calc(100% - (10px + 5px) * 2);
}

这样，通过calc（）计算后，div.box将不再超过其容器div.demo的宽度，如图所示：

上面的演示是一个非常简单且常见的布局效果。在此布局中，我使用了自适应布局。整个布局包括“头”，“主要内容”，“侧边栏”和“脚”，“主要内容”在左侧，“侧边栏”在右侧。有关具体结构，请参见DEMO的html部分。

接下来，我们主要看一下css部分：

1、在正文中设置内部页边距并附加一些基本样式。您可以根据需要设置不同的设置。此示例的代码如下：

body {
    background: #E8EADD;
    color: #3C323A;
    padding: 20px; 
}

2、设置主容器“包装器”的样式

主容器的宽度为“ 100％-20px * 2”，并且水平居中：

	.wrapper {
    width: 1024px; /* Fallback for browsers that don't support the calc() function */
    width: -moz-calc(100% - 40px);
    width: -webkit-calc(100% - 40px);
    width: calc(100% - 40px);
    margin: auto; 
}

为不支持calc（）的浏览器设置了固定宽度值“ 1024px”。

3、设置页眉和页脚的样式

此示例中的页眉和页脚非常简单，为它们添加了20px的内部边距，其他页眉和页脚是一些基本样式设置，因此相应的宽度应为“ 100％-20px * 2”：

#header {
    background: #f60;
    padding: 20px;
    width: 984px;/*Fallback for browsers that don't support the calc() function*/
    width: -moz-calc(100% - 40px);
    width: -webkit-calc(100% - 40px);
    width: calc(100% - 40px);
}
#footer {
    clear:both;
    background: #000;
    padding: 20px;
    color: #fff;
    width: 984px;/* Fallback for browsers that don't support the calc() function */
    width: -moz-calc(100% - 40px);
    width: -webkit-calc(100% - 40px);
    width: calc(100% - 40px);
}

4、设置主要内容的样式

为主要内容设置8px边框，内部空白为20px，并向左浮动，并在右侧外部空白为“ 20” px。关键是我们的主要内容占容器宽度的75％。 ，这样，主要内容的宽度应为“ 75％-8px * 2-20px * 2”：

#main {
    border: 8px solid #B8C172;
    float: left;
    margin-bottom: 20px;
    margin-right: 20px;
    padding: 20px;
    width: 704px; /* Fallback for browsers that don't support the calc() function */
    width: -moz-calc(75% - 20px * 2 - 8px * 2);
    width: -webkit-calc(75% - 20px * 2 - 8px * 2);
    width: calc(75% - 20px * 2 - 8px * 2); 
}

4、设置右列的样式

侧边栏设置为25％的宽度。除了8px的边框和10px的内部空白外，还应删除主要内容20px的外部空白，否则整个宽度和容器将相差20px，换句话说，将使容器破裂并掉落。因此，侧边栏的实际宽度应为“ 25％-10px * 2-8px * 2 -20px”：

#accessory {
    border: 8px solid #B8C172;
    float: right;
    padding: 10px;
    width: 208px; /* Fallback for browsers that don't support the calc() function */
    width: -moz-calc(25% - 10px * 2 - 8px * 2 - 20px);
    width: -webkit-calc(25% - 10px * 2 - 8px * 2 - 20px);
    width: calc(25% - 10px * 2 - 8px * 2 - 20px);
}

这样，每个人都可以看到上面演示中显示的布局效果。研究完此示例后，您认为使用calc（）进行自适应布局超酷吗？这时候，许多学生肯定会感觉到，苦苦挣扎的IE6-8不支持也不敢使用它。

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/shumachanpin/article-357753-1.html