使用CSS3中的calc()属性来以算式表达尺寸数值


Posted in HTML / CSS onJune 06, 2016

我们想要实现页面自适应布局时,通常因为margin的存在,而比较麻烦;有时候想要实现宽度自适应的输入框时,也因为padding或margin的存在,而相当繁琐,同时由于浏览器兼容性而导致最终效果不一致。css3新添加属性box-sizing,在一定程度上解决了上面的问题,而在今天的文章中我们来通过css3新增加的另外一个属性calc()来实现适应布局。

calc()是css3新添加属性,它可以让你使用一个算术表达式来表达长度值,这意味着可以用它来定义div的宽度,并设置margin、padding、border等。
calc()的运算规则:
1.使用”+”、”-”、”*”、”/”四则运算;
2.可以使用百分比、px、em、rem等单位;
3.可以混合使用各种单位进行计算。

用法
calc()语法非常简单,就像我们小时候学加 (+)、减(-)、乘(*)、除(/)一样,使用数学表达式来表示:

CSS Code复制内容到剪贴板
  1. .haorooms {   
  2.   width: calc(expression);   
  3. }  

这样padding和margin和百分比一起用,问题就可以解决了。

例如,我们margin是20px。那么我们就可以写成

CSS Code复制内容到剪贴板
  1. .haorooms{   
  2.   width: calc(100% - 20px);  //注:减号前后要有空格,否则很可能不生效!!   
  3. }  

也可以这么用:

CSS Code复制内容到剪贴板
  1. .box {   
  2.     background#f60;   
  3.     height50px;   
  4.     padding10px;   
  5.     border5px solid green;   
  6.      width: 90%;/*写给不支持calc()的浏览器*/  
  7.     width:-moz-calc(100% - (10px + 5px) * 2);   
  8.     width:-webkit-calc(100% - (10px + 5px) * 2);   
  9.     width: calc(100% - (10px + 5px) * 2);   
  10. }  

示例
实例1:定位在页面上的块元素,含有外边距

CSS Code复制内容到剪贴板
  1. .banner {   
  2.   position:absolute;   
  3.   left40px;   
  4.   width: -moz-calc(100% - 80px);   
  5.   width: -webkit-calc(100% - 80px);   
  6.   width: calc(100% - 80px);   
  7.   bordersolid black 1px;   
  8.   box-shadow: 1px 2px;   
  9.   background-coloryellow;   
  10.   padding6px;   
  11.   text-aligncenter;   
  12. }  

实例2:自动调整大小的表单,又适应容器

CSS Code复制内容到剪贴板
  1. input {   
  2.   padding2px;   
  3.   displayblock;   
  4.   width: -moz-calc(100% - 1em);   
  5.   width: -webkit-calc(100% - 1em);   
  6.   width: calc(100% - 1em);   
  7. }     
  8.   
  9. #formbox {   
  10.   width: -moz-calc(100%/6);   
  11.   width: -webkit-calc(100%/6);   
  12.   width: calc(100%/6);   
  13.   border1px solid black;   
  14.   padding4px;   
  15. }  
XML/HTML Code复制内容到剪贴板
  1. <form>  
  2.   <div id="formbox">  
  3.   <label>Type something:</label>  
  4.   <input type="text">  
  5.   </div>  
  6. </form>  
HTML / CSS 相关文章推荐
CSS3实现跳动的动画效果
Sep 12 HTML / CSS
使用CSS3的rem属性制作响应式页面布局的要点解析
May 24 HTML / CSS
HTML5和CSS3让网页设计提升到下一个高度
Aug 14 HTML / CSS
css3隔行变换色实现示例
Feb 19 HTML / CSS
一款CSS3实现多功能下拉菜单(带分享按)的教程
Nov 05 HTML / CSS
使用CSS3的font-face字体嵌入样式的方法讲解
May 13 HTML / CSS
html5应用缓存_动力节点Java学院整理
Jul 13 HTML / CSS
详解移动端HTML5音频与视频问题及解决方案
Aug 22 HTML / CSS
Javascript 高级手势使用介绍
Apr 21 HTML / CSS
移动端解决悬浮层(悬浮header、footer)会遮挡住内容的3种方法
Mar 27 HTML / CSS
canvas中普通动效与粒子动效的实现代码示例
Jan 03 HTML / CSS
Canvas实现放大镜效果完整案例分析(附代码)
Nov 26 HTML / CSS
浅析css3中matrix函数的使用
Jun 06 #HTML / CSS
CSS3 animation实现逐帧动画效果
Jun 02 #HTML / CSS
利用CSS3的线性渐变linear-gradient制作边框的示例
Jun 02 #HTML / CSS
移动端Web页面的CSS3 flex布局快速上手指南
May 31 #HTML / CSS
CSS3条纹背景制作的实战攻略
May 31 #HTML / CSS
CSS3实现多重边框的方法总结
May 31 #HTML / CSS
结合CSS3的新特性来总结垂直居中的实现方法
May 30 #HTML / CSS
You might like
php线性表的入栈与出栈实例分析
2015/06/12 PHP
php使用MySQL保存session会话的方法
2015/06/18 PHP
微信公众平台开发之配置与请求
2015/08/26 PHP
PHP 7的一些引人注目的新特性简单介绍
2015/11/08 PHP
PHP MYSQL实现登陆和模糊查询两大功能
2016/02/05 PHP
php中foreach结合curl实现多线程的方法分析
2016/09/22 PHP
xmlHTTP实例
2006/10/24 Javascript
JavaScript实现的日期控件具体代码
2013/11/18 Javascript
一个js导致的jquery失效问题的解决方法
2013/11/27 Javascript
禁用页面部分JavaScript不是全部而是部分
2014/09/03 Javascript
javascript实现限制上传文件大小
2015/02/06 Javascript
JavaScript函数详解
2015/02/27 Javascript
js实现键盘Enter键提交表单的方法
2015/05/27 Javascript
JavaScript中的setUTCDate()方法使用详解
2015/06/11 Javascript
浅谈javascript中遇到的字符串对象处理
2016/11/18 Javascript
javascript数组元素删除方法delete和splice解析
2019/12/09 Javascript
JQuery中DOM节点的操作与访问方法实例分析
2019/12/23 jQuery
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
2020/09/02 Javascript
[41:54]2018DOTA2亚洲邀请赛 4.1 小组赛A组加赛 TNC vs Liquid
2018/04/03 DOTA
Python用zip函数同时遍历多个迭代器示例详解
2016/11/14 Python
Windows下安装python MySQLdb遇到的问题及解决方法
2017/03/16 Python
PyCharm安装Markdown插件的两种方法
2019/06/24 Python
python命令行参数用法实例分析
2019/06/25 Python
python不到50行代码完成了多张excel合并的实现示例
2020/05/28 Python
Python 下载Bing壁纸的示例
2020/09/29 Python
分布式全文检索引擎ElasticSearch原理及使用实例
2020/11/14 Python
最新pycharm安装教程
2020/11/18 Python
党校自我鉴定范文
2013/10/02 职场文书
毕业生自荐信
2013/12/14 职场文书
五一家具促销方案
2014/01/10 职场文书
公司中秋节活动方案
2014/02/12 职场文书
2014年大学庆元旦迎新年活动方案
2014/03/09 职场文书
2014年圣诞节促销方案
2014/03/14 职场文书
开业庆典主持词
2014/03/21 职场文书
《少年王勃》教学反思
2014/04/27 职场文书
《水上飞机》教学反思
2016/02/20 职场文书