使用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 16 HTML / CSS
CSS3 background-image颜色渐变的实现代码
Sep 13 HTML / CSS
CSS3 选择器 伪类选择器介绍
Jan 21 HTML / CSS
纯css3实现的动画按钮的实例教程
Nov 17 HTML / CSS
使用CSS3的appearance属性改变元素的外观的方法
Dec 12 HTML / CSS
html5实现多文件的上传示例代码
Feb 13 HTML / CSS
探讨HTML5移动开发的几大特性(必看)
Dec 30 HTML / CSS
Html5元素及基本语法详解
Aug 02 HTML / CSS
解决html5中video标签无法播放mp4问题的办法
May 07 HTML / CSS
高清屏中使用Canvas绘图出现模糊的问题及解决方法
Jun 03 HTML / CSS
HTML5超炫酷粒子效果的进度条的实现示例
Aug 23 HTML / CSS
h5移动端调用支付宝、微信支付的实现
Jun 08 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
异世界新番又来了,同样是从零开始,男主的年龄降到5岁
2020/04/09 日漫
php读取msn上的用户信息类
2008/12/05 PHP
小型js框架veryide.librar源代码
2009/03/05 Javascript
JavaScript 事件查询综合
2009/07/13 Javascript
javascript自执行函数之伪命名空间封装法
2010/12/25 Javascript
Jquery 绑定时间实现代码
2011/05/03 Javascript
中文字符串截取的js函数代码
2013/04/17 Javascript
AngularJS入门教程之AngularJS 模板
2016/08/18 Javascript
Angular中ng-options下拉数据默认值的设定方法
2017/06/21 Javascript
Bootstrap实现下拉菜单多级联动
2017/11/23 Javascript
利用ES6实现单例模式及其应用详解
2017/12/09 Javascript
vue2.0 路由模式mode=&quot;history&quot;的作用
2018/10/18 Javascript
js中的this的指向问题详解
2019/08/29 Javascript
js神秘的电报密码 哈弗曼编码实现
2019/09/10 Javascript
JS遍历树层级关系实现原理解析
2020/08/31 Javascript
python client使用http post 到server端的代码
2013/02/10 Python
Python实现批量下载文件
2015/05/17 Python
Python3实现的反转单链表算法示例
2019/03/08 Python
python之pexpect实现自动交互的例子
2019/07/25 Python
浅谈keras中的Merge层(实现层的相加、相减、相乘实例)
2020/05/23 Python
Django数据模型中on_delete使用详解
2020/11/30 Python
python脚本定时发送邮件
2020/12/22 Python
CSS3轻松实现清新 Loading 效果的简单实例
2016/06/06 HTML / CSS
Canvas制作的下雨动画的示例
2018/03/06 HTML / CSS
HTML5 weui使用笔记
2019/11/21 HTML / CSS
Canvas 文本填充线性渐变的使用详解
2020/06/22 HTML / CSS
女士时装鞋:Chinese Laundry
2018/08/29 全球购物
公务员培训心得体会
2013/12/28 职场文书
前台文员个人求职信范文
2014/01/05 职场文书
《母亲的恩情》教学反思
2014/02/13 职场文书
师德演讲稿范文
2014/05/06 职场文书
青年教师师德演讲稿
2014/08/26 职场文书
三好学生先进事迹材料
2014/08/28 职场文书
副校长竞聘演讲稿
2014/09/01 职场文书
合伙经营协议书范本
2014/09/13 职场文书
python随机打印成绩排名表
2021/06/23 Python