calc与box-sizing的替代
来源:互联网 发布:手机录制广告语软件 编辑:程序博客网 时间:2024/06/08 08:23
背景:之前发现calc这个布局新属性之后就非常喜欢,爱不释手。在公司的实习的时候,开发微信端的页面,使用了几次calc,后来发现在Android的上的不支持~蛋疼。于是到处找替代方案,终于在stackoverflow上找到一个满意的答复,好~接下来进入正文~
calc 与box-sizing 简单介绍
* calc 属性*
calc()能让你给元素的做计算,你可以给一个div元素,使用百分比、em、px和rem单位值计算出其宽度或者高度,比如说“width:calc(50% + 2em)”,这样一来你就不用考虑元素DIV的宽度值到底是多少,而把这个烦人的任务交由浏览器去计算。
calc()的运算规则
- 使用“+”、“-”、“*” 和 “/”四则运算;
- 可以使用百分比、px、em、rem等单位;
- 可以混合使用各种单位进行计算;
- 表达式中有“+”和“-”时,其前后必须要有空格,如”widht:
- calc(12%+5em)”这种没有空格的写法是错误的;
- 表达式中有“*”和“/”时,其前后可以没有空格,但建议留有空格。
兼容性
浏览器对calc()的兼容性还算不错,在IE9+、FF4.0+、Chrome19+、Safari6+都得到较好支持,同样需要在其前面加上各浏览器厂商的识别符,不过可惜的是,移动端的浏览器还没仅有“firefox for android 14.0”支持,其他的全军覆没。
box-sizing
语法
box-sizing : content-box || border-box || inherit
取值说明
- [1] content-box
此值为其默认值,其让元素维持W3C的标准Box Model,也就是说元素的宽度/高度(width/height)等于元素边框宽度(border)加上元素内边距(padding)加上元素内容宽度/高度(content width/height)即:Element Width/Height = border+padding+content width/height。
- [2] border-box
此值让元素维持IE传统的BoxModel(IE6以下版本),也就是说元素的宽度/高度等于元素内容的宽度/高度。(从上面Box Model介绍可知,我们这里的content width/height包含了元素的border,padding,内容的width/height【此处的内容宽度/高度=width/height-border-padding】)。
兼容性:
布局比较
**相比于box-sizing而言 calc的Android browser的支持性太差了,所以布局的时候,box-sizing可以用来解决calc的问题
**
//html<div class="sideBar">sideBar</div><div class="content">content</div>//css //使用calc.content { width: 65%; //照顾Android 平稳退化 width: calc(100% - 300px);} //使用box-sizing .sideBar { position: absolute; top:0; left:0; width: 300px;}.content { padding-left: 300px; width: 100%; -moz-box-sizing: border-box; box-sizing: border-box;}
以上的代码来自于stackoverflow,非常棒的解决方案~
之后在工作中,发现bootstrap的源码有这么一段代码~
box-sizing这个货还是非常有用的呀~
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}*:before,*:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
最后记:
第一篇通过解决自己遇到的问题而来的文章~
参考资料:
- CSS3的calc()使用
- CSS3 Box-sizing
- Stackoverflow的问答
0 0
- calc与box-sizing的替代
- CSS的box-sizing和calc()
- 响应式布局box-sizing与巧用css3的calc()方法
- css3 width属性的calc()及box-sizing
- 流体布局CSS3中 calc()的使用 顺带box-sizing
- box-sizing和calc()盒模型
- box-sizing与盒模型的认识
- 我的前端学习笔记 box-sizing,calc,回调函数
- box-sizing 的用法
- css3的box-sizing
- css3的box-sizing
- box-sizing的用法
- box-sizing的应用
- box-sizing的应用
- box-sizing的用法
- box-sizing 的使用
- box-sizing与position绝对定位的相互作用
- box-sizing属性的理解
- hdu 2098 - 分拆素数和
- Ubuntu14.04编译安装mysql5.6.26
- 计算广告概述
- 支付宝-银联-微信支付接入总结
- Android 使用android-support-multidex解决Dex超出方法数的限制问题,让你的应用不再爆棚
- calc与box-sizing的替代
- 获取网页高度
- 小白安卓学习第一章(Android系统概述)
- Xcode7.1环境下上架iOS App到AppStore 流程 (Part 二)
- 实战做项目如何选择开源许可协议
- 带动画的新手指导页
- Python 基础 —— pylab
- HDU--2044
- PHP中获取当前页面的完整URL