css中cale()函数的使用
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
