详解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实现千变万化的文字阴影text-shadow效果设计
Apr 26 HTML / CSS
纯css3制作煽动翅膀的蝴蝶的示例
Apr 23 HTML / CSS
html5文本内容_动力节点Java学院整理
Jul 11 HTML / CSS
使用css如何制作时间ICON方法实践
Nov 12 HTML / CSS
html5中地理位置定位api接口开发应用小结
Jan 04 HTML / CSS
仿酷狗html5手机音乐播放器主要部分代码
May 15 HTML / CSS
HTML5的新特性(1)
Mar 03 HTML / CSS
关于h5中的fetch方法解读(小结)
Nov 15 HTML / CSS
详解基于canvas的视频遮罩插件
Jan 04 HTML / CSS
CSS 实现Chrome标签栏的技巧
Aug 04 HTML / CSS
CSS实现渐变色边框(Gradient borders)的5种方法
Mar 25 HTML / CSS
什么是css原子化,有什么用?
Apr 24 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 第三节 变量介绍
2012/04/28 PHP
PHP类的封装与继承详解
2015/09/29 PHP
基于PHP实现微信小程序客服消息功能
2019/08/12 PHP
php实例化一个类的具体方法
2019/09/19 PHP
JavaScript的内存释放问题详解
2015/01/21 Javascript
基于JavaScript如何实现ajax调用后台定义的方法
2015/12/29 Javascript
js仿百度登录页实现拖动窗口效果
2016/03/11 Javascript
jQuery 选择器(61种)整理总结
2016/09/26 Javascript
jQuery select自动选中功能实现方法分析
2016/11/28 Javascript
ES6 系列之 WeakMap的使用示例
2018/08/06 Javascript
vue服务端渲染页面缓存和组件缓存的实例详解
2018/09/18 Javascript
解决vuecli3.0热更新失效的问题
2018/09/19 Javascript
vue-cli 构建骨架屏的方法示例
2018/11/08 Javascript
swiper实现异形轮播效果
2019/11/28 Javascript
[04:10]DOTA2英雄梦之声_第11期_圣堂刺客
2014/06/21 DOTA
各个系统下的Python解释器相关安装方法
2015/10/12 Python
Python爬虫辅助利器PyQuery模块的安装使用攻略
2016/04/24 Python
python装饰器实例大详解
2017/10/25 Python
详解python的四种内置数据结构
2019/03/19 Python
Python使用matplotlib绘制三维参数曲线操作示例
2019/09/10 Python
python实现根据文件格式分类
2019/10/31 Python
屏蔽Django admin界面添加按钮的操作
2020/03/11 Python
PyCharm设置注释字体颜色以及是否倾斜的操作
2020/09/16 Python
使用CSS3制作倾斜导航条和毛玻璃效果
2017/09/12 HTML / CSS
CSS3常用的几种颜色渐变模式总结
2016/11/18 HTML / CSS
继电保护工岗位职责
2014/01/05 职场文书
联谊活动策划书
2014/01/26 职场文书
党支部承诺书范文
2014/03/28 职场文书
人力资源求职信
2014/05/25 职场文书
2014入党积极分子批评与自我批评思想汇报
2014/09/20 职场文书
安全生产标语大全
2014/10/06 职场文书
实习单位证明范例
2014/11/17 职场文书
初中英语教学随笔
2015/08/15 职场文书
学法用法心得体会(2016推荐篇)
2016/01/21 职场文书
Apache Pulsar集群搭建部署详细过程
2022/02/12 Servers
解决Git推送错误non-fast-forward的方法
2022/06/25 Servers