详解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学习心得分享
Aug 19 HTML / CSS
利用CSS3的线性渐变linear-gradient制作边框的示例
Jun 02 HTML / CSS
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
Dec 06 HTML / CSS
浅谈css3中calc在less编译时被计算的解决办法
Dec 04 HTML / CSS
详解如何在css中引入自定义字体(font-face)
May 17 HTML / CSS
移动端适配 使px自动转换rem
Aug 26 HTML / CSS
CSS3制作轮播图的一种方法
Nov 11 HTML / CSS
HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
Jan 03 HTML / CSS
html5+css3气泡组件的实现
Nov 21 HTML / CSS
微信浏览器取消缓存的方法
Mar 28 HTML / CSS
HTML5 图片悬停放大的实现代码示例
Dec 04 HTML / CSS
html5 datalist 选中option选项后的触发事件
Mar 05 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下使用CURL方式POST数据至API接口的代码
2013/02/14 PHP
laravel框架模型中非静态方法也能静态调用的原理分析
2019/11/23 PHP
基于jquery的一个图片hover的插件
2010/04/24 Javascript
JavaScript中继承的一些示例方法与属性参考
2010/08/07 Javascript
基于jquery实现放大镜效果
2015/08/17 Javascript
jQuery禁用键盘后退屏蔽F5刷新及禁用右键单击
2016/01/22 Javascript
Windows系统下安装Node.js的步骤图文详解
2016/11/15 Javascript
浅谈struts1 &amp; jquery form 文件异步上传
2017/05/25 jQuery
深究AngularJS——ng-checked(回写:带真实案例代码)
2017/06/13 Javascript
jQuery Collapse1.1.0折叠插件简单使用
2017/08/28 jQuery
vue mint-ui学习笔记之picker的使用
2017/10/11 Javascript
JavaScript代码执行的先后顺序问题
2017/10/29 Javascript
Angular中innerHTML标签的样式不起作用的原因解析
2019/06/18 Javascript
bootstrap table实现iview固定列的效果实例代码详解
2019/09/30 Javascript
vue 中几种传值方法(3种)
2019/11/12 Javascript
Python面向对象程序设计类的封装与继承用法示例
2019/04/12 Python
利用Django模版生成树状结构实例代码
2019/05/19 Python
python框架flask表单实现详解
2019/11/04 Python
Python hashlib常见摘要算法详解
2020/01/13 Python
python时间与Unix时间戳相互转换方法详解
2020/02/13 Python
简述 Python 的类和对象
2020/08/21 Python
Python实现小黑屋游戏的完整实例
2021/01/06 Python
浅谈css3新单位vw、vh、vmin、vmax的使用详解
2017/12/01 HTML / CSS
H5页面适配iPhoneX(就是那么简单)
2019/12/02 HTML / CSS
Spartoo葡萄牙鞋类网站:线上销售鞋履与时尚配饰
2017/01/11 全球购物
世界领先的在线地板和建筑材料批发商:BuildDirect
2017/02/26 全球购物
英国蜡烛、蜡烛配件和家居香氛购买网站:Yankee Candle
2018/12/12 全球购物
俄罗斯在线水暖商店:Perfecto.ru
2019/10/25 全球购物
Weblogic的布署方式
2013/08/23 面试题
通信工程毕业生自荐信
2013/11/01 职场文书
大学校务公开实施方案
2014/03/31 职场文书
毕业生工作求职信
2014/06/30 职场文书
最美孝心少年事迹材料
2014/08/15 职场文书
2014新生大学四年计划书
2014/09/21 职场文书
公司授权委托书格式样本
2014/10/01 职场文书
2014年干部培训工作总结
2014/12/17 职场文书