css中cale()函数的使用

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

CSS3 calc() Function

Far far away…

Far far away, behind the word mountains…

• Far far away…


• Separated they live…


• A small river named…

Visit the article…

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

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

改变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% - 5px2)/3);
margin-right: 5px;
margin-bottom: 5px;

}
ul li:nth-child(3n+3){margin-right: 0;}
p{
width: auto;
height: 20px;
}

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