css3的calc()属性
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()属性的更多相关文章
- css3的calc属性不生效问题
css3的 calc:计算属性.由于自己做的项目中这个属性不常用到,偶尔用一次还没效果. 后来研究了下是因为运算符两边没加空格. 错误示例:.content{width:calc(100%-50px) ...
- css3的 calc属性无效问题解决
css3的 calc:计算属性. 运算符两边需要加空格,才有效. 错误示例:.mystyle{width:calc(100%-25px)}这样是不生效的 运算符"+ - * /"左 ...
- CSS的单位及css3的calc()及line-height百分比
锚点:css中百分比减去固定元素 单位介绍 说到css的单位,大家应该首先想到的是px,也就是像素,我们在网页布局中一般都是用px,但是近年来自适应网页布局越来越多,em和百分比也经常用到了.然后随着 ...
- CSS的单位 及 css3的calc() 及 line-height 百分比
CSS的单位及css3的calc()及line-height百分比 摘自:http://www.haorooms.com/post/css_unit_calc 单位介绍 说到css的单位,大家应该首先 ...
- CSS3的calc()使用
CSS3的calc()使用 calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,用来指定元素的长度.比如说,你可以使用calc()给元素的border.margin.pad ...
- CSS3中动画属性transform、transition 和 animation
CSS3中和动画有关的属性有三个 transform.transition 和 animation.下面来一一说明: transform 从字面来看transform的释义为改变,使 ...
- 半深入理解CSS3 object-position/object-fit属性
半深入理解CSS3 object-position/object-fit属性 转载:https://www.zhangxinxu.com/wordpress/2015/03/css3-object-p ...
- 转载文章CSS3的calc()使用
calc()对大家来说,或许很陌生,不太会相信calc()是css中的部分.因为看其外表像个函数,既然是函数为何又出现在CSS中呢?这一点也让我百思不得其解,今天有一同事告诉我,说CSS3中有一个属性 ...
- CSS3 的calc()方法的使用
calc()简单介绍 calc()对大家来说,或许很陌生,不太会相信calc()是css中的部分.因为看其外表像个函数,既然是函数为何又出现在CSS中呢?这一点也让我百思不得其解,今天有一同事告诉我, ...
随机推荐
- tkinter如何设置界面消失 当制作一个登陆界面时,登陆成功之后,如何让登陆界面本身消失
tkinter如何设置界面消失 当制作一个登陆界面时,登陆成功之后,如何让登陆界面本身消失 if querySQL.checkAll():#用户名和密码都输入正确 self.root.withdraw ...
- django-suit报错解决-----from suit.apps import DjangoSuitConfig
(py27) [root@test SimpletourDevops]# python manage.py makemigrationsTraceback (most recent call last ...
- odoo开发 相关知识点
(1)导入模块可以起别名: (2) 新的模型前端要调用显示有关联的另一个模型的相关字段 (3) 传递上下文 搜索视图打开默认按照接收的参数搜索显示: 发起端视图 上下文写法: 目标端 触发显示,搜索视 ...
- python使用(二)
Python中的集合类型. 1.list_option.py 2.listsplit_option.py 3. dic_option.py 4.iter_option.py 1.list_option ...
- storm_分组策略
注意1:原始的案例 spout 和bolt都是1个并发 所以文件中30条日志 从spout发出以后 bolt接受到30条
- Redis 缓存服务配置与使用
缓存服务器Couchbase另外一种选择Redis documentation http://redis.io/documentation http://redis.cn/documentation. ...
- php -- 特殊变量的三种输出
----- 020-3outputs.php ----- <!DOCTYPE html> <html> <head> <meta http-equiv=&qu ...
- Chapter 2 Open Book——13
"People in this town," he muttered. "Dr. Cullen is a brilliant surgeon who could prob ...
- Linux-(telnet,wget)
telnet命令 telnet命令通常用来远程登录.telnet程序是基于TELNET协议的远程登录客户端程序.Telnet协议是TCP/IP协议族中的一员,是Internet远程登陆服务的标准协议和 ...
- php里input数组的应用
一般我们使用input传递表单数据时,可以使用<input name="xxx[]" value="1"><input name=" ...