1、在body中设置一个内距，并附上一些基本的样式，大家可以根据自己需要进行不同的设置，此例代码如下：

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

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

【资料图】

主容器的宽度是“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、给header和footer设置样式

这个例子中的header和footer很简单，给他们添加了一个内距为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()用于自适应布局是超爽的呀。