详解CSS 3 中的 calc() 方法


Posted in HTML / CSS onJanuary 12, 2018

下面一段代码给大家介绍css3中的calc()方法,具体内容如下所示:

<div style="width:100px; height:50px; background:red;">
  <div style="width:100%; height:20px; margin:5px; background:green;"></div>
</div>

[Ctrl+A 全部选择 提示:您可先修改部分代码,再按运行]

如上代码,预览可以看出红色框超出了,因为在标准的 CSS 中,width 是不包含 margin 的(老 IE 中 width 是包含 margin 的)。

为了达到上述效果,我们一般会在中间再套一层 div(有人说,不是把 width:100% 取了就可以了么?冷静,我们是举例,实际有些情况下,不能取消 width:100%。)

有没有更方便的呢?用 calc() 吧。

<div style="width:100px; height:50px; background:red;">
  <div style="width:calc(100% - 10px); height:20px; margin:5px; background:green;"></div>
</div>

 [Ctrl+A 全部选择 提示:您可先修改部分代码,再按运行]

使用说明

  • 支持:+、-、*、/,支持混用
  • 支持:%、px、em、rem 等
  • +、- 前后必须要有空格,比如:calc(100%-10px) 是不正确的,应该改为:calc(100% - 10px)
  • *、/ 前后可以不要空格,但建议有。
     

支持性

主流的桌面浏览器都支持。据说手机浏览器几乎不支持。

总结

以上所述是小编给大家介绍的CSS 3 中的 calc() 方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
CSS3动画效果回调处理详解
Dec 10 HTML / CSS
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
Dec 13 HTML / CSS
html5 迷宫游戏(碰撞检测)实例一
Jul 25 HTML / CSS
HTML5实现多张图片上传功能
Mar 11 HTML / CSS
canvas里面如何基于随机点绘制一个多边形的方法
Jun 13 HTML / CSS
浅谈HTML5新增和废弃的标签
Apr 28 HTML / CSS
Html5移动端适配IphoneX等机型的方法
Jun 25 HTML / CSS
前端实现打印图像功能
Aug 27 HTML / CSS
基于HTML5+tracking.js实现刷脸支付功能
Apr 16 HTML / CSS
AmazeUI框架搭建的方法步骤(图文)
Aug 17 HTML / CSS
使用layui实现左侧菜单栏及动态操作tab项的方法
Nov 10 HTML / CSS
使用HTML+Css+transform实现3D导航栏的示例代码
Mar 31 HTML / CSS
css3实现冲击波效果的示例代码
Jan 11 #HTML / CSS
css3如何绘制一个圆圆的loading转圈动画
Jan 09 #HTML / CSS
浅谈CSS3中的变形功能-transform功能
Dec 27 #HTML / CSS
css3的动画特效之动画序列(animation)
Dec 22 #HTML / CSS
css3实现多个元素依次显示效果
Dec 12 #HTML / CSS
浅谈css3中calc在less编译时被计算的解决办法
Dec 04 #HTML / CSS
浅谈css3新单位vw、vh、vmin、vmax的使用详解
Dec 01 #HTML / CSS
You might like
PHP form 表单传参明细研究
2009/07/17 PHP
php调用c接口无错版介绍
2014/03/11 PHP
一组PHP加密解密函数分享
2014/06/05 PHP
PHP实现一个轻量级容器的方法
2019/01/28 PHP
javascript 贪吃蛇实现代码
2008/11/22 Javascript
ExtJs grid行 右键菜单的两种方法
2010/06/19 Javascript
jquery dialog open后,服务器端控件失效的快速解决方法
2013/12/19 Javascript
jQuery实现仿百度帖吧头部固定导航效果
2015/08/07 Javascript
浅谈JavaScript中的string拥有方法的原因
2015/08/28 Javascript
jQuery动态创建元素以及追加节点的实现方法
2016/10/20 Javascript
浅析如何利用JavaScript进行语音识别
2016/10/27 Javascript
Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码)
2017/10/25 Javascript
jQuery动态添加元素无法触发绑定事件的解决方法分析
2018/01/02 jQuery
nodejs 十六进制字符串型数据与btye型数据相互转换
2018/07/30 NodeJs
Vue.js实现可排序的表格组件功能示例
2019/02/19 Javascript
layui 点击重置按钮, select 并没有被重置的解决方法
2019/09/03 Javascript
解决Layui 表格自适应高度的问题
2019/11/15 Javascript
Python如何读取MySQL数据库表数据
2017/03/11 Python
Python利用Beautiful Soup模块修改内容方法示例
2017/03/27 Python
python访问抓取网页常用命令总结
2017/04/11 Python
对python append 与浅拷贝的实例讲解
2018/05/04 Python
python 将list转成字符串,中间用符号分隔的方法
2018/10/23 Python
Python常用数据类型之间的转换总结
2019/09/06 Python
Python数据库封装实现代码示例解析
2020/09/05 Python
Python制作运行进度条的实现效果(代码运行不无聊)
2021/02/24 Python
面向对象设计的原则是什么
2013/02/13 面试题
Laravel中Kafka的使用详解
2021/03/24 PHP
甜点店创业计划书
2014/01/27 职场文书
优秀应届生求职信
2014/06/16 职场文书
个人房屋买卖协议书(范本)
2014/10/04 职场文书
群众路线个人自我剖析材料
2014/10/07 职场文书
同乡会致辞
2015/07/30 职场文书
2016年优秀团支部事迹材料
2016/02/26 职场文书
2016年优秀党务工作者先进事迹材料
2016/02/29 职场文书
用python修改excel表某一列内容的操作方法
2021/06/11 Python
Nginx工作模式及代理配置的使用细节
2022/03/21 Servers