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. Kerberos认证原理简介

    1.1 What is Kerberos 1.1.1 简单介绍 Kerberos是一个用于鉴定身份(authentication)的协议, 它采取对称密钥加密(symmetric-key crypto ...

  2. 【 D3.js 入门系列 --- 2.1 】 关于如何选择,插入,删除元素

    在D3.js中,选择元素的函数有两个:select 和 selectAll . 先说明一下它们的区别: select 是选择所有指定元素的第一个 selectAll 是选择指定元素的全部(以用于后面同 ...

  3. Spring概况

    1. Spring是什么 Spring是一个开源框架,为了解决企业应用开发的复杂性而创建的,但现在已经不止于企业应用. 是一个轻量级的控制反转(IoC)和面向切面(AOP)的容器框架. ——从大小与开 ...

  4. 如何取Android设备日志

    安装Android SDK 运行 adb 命令 adb devices 查看链接的设备 adb logcat 日志相关

  5. GCC中文手册

    GCC 1 NAME gcc,g++-GNU工程的C和C++编译器(egcs-1.1.2) 总览(SYNOPSIS) gcc[option|filename ]... g++[option|filen ...

  6. oracle 查询数据库表空间大小和剩余空间

    dba_data_files:数据库数据文件信息表.可以统计表空间大小(总空间大小). dba_free_space:可以统计剩余表空间大小. 增加表空间即向表空间增加数据文件,表空间大小就是数据文件 ...

  7. java之main

    Java中用户向系统传递参数的三种基本方式 main方法 在Java中,main()方法是Java应用程序的入口方法,也就是说,程序在运行的时候,第一个执行的方法就是main()方法,这个方法和其他的 ...

  8. JS解析XML文件和XML字符串

    JS解析XML文件 <script type='text/javascript'> loadXML = function(xmlFile){ var xmlDoc=null; //判断浏览 ...

  9. php命令传参

    1.url方式 $param = array(); if ($argc > 1) { parse_str ( $argv [1], $param ); foreach ( $param as $ ...

  10. Eclipse中FindBugs插件的应用

    在以前的一个开发现场里,经常会收到客户的代码review指摘. 觉得有点神奇是,给客户的文件是编译后的*.class打成war包,客户那边却能指摘出代码中的缺陷bug,而且精确到代码的某一行. 通过* ...