css中cale()函数的使用

问题分析

html

<div class="wrap"><div class="box">测试</div>
</div>

css:

.wrap{width: 300px;height: 300px;border: 1px solid #000;margin: 10px auto;padding: 10px;background-color: #666;
}
.box{width: 100%;background-color: #f00;height: 100%;padding: 10px;border: 5px solid #0f0;margin: 20px;
}

当box元素的宽度为100%；该元素的padding,border,margin的值都会导致box超出wrap元素

解决办法1：box-sizing:border-box;

可以把border和padding包进去，但是没法把margin包进去

html:

<div class="wrap"><div class="box box-size">测试</div>
</div>

css:

.box-size{box-sizing: border-box;
}

解决办法2：利用calc()

calc是calculate计算的简写，是css3新增的功能，用来指定元素的长度，是一个函数，通过计算算出来的，经常用于流动布局

语法

.elm{width:-webkit-calc(ecpression)width:-moz-calc(ecpression)width:calc(ecpression)
}

html:

<div class="wrap"><div class="box box-calc">测试</div>
</div>

css:

width:90%;
width: -moz-calc(100% - (10px + 5px + 20px)*2);
width: -webkit-calc(100% - (10px + 5px + 20px)*2);
width: calc(100% - (10px + 5px + 20px)*2);

calc()的运算规则

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

浏览器的兼容性

浏览器对calc()的兼容性还算不错，在IE9+、FF4.0+、Chrome19+、Safari6+都得到较好支持，同样需要在其前面加上各浏览器厂商的识别符，
不过可惜的是，移动端的浏览器还没仅有“firefox for android 14.0”支持，其他的全军覆没。

以下是一个自适应布局示例

html

<div class="wrapper"><div id="header"><h1>CSS3 calc() Function</h1></div><div id="main"><h1>Far far away…</h1><p>Far far away, behind the word mountains…</p></div><div id="accessory"><ul><li><a href="#">Far far away…</a></li><li><a href="#">Separated they live…</a></li><li><a href="#">A small river named…</a></li></ul></div><div id="footer">Visit the article…</div></div>

css

body {background: #E8EADD;color: #3C323A;padding: 20px;
}
.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;
}
#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);
}
#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);
}
#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);
}
#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);
}

下面是一个三栏自适应个布局，开发中会经常出现，下面是一种实现方式

html

<div class="wrapper"><ul id="js_list"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li></ul>
</div>
<p>改变ul的transform: translateY(-0px);可以使内容上下滑动</p>

css

*{margin: 0;padding: 0;
}
.wrapper{width: 100%;height: 205px;margin: 20px auto;background-color: #eee;border: 1px solid #666;overflow: hidden;
}
ul{list-style: none;overflow: hidden;margin-bottom: -5px;transform: translateY(-0px);transition: all 0.6s ease-in-out;
}
ul li{float: left;background: #999;color: #333;height: 100px;text-align: center;font-size: 16px;line-height: 100px;width: calc((100% - 5px*2)/3);margin-right: 5px;margin-bottom: 5px;}
ul li:nth-child(3n+3){margin-right: 0;}
p{width: auto;height: 20px;
}

这是一个完整的例子，点击我的github