我们想要实现页面自适应布局时,通常因为margin的存在,而比较麻烦;有时候想要实现宽度自适应的输入框时,也因为padding或margin的存在,而相当繁琐,同时由于浏览器兼容性而导致最终效果不一致。css3新添加属性box-sizing,在一定程度上解决了上面的问题,而在今天的文章中我们来通过css3新增加的另外一个属性calc()来实现适应布局。
calc()是css3新添加属性,它可以让你使用一个算术表达式来表达长度值,这意味着可以用它来定义div的宽度,并设置margin、padding、border等。
calc()的运算规则:
1.使用”+”、”-”、”*”、”/”四则运算;
2.可以使用百分比、px、em、rem等单位;
3.可以混合使用各种单位进行计算。
用法
calc()语法非常简单,就像我们小时候学加 (+)、减(-)、乘(*)、除(/)一样,使用数学表达式来表示:
CSS Code复制内容到剪贴板
.haorooms{width:calc(expression);}这样padding和margin和百分比一起用,问题就可以解决了。
例如,我们margin是20px。那么我们就可以写成
CSS Code复制内容到剪贴板
.haorooms{width:calc(100%-20px);//注:减号前后要有空格,否则很可能不生效!!}也可以这么用:
CSS Code复制内容到剪贴板
.box{background:#f60;height:50px;padding:10px;border:5pxsolidgreen;width:90%;width:-moz-calc(100%-(10px+5px)*2);width:-webkit-calc(100%-(10px+5px)*2);width:calc(100%-(10px+5px)*2);}示例
实例1:定位在页面上的块元素,含有外边距
CSS Code复制内容到剪贴板
.banner{position:absolute;left:40px;width:-moz-calc(100%-80px);width:-webkit-calc(100%-80px);width:calc(100%-80px);border:solidblack1px;box-shadow:1px2px;background-color:yellow;padding:6px;text-align:center;}实例2:自动调整大小的表单,又适应容器
CSS Code复制内容到剪贴板
input{padding:2px;display:block;width:-moz-calc(100%-1em);width:-webkit-calc(100%-1em);width:calc(100%-1em);}#formbox{width:-moz-calc(100%/6);width:-webkit-calc(100%/6);width:calc(100%/6);border:1pxsolidblack;padding:4px;}XML/HTML Code复制内容到剪贴板
<form><divid="formbox"><label>Typesomething:</label><inputtype="text"></div></form>