calc()能做什么？

calc()可以通过计算得到元素的宽度或者高度，让我们很容易进行自适应布局。

你可以为一个div元素，使用百分比、em、px和rem单位值计算出其宽度或者高度，比如说“width:calc(50% + 2em)”，这样一来你就不用考虑元素div的宽度值到底是多少，而把这个任务交由浏览器去计算。

calc()语法

calc()语法非常简单，就像我们小时候学加 （+）、减（-）、乘（*）、除（/）一样，使用数学表达式来表示：

.elm {

  width: calc(expression);

}

其中"expression"是一个表达式，用来计算长度的表达式。

calc()的运算规则

calc()使用通用的数学运算规则，同时也提供更智能的功能：

使用“+”、“-”、“*” 和 “/”四则运算；
可以使用百分比、px、em、rem等单位；
可以混合使用各种单位进行计算；
表达式中有“+”和“-”时，其前后必须要有空格，如"widht: calc(12%+5em)"这种没有空格的写法是错误的；
表达式中有“*”和“/”时，其前后可以没有空格，但建议留有空格。

浏览器的兼容性

浏览器对calc()的兼容性还算不错，在IE9+、FF4.0+、Chrome19+、Safari6+都得到较好支持，同样需要在其前面加上各浏览器厂商的识别符，不过可惜的是，移动端的浏览器还没仅有“firefox for android 14.0”支持，其他的全军覆没。

大家在实际使用时，同样需要添加浏览器的前缀。

实例

<head>

   <style>

    .left-elem {

        width: -moz-calc(100% - 100px);

        width: -webkit-calc(100% - 100px);

        width: calc(100% - 100px);

        float: left;

        overflow: hidden;

        white-space: nowrap;

        text-overflow: ellipsis;

        }

    .right-elem {

        width: 100px;

        text-align: right;

        display: inline-block;

    }

   </style>

</head>

<body>

   <div style="border:solid 1px red">

      <div class="left-elem">

        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

      </div>

      <div class="right-elem">

        yyyyyyyyy

      </div>

   </div>

</body>

实现的效果如下：

当缩小浏览器尺寸时，左边的xxxxxx... 会呈现自适应效果。

使用css3中calc()进行自适应布局的更多相关文章

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

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

  2. 关于使用rem单位，calc()进行自适应布局

    关于css中的单位 大家都知道在css中的单位,一般都包括有px,%,em等单位,另外css3新增加一个单位rem. 其中px,%等单位平时在传统布局当中使用的比较频繁,大家也比较熟悉,不过px单位在 ...

  3. 关于使用rem单位、css函数calc()进行自适应布局

    一.关于css中的单位 大家都知道在css中的单位,一般都包括有px,%,em等单位,另外css3新增加一个单位rem. 其中px,%等单位平时在传统布局当中使用的比较频繁,大家也比较熟悉,不过px单 ...

  4. CSS3中的Flexbox弹性布局（一）

    CSS3引入了一种新的布局模式——Flexbox布局,即伸缩布局盒模型(Flexible Box),用来提供一个更加有效的方式制定.调整和分布一个容器里项目布局,即使它们的大小是未知或者动态的,这里简 ...

  5. Css3中的响应式布局的应用

    Media Queries直译过来就是“媒体查询”,在我们平时的Web页面中head部分常看到这样的一段代码: <link href="css/reset.css" rel= ...

  6. css3中calc、vw、vh、vmin、vmax 属性的应用及兼容性详解

    一. calc()的使用什么是calc()? calc()从字面我们可以把他理解为一个函数function.其实calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,用来指定 ...

  7. CSS3中更灵活的布局方式

    flex是一个灵活性强的布局方式,它能够很好的控制内部元素的宽度,高度或者剩余的空间部分,来适应不同的显示设备和不同的屏幕尺寸,而真正达到一种自适应效果. flex布局与常规布局截然不同,常规布局虽然 ...

  8. css3中的多列布局columns详解

    columns语法:columns:[ column-width ] || [ column-count ]设置或检索对象的列数和每列的宽度 其中:[ column-width ]:设置或检索对象每列 ...

  9. CSS3中的Flexbox弹性布局（二）

    flexbox详解 flexbox的出现是为了解决复杂的web布局,因为这种布局方式很灵活.容器的子元素可以任意方向进行排列.此属性目前处于非正式标准. flex布局模型不同于块和内联模型布局,块和内 ...

随机推荐

  1. TCP/IP 协议：链路层概述

    我们以一个常见的查看IP指令为出发点(ifconfig -a):   1.链路层是什么 链路层是指硬件层协议.也即网络所使用的硬件,比如:以太网(后文主要讨论对象),令牌环网,FDDI已经RS-232 ...

  2. Java-->Json解析网页数据

    --> 官方解析jar包: 链接:http://pan.baidu.com/s/1pKDnXKv 密码:694d --> 离线Json格式检测工具: 链接:http://pan.baidu ...

  3. cocos2d Slider 透明滑动部件无法生成解决办法

    用cocos studio 2.3.2 制作声音大小控制滑条的时候遇到了一个奇葩bug我把透明图片和其它资源打包到合图里面然后到到cocos stdudio里面 那张透明图片变成了只有一个像素的点,最 ...

  4. Selenium 中 cssSelector定位

    一.为什么使用cssSelector定位元素? 目前针对一些常规定位方式有:By.id.By.name.By.LinkTest(针对<a>标签).By.ClassName 针对不太好定位的 ...

  5. 黑马程序员——JAVA基础之标准输入输出流

    ------- android培训.java培训.期待与您交流! ---------- 标准输入输出流: System中的基本字段,in,out 它们各代表了系统标准的输入和输出设备. 默认输入设备是 ...

  6. Android学习五：Content Provider 使用

    1ContentProvider相关知识1.1在安卓应用中,通过文件方式对外共享数据,需要进行文件操作读写数据:采用sharedpreferences共享数据,需要使用sharedpreference ...

  7. pclint vc6/linux 工程，测试正常

    下载:http://www.gimpel.compojie版搜索一下很好找 里面有vc6 和linux工程的lnt文件,实际使用可能要修改. http://files.cnblogs.com/file ...

  8. TopShelf&Quartz.Net实现多任务的值守

    很多时候,我们需要为一个服务器安装一堆的服务,来监控各种数据. 在windows服务器里,我们会部署专门的Quartz.Net多任务轮询服务. 同时,我们针对不同的任务制作专门的***Job.dll, ...

  9. 解决wamp的Apache服务器不能重启

    由于工作需要,现在开始研究PHP语言.刚开始搭建服务器环境就困难重重啊.首先看了下配置说明,很复杂很复杂(超级想念Visual Studio).然后问了下群里的老鸟,他们都是安装WAMPServer环 ...

  10. [ActionScript 3.0] AS3.0 复制xml，并赋值

    var template:XML= <person><name><first>FIRST</first><last /></name& ...