详解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实现Material Design效果
Mar 09 HTML / CSS
css3使网页、图片变成灰色兼容大多数浏览器
Jul 02 HTML / CSS
CSS3中Animation属性的使用详解
Aug 06 HTML / CSS
css3实现的多级渐变下拉菜单导航效果代码
Aug 31 HTML / CSS
CSS3实现可爱的小黄人动画
Jul 11 HTML / CSS
Html5无刷新修改browser Url的方法
Jan 15 HTML / CSS
深入理解HTML的FormData对象
May 17 HTML / CSS
HTML5各种头部meta标签的功能(推荐)
Mar 13 HTML / CSS
Canvas制作旋转的太极的示例
Mar 09 HTML / CSS
iframe与window.onload如何使用详解
May 07 HTML / CSS
h5封装下拉刷新
Aug 25 HTML / CSS
html原生table实现合并单元格以及合并表头的示例代码
May 07 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
ThinkPHP安装和设置
2015/07/27 PHP
php微信公众平台开发(三)订阅事件处理
2016/12/06 PHP
PHP操作Postgresql封装类与应用完整实例
2018/04/24 PHP
在b/s开发中经常用到的javaScript技术
2006/08/23 Javascript
深入理解JavaScript高级之词法作用域和作用域链
2013/12/10 Javascript
javascript实现博客园页面右下角返回顶部按钮
2015/02/22 Javascript
浅谈javascript实现八大排序
2015/04/27 Javascript
PHP+mysql+Highcharts生成饼状图
2015/05/04 Javascript
js控制文本框输入的字符类型方法汇总
2015/06/19 Javascript
基于jQuery代码实现圆形菜单展开收缩效果
2017/02/13 Javascript
JavaScript实现三级联动效果
2017/07/15 Javascript
jQuery实现可兼容IE6的遮罩功能详解
2017/09/19 jQuery
vue实现压缩图片预览并上传功能(promise封装)
2019/01/10 Javascript
jQuery实现的隔行变色功能【案例】
2019/02/18 jQuery
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
2019/09/03 jQuery
使用p5.js临摹动态图片
2019/11/04 Javascript
你不知道的SpringBoot与Vue部署解决方案
2020/11/09 Javascript
python实现的简单窗口倒计时界面实例
2015/05/05 Python
解决Pycharm无法import自己安装的第三方module问题
2018/05/18 Python
Python实现读写INI配置文件的方法示例
2018/06/09 Python
使用python socket分发大文件的实现方法
2019/07/08 Python
python生成器推导式用法简单示例
2019/10/08 Python
Python开发企业微信机器人每天定时发消息实例
2020/03/17 Python
Python基于stuck实现scoket文件传输
2020/04/02 Python
python批量修改交换机密码的示例
2020/09/22 Python
京东港澳售:京东直邮港澳台
2018/01/31 全球购物
GoPro摄像机美国官网:美国运动相机厂商
2018/07/03 全球购物
英国排名第一的礼品体验公司:Red Letter Days
2018/08/16 全球购物
serialVersionUID具有什么样的特征
2014/02/20 面试题
公司薪酬管理制度
2014/01/31 职场文书
学生自我评价范文
2014/02/02 职场文书
工程力学专业自荐信范文
2014/03/17 职场文书
启动仪式策划方案
2014/06/14 职场文书
2015年复活节活动总结
2015/02/27 职场文书
银行客户经理培训心得体会
2016/01/09 职场文书
如何用PHP实现多线程编程
2021/05/26 PHP