使用css3中calc()进行自适应布局
2016-07-11 14:58
591 查看
calc()能做什么?
calc()可以通过计算得到元素的宽度或者高度,让我们很容易进行自适应布局。
你可以为一个div元素,使用百分比、em、px和rem单位值计算出其宽度或者高度,比如说“width:calc(50% + 2em)”,这样一来你就不用考虑元素div的宽度值到底是多少,而把这个任务交由浏览器去计算。
calc()语法
calc()语法非常简单,就像我们小时候学加 (+)、减(-)、乘(*)、除(/)一样,使用数学表达式来表示:
其中"expression"是一个表达式,用来计算长度的表达式。
calc()的运算规则
calc()使用通用的数学运算规则,同时也提供更智能的功能:
使用“+”、“-”、“*” 和 “/”四则运算;
可以使用百分比、px、em、rem等单位;
可以混合使用各种单位进行计算;
表达式中有“+”和“-”时,其前后必须要有空格,如"widht: calc(12%+5em)"这种没有空格的写法是错误的;
表达式中有“*”和“/”时,其前后可以没有空格,但建议留有空格。
浏览器的兼容性
浏览器对calc()的兼容性还算不错,在IE9+、FF4.0+、Chrome19+、Safari6+都得到较好支持,同样需要在其前面加上各浏览器厂商的识别符,不过可惜的是,移动端的浏览器还没仅有“firefox for android 14.0”支持,其他的全军覆没。
大家在实际使用时,同样需要添加浏览器的前缀。
实例
实现的效果如下:
当缩小浏览器尺寸时,左边的xxxxxx... 会呈现自适应效果。
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... 会呈现自适应效果。
相关文章推荐
- Hover.css:一组超实用的 CSS3 悬停效果和动画
- CSS包含块containing block详解
- 纯CSS生成下拉菜单三角形
- 全面的导航选项模板样式及代码
- 关于CSS中的PX值(像素)
- Js运动动画系列7--多物体运动-设置样式属性做不同的运动
- Js运动动画系列6--多物体运动-获取样式属性
- 自写Js+CSS轮显效果
- 鼠标滑过,缩略图放大显示(纯CSS)
- 纯CSS代码实现的图片列表滚动
- 纯CSS实现鼠标移上图片添加阴影效果
- 超漂亮Js+css图片幻灯切换
- JS+CSS给图片加上鼠标滑过的方框
- li里面嵌套a标签html和css小例子
- CSS制作的类似相册浏览的功能
- CSS完成神奇创意的相框
- CSS使用图片完美修饰的全兼容圆角框
- 一个简单的TabItem样式。
- css中padding与margin
- css中单位px和em,rem的区别