Css3新属性:calc()
一、前言
calc()看起来像是javascript中的一个函数,而事实上它是用在Css中的,可以用它来计算长度(宽度或高度),能够自动根据不同尺寸的屏幕自动调接数值,从而很轻松的实现自适应布局展示在不同尺寸屏幕下。项目中常常碰到要始终居中的元素,当然想到的第一个就是使用margin:0 auto;或者使用定位和margin结合的这种简单的方法,当同事告诉我让我去研究研究calc的时候才真正的深入了解这个Css3中的新东西。
二、使用方法
calc()中的参数是一个计算公式,通过这个计算公式把计算宽度和数值的任务扔给不同尺寸下的浏览器,让页面能够自己得出宽度或数值的结论,这些计算公式也都是很简单的加( )减( - )乘( * )除( / )运算。
div{width: calc(15px 15px);//30px
width: calc(15px - 10px);//5px
width: calc(15px*2);//30px
width: calc(15px/3);//5px
}
从上面的例子中可以看出,加( )减( - )运算中需要计算的数值与运算符之间是有空格的,并且这空格是不能省略的,而乘( * )除( / )运算里的空格是可以省略的。
calc()中的表达式是可以使用百分比、px、em、rem等单位进行计算的,并且单位可以混在一起计算:
div{width: calc(3em 5px);//53px
}
三、calc()嵌套
calc()是一个函数,那么函数是可以支持嵌套的,可以通过不同的公式来算出最后的结果。
div{--widthA: calc(10px 190px);
--widthB: calc(var(--widthA) / 2);
--widthC: calc(var(--widthB) / 2);
width: var(--widthC);//50px
}
四、简单的居中
calc()可以计算宽度以后,居中显示的实现就可以有很多方法,padding或者margin,但它的原理都是一样的。
div{padding: 0 calc((100% - 1024px)/2);
}
假设中间的内容是固定宽度1024px,那么获取父级的宽度或者窗口的宽度100%,然后减去内容的宽度后剩下的就是需要分配给内容左右两边的宽度,将它们一分为二(/2)就可以实现中间1024px宽度的内容一直居中了。
五、兼容性
calc()的兼容性已经很高了,IE9 、FF4.0 、Chrome和Safari6 都已经支持calc()的应用,但还是要加上不同浏览器的前缀。
div{-moz-calc(expression);
-webkit-calc(expression);
calc(expression); //expression为计算公式
}
Css3新属性:calc()相关推荐
- 从零开始学前端:css3新属性scss和less --- 今天你学习了吗?(CSS:Day22)
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:形变 - 今天你学习了吗?(CSS:Day21) 文章目录 从零开始学前端:程序猿小白也可以完全掌握!-今 ...
- 两点补充——CSS3新属性以及弹性布局
CSS3 新属性 一.[ CSS3新增属性前缀 ] 1.-webkit-:chrome/safari 2.-moz-:火狐 3.-mo-:IE 4.-o-: Opera 欧朋 二 .[CSS 长度单位 ...
- 前端基础8:HTML5新增标签及CSS3新属性 viewport 动画
HTML5新增标签 标签名 描述 header 头部 section 区分大模块 nav 导航 footer 尾部 article 文章 aside 侧边栏 audio 音频 video 视频 fig ...
- 使用css3新属性clip-path制作小图标
一般一个网页上面,或多或少都会用到一些小图标,展示这些小图标的方法有很多种.最简单的做法就是将UI图上面的每个小图标都保存为图片,一个小图标就一张图片.但这也是比较笨的方法,因为浏览器同一时间最多加载 ...
- “约见”面试官系列之常见面试题第三十七篇之CSS3新属性(建议收藏)
目录 CSS3 结构(位置)伪类选择器(CSS3) 目标伪类选择器(CSS3) 属性选择器(CSS3) 伪元素选择器(CSS3,重要) CSS3盒模型(重要) 颜色模式 盒子阴影(CSS3) 文本阴影 ...
- CSS3 新属性 cacl()用法解析
这是一个会计算的属性,特别适合对于自适应还不是很熟练的童鞋! calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,你可以使用calc()给元素的border.margin. ...
- css 一些好玩的属性,推荐一些比较有用的css3新属性
css3刚推出不久,虽然大多数的css3属性在很多流行的浏览器中不支持,但我个人觉得还是要尽量开始慢慢的去了解并使用css3(还有html5),因为我觉得这是一种趋势,它是一种已经被制定的标准.我并不 ...
- css3新属性partA
1.新的选择器 其实大家可以预感到,css3的出现一定会给大家带来更加powerful的选择器,我自称为正则选择器: 如果我们现在有5个li标签,但是每个li标签都要求有不同的背景颜色.传统的做法有两 ...
- CSS3新属性:在网站中使用访客电脑里没有安装的字体
CSS的font-family属性使网页可以使用客户电脑里的字体,从而得到多姿多彩的WEB页面,但当客户端没有你想要使用的字体时怎么办呢?我们总不能让每个访问者都去安装一个字体吧?事实上,这是可以的! ...
最新文章
- 大盘点|6D姿态估计算法汇总(上)
- C和C++数据结构算法
- java myeclipse The type java.lang.CharSequence cannot be resolved. It is indirectly referen
- 20那天android得知
- Frequent values
- 餐饮管理系统开发源码
- cad放大_dwg文件怎么打开?CAD看图,360°精确识别CAD图块,细节见真章
- 初级软考程序员不会c语言,初级程序员考试就这么简单
- 计算机网络 IP地址分为那两部分
- 配置微信公众号之公众号绑定小程序
- 企业组织架构的架构图用思维导图软件怎么做?
- 泪目!这篇博士论文致谢走红:感谢博一与我结婚的妻子...
- tesseract-ocr识别英文和中文图片文字以及扫描图片实例讲解
- Windows远程提示“终端服务器超出了最大允许连接”
- python 导出excel 可筛选_python中实现excel的高级筛选
- 无人驾驶带动激光雷达降价,考古学家“拖了千年的作业”有指望了
- NVIDIA CUDA各版本下载链接(更新至2019-12-11,包含最新10.2版本)
- CAD软件中沿墙镜像功能的使用技巧
- Nebula Graph 的 KV 存储分离原理和性能测评
- net view 时报错 发生系统错误 6118 解决
热门文章
- 基于matlab的语音信号,科学网—[转载]【信息技术】【2014.06】【含源码】基于MATLAB的语音信号处理与分析 - 刘春静的博文...
- 深入理解C指针第一章小结1
- Python 面向对象(初级篇)
- 18.8.20 考试总结
- 【转】Docker 容器化核心概念
- asp.net FileUpload上传文件夹并检测所有子文件
- Unity应用架构设计(1)—— MVVM 模式的设计和实施(Part 2)
- 4月21日会议总结(整理—祁子梁)
- (转)Eclipse平台技术概述
- Work Queue based multi-threading