我们想要实现页面自适应布局时，通常因为m arg in的存在，而比较麻烦；有时候想要实现 宽 度自适应的输入框时，也因为padding或mar gin 的存在，而相当繁琐，同时由于浏览器兼容性而导致最终效果不一致。css3新添加属性box -s izing，在一定程度上解决了上面的问题，而在今天的 文章 中我们来通过css3新增加的另外一个属性calc()来实现适应布局。
calc()是css3新添加属性，它可以让你使用一个算 术 表达式来表达长度值，这意味着可以用它来定义div的宽度，并设置margin、padding、border等。
calc()的 运算 规则：
1.使用]+]、]-]、]*]、]/]四则运算；
2.可以使用百分比、px、em、rem等单位；
3.可以混合使用各种单位进行计算。
用法
calc()语法非常 简单 ，就像我们小时候学加 （+）、减（-）、乘（*）、除（/）一样，使用数学表达式来表示：
CSS Code 复制内容到剪贴板
.haorooms&nbs p; { width : calc(ex Press ion); }
这样padding和margin和百分比一起用，问题就可以解决了。
例如，我们margin是20px。那么我们就可以写成
CSS Code 复制内容到剪贴板
.haorooms{ width : calc(100% - 20px ); //注：减号前后要有空格，否则很可能不 生效 ！！ }
也可以这么用：
CSS Code 复制内容到剪贴板
.box { background : # f60 ; h ei ght : 50px ; padding : 10px ; border : 5px solid green ; width : 90%; /*写给不支持calc()的浏览器*/ width :-moz-calc(100% - ( 10px + 5px ) * 2); width :- webkit -calc(100% - ( 10px + 5px ) * 2); width : calc(100% - ( 10px + 5px ) * 2); }
示例
实例1：定位在页面上的块元素，含有 外边距
CSS Code 复制内容到剪贴板
.banner { pos IT ion : absolute ; left : 40px ; width : -moz-calc(100% - 80px ); width : -webkit-calc(100% - 80px ); width : calc(100% - 80px ); border : solid black 1px ; box-shadow: 1px 2px ; background-color : yellow ; padding : 6px ; text-align : center ; }
实例2：自动 调整 大小的表单，又适应容器
CSS Code 复制内容到剪贴板
input { padding : 2px ; dis play : block ; width : -moz-calc(100% - 1em); width : -webkit-calc(100% - 1em); width : calc(100% - 1em); } #formbo x { width : -moz-calc(100%/6); width : -webkit-calc(100%/6); width : calc(100%/6); border : 1px solid black ; padding : 4px ; }
XM L/HT ML Code 复制内容到剪贴板
< form > < div id = "formbox" > < label > Ty PE something: </ label > < input type = "text" > </ div > </ form >
总结
以上是 为你收集整理的 使用CSS3中的calc()属性来以算式表达尺寸数值 全部内容，希望文章能够帮你解决 使用CSS3中的calc()属性来以算式表达尺寸数值 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于使用CSS3中的calc()属性来以算式表达尺寸数值的详细内容...