1、calc()是css3的一个新增的功能,用来指定元素的长度,你可以使用calc()给元素的border、margin、pading、font-size和width等属性动态的设置值。

2、calc()语法

 .element {
width:calc(expression);
}

3、calc()的运算法则

  1)、使用 "+"、"-"、"*" 和 "/" 运算

  2)、可以使用百分比、px、em、rem等单位运算

  3)、可以混合使用各种单位进行运算

  4)、表达式中有 "+" 和 "-" 时,其前后必须有空格。

  5)、表达式中有 "*" 和 "/" 时,其前后可以没有空格,但建议保留

4、浏览器的兼容性

  在IE9+、FF4.0+、Chrome19+、Safari6+都得到了较好的支持,使用时同样在其前面加上各浏览器厂商的识别符前缀

 .element {
-moz-calc(expression);
-webkit-calc(expression);
-o-calc(expression);
-ms-calc(expression);
calc(expression);
}

5、应用

  众所周知,如果元素的宽度为100%时,其自身不带其它盒模型属性设置还好,如果有别的类似margin、padding或border的属性设置,那将导致盒子被撑破。为了解决撑破容器的问题,以前我们只能计算div.box的宽度,用容器的宽度减去padding和border的值 ,但有时候我们苦于不知道元素的总宽度,比如说是自适应布局,只知道一个百分比值,但其它的值又是*px之类的值,这就比较难解决了。随着css3的出现,其中利用box-sizing来改变元素的盒模型以达到最终想要的效果,但是calc()解决此问题更加方便。

     <div class="wrapper">
<div id="header">
<h1>CSS3 calc()</h1>
</div>
<div id="main">
<h1>test……</h1>
<p>test……</p>
</div>
<div id="accessory">
<ul>
<li><a href="#">test1……</a></li>
<li><a href="#">test2……</a></li>
<li><a href="#">test3……</a></li>
</ul>
</div> <div id="footer">
footer
</div>
</div>
     <style>
body {
background:#E8EADD;
color: #3C323A;
padding: 20px;
}
.wrapper {
width: 1024px;
width: -moz-calc(100% - 40px);
width: -webkit-calc(100% - 40px);
width: calc(100% - 40px);
margin: auto;
}
#header {
background: #f60;
padding: 20px;
width: cal(100% - 20px * 2);
}
#main {
border: 8px solid #B8C172;
float: left;
margin-bottom: 20px;
margin-right: 20px;
padding: 20px;
box-sizing:border-box;
width:75%; /*
width: 704px;
width: -moz-calc(75% - 20px * 2 - 8px * 2);
width: -webkit-calc(75% - 20px * 2 - 8px * 2);
width: calc(75% - 20px * 2 - 8px * 2);*/
}
#accessory {
border: 8px solid #B8C172;
float: right;
padding: 10px;
box-sizing:border-box;
width:calc(25% - 20px); /*
width: 208px;
width: -moz-calc(25% - 10px * 2 - 8px * 2 - 20px);
width: -webkit-calc(25% - 10px * 2 - 8px * 2 - 20px);
width: calc(25% - 10px * 2 - 8px * 2 - 20px);*/
}
#footer {
clear:both;
background: #000;
padding: 20px;
color: #fff;
width: cal(100% - 20px * 2);
}
</style>

css3的calc()属性的更多相关文章

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

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

  2. css3的 calc属性无效问题解决

    css3的 calc:计算属性. 运算符两边需要加空格,才有效. 错误示例:.mystyle{width:calc(100%-25px)}这样是不生效的 运算符"+ - * /"左 ...

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

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

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

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

  5. CSS3的calc()使用

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

  6. CSS3中动画属性transform、transition 和 animation

    CSS3中和动画有关的属性有三个 transform.transition 和 animation.下面来一一说明:        transform   从字面来看transform的释义为改变,使 ...

  7. 半深入理解CSS3 object-position/object-fit属性

    半深入理解CSS3 object-position/object-fit属性 转载:https://www.zhangxinxu.com/wordpress/2015/03/css3-object-p ...

  8. 转载文章CSS3的calc()使用

    calc()对大家来说,或许很陌生,不太会相信calc()是css中的部分.因为看其外表像个函数,既然是函数为何又出现在CSS中呢?这一点也让我百思不得其解,今天有一同事告诉我,说CSS3中有一个属性 ...

  9. CSS3 的calc()方法的使用

    calc()简单介绍 calc()对大家来说,或许很陌生,不太会相信calc()是css中的部分.因为看其外表像个函数,既然是函数为何又出现在CSS中呢?这一点也让我百思不得其解,今天有一同事告诉我, ...

随机推荐

  1. centos7 升级GCC版本到7.3.0

    废话不多说,直接上shell,还是比较简单的.就是编译时间有点长... 都是以小时计的......,我刀片机上面一台虚拟机反正是等了3个小时 #必备组件安装 yum install -y gcc gc ...

  2. cookie和session的区别,分布式环境怎么保存用户状态

    cookie和session的区别,分布式环境怎么保存用户状态 1.cookie数据存放在客户的浏览器上,session数据放在服务器上. 2.cookie不是很安全,别人可以分析存放在本地的COOK ...

  3. Python staticmethod classmethod 普通方法 类变量 实例变量 cls self 概念与区别

    类变量 1.需要在一个类的各个对象间交互,即需要一个数据对象为整个类而非某个对象服务. 2.同时又力求不破坏类的封装性,即要求此成员隐藏在类的内部,对外不可见. 3.有独立的存储区,属于整个类.   ...

  4. odoo 开发基础 -- 视图之widget

    Odoo 中的widget many2many_tags one2many_list selection progressbar selection statusbar handle monetary ...

  5. Intellij添加Jetty远程Debug

    步骤一: 步骤二: 步骤三:-agentlib:jdwp=transport=dt_socket,server=y,suspend=n,address=15005 步骤四: 找到服务器上jetty的b ...

  6. SQL SERVICE日志收缩

    ALTER DATABASE 数据库SET RECOVERY SIMPLE WITH NO_WAIT;ALTER DATABASE 数据库SET RECOVERY SIMPLE; --简单模式DBCC ...

  7. spring security xml配置详解

    security 3.x <?xml version="1.0" encoding="UTF-8"?> <beans:beans xmlns= ...

  8. java Queue的用法

    https://www.cnblogs.com/caozengling/p/5307992.html https://blog.csdn.net/a724888/article/details/802 ...

  9. spring boot 与 thymeleaf (1): 国际化

    在thymeleaf 里面有个消息表达式: #{...} , 可以借此来实现国际化. 在我使用这个功能的时候, 碰到了一个问题, 按照 JavaEE开发的颠覆者 Spring Boot实战  上面编码 ...

  10. 从QQ音乐开发,探讨如何利用腾讯云SDK在直播中加入视频动画

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由腾讯游戏云发表于云+社区专栏 看着精彩的德甲赛事,突然裁判一声口哨,球赛断掉了,屏幕开始自动播放"吃麦趣鸡盒,看德甲比赛&q ...