使用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代码实现switch滑动开关按钮效果
Aug 30 HTML / CSS
简单掌握CSS3将文字描边及填充文字颜色的方法
Mar 07 HTML / CSS
使用CSS3编写类似iOS中的复选框及带开关的按钮
Apr 11 HTML / CSS
5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
Aug 15 HTML / CSS
CSS3实现伪类hover离开时平滑过渡效果示例
Aug 10 HTML / CSS
详解css3 Transition属性(平滑过渡菜单栏案例)
Sep 05 HTML / CSS
HTML5 form标签之解放表单验证、增加文件上传、集成拖放的使用方法
Apr 24 HTML / CSS
HTML5调用手机摄像头拍照的实现思路及代码
Jun 15 HTML / CSS
HTML5标签使用方法详解
Nov 27 HTML / CSS
Html5实现用户注册自动校验功能实例代码
May 24 HTML / CSS
移动端开发HTML5页面点击按钮后出现闪烁或黑色背景的解决办法
Sep 19 HTML / CSS
CSS实现九宫格布局(自适应)的示例代码
Feb 12 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 用数组降低程序的时间复杂度
2009/12/04 PHP
解析WordPress中控制用户登陆和判断用户登陆的PHP函数
2016/03/01 PHP
BOOM vs RR BO5 第四场 2.14
2021/03/10 DOTA
打开超链需要“确认”对话框的方法
2007/03/08 Javascript
javascript笔试题目附答案@20081025_jb51.net
2008/10/26 Javascript
基于jQuery的消息提示插件之旅 DivAlert(三)
2010/04/01 Javascript
js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
2016/01/27 Javascript
基于Jquery和html5实现炫酷的3D焦点图动画
2016/03/02 Javascript
基于JavaScript实现窗口拖动效果
2017/01/18 Javascript
基于jQuery实现咖啡订单管理简单应用
2017/02/10 Javascript
微信小程序 动态传参实例详解
2017/04/27 Javascript
jQuery选择器之层次选择器用法实例分析
2019/02/19 jQuery
详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)
2019/04/30 Javascript
JS数组方法shift()、unshift()用法实例分析
2020/01/18 Javascript
javascript中正则表达式语法详解
2020/08/07 Javascript
python操作 hbase 数据的方法
2016/12/18 Python
Python进程间通信Queue实例解析
2018/01/25 Python
详解Python 数据库的Connection、Cursor两大对象
2018/06/25 Python
pycharm访问mysql数据库的方法步骤
2019/06/18 Python
python opencv minAreaRect 生成最小外接矩形的方法
2019/07/01 Python
python实点云分割k-means(sklearn)详解
2020/05/28 Python
python3.4中清屏的处理方法
2020/07/06 Python
python爬虫看看虎牙女主播中谁最“顶”步骤详解
2020/12/01 Python
CSS3 Flexbox中flex-shrink属性的用法示例介绍
2013/12/30 HTML / CSS
CSS3实现的炫酷菜单代码分享
2015/03/12 HTML / CSS
体育纪念品、亲笔签名的体育收藏品:Steiner Sports
2020/07/31 全球购物
SQL Server面试题
2016/10/17 面试题
房屋改造计划书
2014/01/10 职场文书
事业单位接收函
2014/01/10 职场文书
新年主持词
2014/03/27 职场文书
学校欢迎标语
2014/06/18 职场文书
工伤事故赔偿协议书
2014/10/27 职场文书
2015中学教师个人工作总结
2015/07/22 职场文书
JavaScript实现复选框全选功能
2021/04/11 Javascript
Apache Pulsar集群搭建部署详细过程
2022/02/12 Servers
MongoDB支持的索引类型
2022/04/11 MongoDB