我们想要实现页面自适应布局时，通常因为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> 
最新文章
热门文章
猜你喜欢
