使用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模块的目前的状况分析
Feb 24 HTML / CSS
用纯css3和html制作泡沫对话框实现代码
Mar 21 HTML / CSS
详解CSS3中nth-child与nth-of-type的区别
Jan 05 HTML / CSS
使用CSS3实现input多选框自定义样式的方法示例
Jul 19 HTML / CSS
浅析CSS3 中的 transition,transform,translate之间区别和作用
Mar 26 HTML / CSS
教你如何一步一步用Canvas写一个贪吃蛇
Oct 22 HTML / CSS
HTML5 audio标签使用js进行播放控制实例
Apr 24 HTML / CSS
详解前端HTML5几种存储方式的总结
Dec 27 HTML / CSS
浅谈HTML5 Web Worker的使用
Jan 05 HTML / CSS
html5 input输入实时检测以及延时优化
Jul 18 HTML / CSS
html5 video全屏播放/自动播放的实现示例
Aug 06 HTML / CSS
使用HTML5做的导航条详细步骤
Oct 19 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
example1.php
2006/10/09 PHP
php 全文搜索和替换的实现代码
2008/07/29 PHP
解析linux下安装memcacheq(mcq)全过程笔记
2013/06/27 PHP
PHP结合JQueryJcrop实现图片裁切实例详解
2014/07/24 PHP
php实现兼容2038年后Unix时间戳转换函数
2015/03/18 PHP
Symfony2框架学习笔记之表单用法详解
2016/03/18 PHP
PHP简单实现无限级分类的方法
2016/05/13 PHP
php生成无限栏目树
2017/03/16 PHP
Laravel框架用户登陆身份验证实现方法详解
2017/09/14 PHP
PHP使用mongoclient简单操作mongodb数据库示例
2019/02/08 PHP
javascript 播放器 控制
2007/01/22 Javascript
jQuery实现表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的代码
2010/03/21 Javascript
javascript中的数字与字符串相加实例分析
2011/08/14 Javascript
Webkit的跨域安全问题说明
2011/09/13 Javascript
js 获取class的元素的方法 以及创建方法getElementsByClassName
2013/03/11 Javascript
JS操作iframe里的dom(实例讲解)
2014/01/29 Javascript
nodejs获取本机内网和外网ip地址的实现代码
2014/06/01 NodeJs
Node.js实现简单聊天服务器
2014/06/20 Javascript
jQuery文字横向滚动效果的实现代码
2016/05/31 Javascript
微信小程序 chooseImage选择图片或者拍照
2017/04/07 Javascript
node文件批量重命名的方法示例
2017/10/23 Javascript
AngularJS实时获取并显示密码的方法
2018/02/06 Javascript
深入理解Puppeteer的入门教程和实践
2019/03/05 Javascript
vue.js实现数据库的JSON数据输出渲染到html页面功能示例
2019/08/03 Javascript
vue实现动态表格提交参数动态生成控件的操作
2020/11/09 Javascript
解决vue项目中出现Invalid Host header的问题
2020/11/17 Javascript
[10:34]DOTA2上海特级锦标赛全纪录
2016/03/25 DOTA
python人人网登录应用实例
2014/09/26 Python
Python爬虫的两套解析方法和四种爬虫实现过程
2018/07/20 Python
python设置环境变量的原因和方法
2019/06/24 Python
Python帮你识破双11的套路
2019/11/11 Python
HTML5 canvas基本绘图之填充样式实现
2016/06/27 HTML / CSS
童装店创业计划书
2014/01/09 职场文书
住宅质量保证书
2014/04/29 职场文书
法定代表人授权委托书范文
2014/09/22 职场文书
2015年重阳节主持词
2015/07/04 职场文书