css中cale()函数的使⽤

问题分析

html

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:

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:

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

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

改变ul的transform: translateY(-0px);可以使内容上下滑动

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;}

这是⼀个完整的例⼦，点击