calc()语法:

  elem{

    width:calc( 50% -2px );

  }

  取值说明:

    calc是计算的缩写,上句含义是:计算elem父元素的50%再减2px,并将结果赋值给elem的width属性

calc()能做什么:

  calc()可以通过动态的计算来得到元素的宽度或者高度。

  例如:width:calc(50% - 2px)。当为元素设置了2px的边框时,通过这样的计算就可以避免因超出而折行。

  可以使用 + - * / 等运算符来进行计算

  注意:表达式中有“+”和“-”时,其前后必须要有空格,如"widht: calc(12%+5em)"这种没有空格的写法是错误的;

兼容性:

  IE9+、FF4.0+、Chrome19+、Safari6+支持该属性,也就是说现在仍然需要兼容的IE8并不适用,开发时如果使用该属性,需要考虑通过hack的方式兼容IE8

  

css3整理--calc()的更多相关文章

  1. CSS3的calc()使用

    CSS3的calc()使用 calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,用来指定元素的长度.比如说,你可以使用calc()给元素的border.margin.pad ...

  2. CSS的单位及css3的calc()及line-height百分比

    锚点:css中百分比减去固定元素 单位介绍 说到css的单位,大家应该首先想到的是px,也就是像素,我们在网页布局中一般都是用px,但是近年来自适应网页布局越来越多,em和百分比也经常用到了.然后随着 ...

  3. css3 的 calc()函数在布局中的使用----头部高度固定,页面正好占满一屏

    最近项目遇到一个布局需求,头部高度固定,页面需要刚好占满一屏幕. 如下示意图: 方法:使用calc .wrap{ position: relative; margin-left: 24px; marg ...

  4. CSS3 使用 calc() 计算高度 vh px

    Viewport    viewport:可视窗口,也就是浏览器.    vw Viewport宽度, 1vw 等于viewport宽度的1%    vh Viewport高度, 1vh 等于view ...

  5. CSS的单位 及 css3的calc() 及 line-height 百分比

    CSS的单位及css3的calc()及line-height百分比 摘自:http://www.haorooms.com/post/css_unit_calc 单位介绍 说到css的单位,大家应该首先 ...

  6. css3的calc() css3的百分比减宽,减高,加,乘,除,适合用于后台的排版定位

    css3的calc() css3的百分比减宽,减高,加,乘,除,适合用于后台的排版定位 浏览器支持IE9+.FF4.0+.Chrome19+.Safari6+ calc()语法非常简单,就像我们小时候 ...

  7. [转]CSS3 使用 calc() 计算高度 vh px

    1.px 像素,我们在网页布局中一般都是用px. 2.百分比 百分比一般宽泛的讲是相对于父元素,自适应网页布局越来越多,百分比也经常用到了. 3.Viewport    viewport:可视窗口,也 ...

  8. css3的calc属性不生效问题

    css3的 calc:计算属性.由于自己做的项目中这个属性不常用到,偶尔用一次还没效果. 后来研究了下是因为运算符两边没加空格. 错误示例:.content{width:calc(100%-50px) ...

  9. CSS3表达式calc( )

    CSS3表达式calc( ) 第一次看到calc( )时,不太相信calc()是css中的部分.因为看其外表像个函数,但是CSS里为啥会有表达式我也不太清楚,偶然机会在网页里看到的,自己切片写自适应时 ...

随机推荐

  1. NSArray与NSString、NSData,NSDictionary与NSString、NSData 相互转化

    NSArray *array = @[ @1, @2, @3, @4, @5, @3 ]; // 1. NSArray与NSData相互转化 // NSArray to NSData NSError ...

  2. JAVA递归、非递归遍历二叉树(转)

    原文链接: JAVA递归.非递归遍历二叉树 import java.util.Stack; import java.util.HashMap; public class BinTree { priva ...

  3. [数据结构与算法分析(Mark Allen Weiss)]二叉树的插入与删除 @ Python

    二叉树的插入与删除,来自Mark Allen Weiss的<数据结构与算法分析>. # Definition for a binary tree node class TreeNode: ...

  4. stm32型号解读

      ST意法半导体在牵手ARM后可以说是做的非常成功,抓住了从普通MCU到ARM的市场转变的机会.由于ST公司的STM32系列ARM 使用了完善的库开发,作为芯片的应用者不用从底层的寄存器来实现每个功 ...

  5. jq 回车提交指定按钮

    $(this).keydown(function (e) { var key = window.event ? e.keyCode : e.which; ") { $("#Main ...

  6. SpringCloud服务如何在Eureka安全优雅的下线

    如果直接KILL SpringCloud的服务,因为Eureka采用心跳的机制来上下线服务,会导致服务消费者调用此已经kill的服务提供者然后出错,处理这种情况有2中方案. 如需平滑的发布服务请参考: ...

  7. 基于CentOS搭建Nginx 静态网站

    系统要求: CentOS 7.2 64 位操作系统 一. 安装 Nginx(在 CentOS 上,可直接使用 yum 来安装 Nginx) yum install nginx -y 安装完成后,使用 ...

  8. RabbitMQ使用技巧

    一. net客户端介绍    http://www.cnblogs.com/hsyzero/p/6297644.html 二. RabbitMQ消息应答 执行一个任务可能需要花费几秒钟,你可能会担心如 ...

  9. 腾讯QQ会员中心g_tk32算法【C#版】

    最近用C#写qq活动辅助类程序,碰到了会员签到的gtk算法不一样,后来网上找了看,发现有php版的(https://www.oschina.net/code/snippet_1378052_48831 ...

  10. 同一个脚本在SQLPLUS和SQLDEV上的不同

    前几天收集了信息给Oracle.oracle那边表示格式不正确.让我又一次收集.我非常费解,我是依照官方文档做的呀,怎么会? 于是我果断自己搭了一个环境:RHEL5.8+10.2.0.5 客户那边没法 ...