CSS-calc 兼容写法
width: 90%;/*写给不支持calc()的浏览器*/
width:-moz-calc(100% - (10px + 5px) * 2);
width:-webkit-calc(100% - (10px + 5px) * 2); width: calc(100% - (10px + 5px) * 2);
我们想要实现页面自适应布局时,通常因为margin的存在,而比较麻烦;有时候想要实现宽度自适应的输入框时,也因为padding或margin的存在,而相当繁琐,同时由于浏览器兼容性而导致最终效果不一致。css3新添加属性box-sizing,在一定程度上解决了上面的问题,而在今天的文章中我们来通过css3新增加的另外一个属性calc()来实现适应布局。
calc()是css3新添加属性,它可以让你使用一个算术表达式来表达长度值,这意味着可以用它来定义div的宽度,并设置margin、padding、border等。
calc()的运算规则
使用”+”、”-”、”*”、”/”四则运算;
可以使用百分比、px、em、rem等单位;
可以混合使用各种单位进行计算。
实例1:定位在页面上的块元素,含有外边距
.banner {
position:absolute;
left: 40px;
width: -moz-calc(100% - 80px);
width: -webkit-calc(100% - 80px);
width: calc(100% - 80px);
border: solid black 1px;
box-shadow: 1px 2px;
background-color: yellow;
padding: 6px;
text-align: center;
} 实例2:自动调整大小的表单,又适应容器 input {
padding: 2px;
display: block;
width: -moz-calc(100% - 1em);
width: -webkit-calc(100% - 1em);
width: calc(100% - 1em);
} #formbox {
width: -moz-calc(100%/6);
width: -webkit-calc(100%/6);
width: calc(100%/6);
border: 1px solid black;
padding: 4px;
} <form>
<div id="formbox">
<label>Type something:</label>
<input type="text">
</div>
</form> 浏览器兼容性 firefox 4.0+已经开支支持calc()功能,需要使用-moz-calc()私有属性;
chrome从19 dev版,开始支持私有的-webkit-calc()写法;
IE9支持原生写法,calc();
Opera貌似还不支持~~ This is why you see examples like this: width: calc(100%/3 - 2*1em - 2*1px);
That’s actually the minimum number of characters you need to write that particular expression, so far as I can tell. Given the grammar requirements, you could legitimately rewrite that example like so: width: calc(100% / 3 - 2 * 1em - 2 * 1px);
…but not like so: width: calc(100%/3-2*1em-2*1px);
CSS-calc 兼容写法的更多相关文章
- IE浏览器兼容问题(上)——html和css的兼容写法
用户使用的浏览器五花八门,我们要保证每一种浏览器都能兼容我们的代码,不能要求用户去改变浏览器,那么就得在我们的代码上下功夫.此时我们要用到hack. HACK就是针对不同的浏览器写不同的HTML.CS ...
- CSS属性兼容写法
一种是用js判断兼容性 // JS if ("CSS" in window && "supports" in window.CSS) { var ...
- CSS半透明兼容写法
filter: Alpha(opacity=10); -moz-opacity:0.1; opacity:0.1; 例如: background:#A5CD40; filter: Alpha(opac ...
- css 背景色渐变兼容写法
最近在项目中,有很多地方都用到了线性渐变,比如:表单提交按钮的背景,数据展示的标题背景等等,按照以前的做法是切 1px 图片然后 repeat-x.下面我将介绍如何用 css 来完成该效果. css3 ...
- 【css】css 背景色渐变兼容写法
最近在项目中,有很多地方都用到了线性渐变,比如:表单提交按钮的背景,数据展示的标题背景等等,按照以前的做法是切 1px 图片然后 repeat-x.下面我将介绍如何用 css 来完成该效果. css3 ...
- CSS三角的写法(兼容IE6)
目录 简介 优点 原理 1. 先创建一个div 2. 然后给div设定边框. 3. 给div的四个边框都设置不同的颜色 4. 把宽度和高度都变成0 5. 其余角为透明 6. 兼容IE6浏览器 造成这样 ...
- (转)css 背景色渐变兼容写法
css3:linear-gradient 比如:黑色渐变到白色,代码如下: .gradient{ background: -moz-linear-gradient(top, #000000 0%, # ...
- ie6,ie7,ie8 css bug兼容解决方法
IE浏览器以不支持大量的css 属性出名,同时也因其支持的css属性中存在大量bug. 这里收集了好多的bug以及其解决的办法,都在这个文章里面记录下来了!希望以后解决类似问题的时候能够快速解决,也希 ...
- ie6,ie7,ie8 css bug兼容解决记录
ie6,ie7,ie8 css bug兼容解决记录 转载自:ie6,ie7,ie8 css bug兼容解决记录 - 前端开发 断断续续的在开发过程中收集了好多的bug以及其解决的办法,都在这个文章里面 ...
- CSS中兼容的一面-----Hack
国庆了,出去玩耍,也有好长时间没有更新博客了.. 今天就和大家共享一篇技术博文吧.. CSS中兼容的一面-----Hack技术大全 兼容范围: IE:6.0+,FireFox:2.0+,Opera 1 ...
随机推荐
- Android DevArt2:Android 5.0下 Dialog&AlertDialog 并不会影响Activity的生命周期
先给出结论:Dialog和AlertDialog并不会影响到Activity的生命周期,但会影响到Activity的优先级. 核心代码: onCreated中: Resources resources ...
- .Net中使用ODP.net访问Oracle数据库
ODP.Net是Oracle提供的数据库访问类库,其功能和效率上都有所保证,它还有一个非常方便特性:在客户端上,可以不用安装Oracle客户端,直接拷贝即可使用. .net framework4中会将 ...
- Maven项目之间的关系
1. 依赖关系 1.1 标签<dependency>把另一个项目的jar引入到当前项目 1.2 自动下载另一个项目所依赖的其他项目 2. 继承关系. 2.1 父项目是pom类型 2.2 子 ...
- Redis集群模式部署
以下以Linux(CentOS)系统为例 1.1 下载和编译 $ wget http://download.redis.io/releases/redis-4.0.7.tar.gz $ tar xzf ...
- windows上使用metastore client java api链接hive metastore问题
https://github.com/sdravida/hadoop2.6_Win_x64 下载winutils.exe 添加到path中
- Layout两列定宽中间自适应三列布局
最容易理解的一种方法,以中间内容为主体,通过 margin 或者 padding 将两侧撑开,最后用 absolute 定位两侧 html: <div class="container ...
- c#批量更新list对象sql
注意: 1.语句中"set "后有空格, 2.最后一个if一定有值,且接连的sql字段 无 逗号 3.parameterList.Clear(); /// <summary ...
- oracle导入大sql文件
最近遇到一个需要导入大SQL文件的问题,最先直接用SQL developer 导入大SQL文件,结果报IO Exception,只好采用sqlplus 导入,操作过程如下: sqlplus 用户名/密 ...
- jms学习笔记
https://www.cnblogs.com/zhuxiaojie/p/5564187.html //创建一个session //第一个参数:是否支持事务,如果为true,则会忽略第二个参数,被jm ...
- python计算两个数的百分比
a和b是整数,计算a/b的百分比 a=3 b=7 a=float(a) b=float(b) 保留百分比后2位小数 print "%.2f%%" % (a/b*100) '42. ...