CSS3 calc() 会计算的属性
2016-02-19 11:06
465 查看
calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。
以前我们可以使用box-sizing:border-box;来设置盒子的属性为不加上边距。现在我们又多了一个选择了。但要注意,两者只能使用一个哦,否则就会造成冲突了。
怎么使用?
calc()可以使用数学运算中的简单加(+)、减(-)、乘(*)和除(/)来解决问题,而且还可以根据单位如px,em,rem和百分比来转化计算。
比如三局平均分布的布局,中间间距为5像素。
做成如下效果,每行3个对象 : 拖动浏览器大小,内容自动按比例缩放。
在线演示
以前我们可以使用box-sizing:border-box;来设置盒子的属性为不加上边距。现在我们又多了一个选择了。但要注意,两者只能使用一个哦,否则就会造成冲突了。
怎么使用?
calc()可以使用数学运算中的简单加(+)、减(-)、乘(*)和除(/)来解决问题,而且还可以根据单位如px,em,rem和百分比来转化计算。
比如三局平均分布的布局,中间间距为5像素。
做成如下效果,每行3个对象 : 拖动浏览器大小,内容自动按比例缩放。
<style type="text/css"> *{margin: 0; padding: 0;} .col-3{width: calc(100%/3 - 5px); float: left; margin-right: calc(5px*3 /2); background: #eee; color: #333; height: 100px; text-align: center; margin-bottom: calc(5px*3 /2); font-size: 18px; line-height: 100px;} .col-3:nth-child(3){margin-right: 0;} </style>
在线演示
相关文章推荐
- CSS3选择器(全)
- CSS3用户界面
- CSS3中的网页布局
- CSS3中的2D变形
- CSS文本、字体与颜色
- CSS新增特性和CSS选择器
- 14.使用 CSS 显示 XML
- CSS发展史
- css srpites css精灵
- CSS清除浮动_清除float浮动
- CSS中DIV居中
- 未知宽高图片垂直居中&&CSS垂直居中总结
- css中inline、block、inline-block的区别
- [css] line-height 百分比单位和数值单位的区别
- sass学习研究
- css基础2
- css样式 让文章开头空两格
- css 简写属性 规则 次序 汇总 书写顺序
- css3,background-clip/background-origin的使用场景,通俗讲解
- css基础