css3的calc() css3的百分比减宽,减高,加,乘,除,适合用于后台的排版定位
css3的calc() css3的百分比减宽,减高,加,乘,除,适合用于后台的排版定位
浏览器支持IE9+、FF4.0+、Chrome19+、Safari6+
calc()语法非常简单,就像我们小时候学加 (+)、减(-)、乘(*)、除(/)一样,使用数学表达式来表示:
.haorooms {
width: calc(expression);
}
这样padding和margin和百分比一起用,问题就可以解决了。
例如,我们margin是20px。那么我们就可以写成
.haorooms{
width: calc(100% - 20px); //注:减号前后要有空格,否则很可能不生效!!
}
也可以这么用:
.box {
background: #f60;
height: 50px;
padding: 10px;
border: 5px solid green;
width: 90%;/*写给不支持calc()的浏览器*/
width:-moz-calc(100% - (10px + 5px) * 2);
width:-webkit-calc(100% - (10px + 5px) * 2);
width: calc(100% - (10px + 5px) * 2);
}
css3的calc() css3的百分比减宽,减高,加,乘,除,适合用于后台的排版定位的更多相关文章
- CSS的单位 及 css3的calc() 及 line-height 百分比
CSS的单位及css3的calc()及line-height百分比 摘自:http://www.haorooms.com/post/css_unit_calc 单位介绍 说到css的单位,大家应该首先 ...
- CSS的单位及css3的calc()及line-height百分比
锚点:css中百分比减去固定元素 单位介绍 说到css的单位,大家应该首先想到的是px,也就是像素,我们在网页布局中一般都是用px,但是近年来自适应网页布局越来越多,em和百分比也经常用到了.然后随着 ...
- css3的 calc属性无效问题解决
css3的 calc:计算属性. 运算符两边需要加空格,才有效. 错误示例:.mystyle{width:calc(100%-25px)}这样是不生效的 运算符"+ - * /"左 ...
- CSS3的calc()使用
CSS3的calc()使用 calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,用来指定元素的长度.比如说,你可以使用calc()给元素的border.margin.pad ...
- CSS3表达式calc( )
CSS3表达式calc( ) 第一次看到calc( )时,不太相信calc()是css中的部分.因为看其外表像个函数,但是CSS里为啥会有表达式我也不太清楚,偶然机会在网页里看到的,自己切片写自适应时 ...
- CSS3 使用 calc() 计算高度 vh px
Viewport viewport:可视窗口,也就是浏览器. vw Viewport宽度, 1vw 等于viewport宽度的1% vh Viewport高度, 1vh 等于view ...
- [转]CSS3 使用 calc() 计算高度 vh px
1.px 像素,我们在网页布局中一般都是用px. 2.百分比 百分比一般宽泛的讲是相对于父元素,自适应网页布局越来越多,百分比也经常用到了. 3.Viewport viewport:可视窗口,也 ...
- css3 的 calc()函数在布局中的使用----头部高度固定,页面正好占满一屏
最近项目遇到一个布局需求,头部高度固定,页面需要刚好占满一屏幕. 如下示意图: 方法:使用calc .wrap{ position: relative; margin-left: 24px; marg ...
- css3的calc属性不生效问题
css3的 calc:计算属性.由于自己做的项目中这个属性不常用到,偶尔用一次还没效果. 后来研究了下是因为运算符两边没加空格. 错误示例:.content{width:calc(100%-50px) ...
随机推荐
- [tmux] Organize your terminal using tmux panes
Learn to organize your workspace using tmux. We'll create a new tmux session and learn how to create ...
- C# WebQQ协议群发机器人(一)
原创性申明 本文地址 http://blog.csdn.net/zhujunxxxxx/article/details/38931287 转载的话请注明出处. 之前我也写过一篇使用python来实现的 ...
- Tokumx vs Mongodb
Mongodb是一个文档型nosql数据库 採用C++编写 Mongo DB最大的优势在于全部的数据持久操作都无需开发者手动编写SQL语句,直接调用方法就能够轻松的实现CRUD操作. 非常多人觉得mo ...
- activiti自己定义流程之整合(五):启动流程时获取自己定义表单
流程定义部署之后,自然就是流程定义列表了,但和前一节一样的是,这里也是和之前单独的activiti没什么差别.因此也不多说.我们先看看列表页面以及相应的代码,然后在一步步说明点击启动button时怎样 ...
- 静态编译ltrace
ltrace可以跟踪进程的库函数调用,它会显现出哪个库函数被调用,而strace则是跟踪程序的每一个系统调用. 有时候只使用strace还是不够的,须要ltrace配合才干找出问题出在哪里. 假设在b ...
- 简单sql部分强化练习题
简单查询部分sql练习题 -- 选择部门30中的全部职工 select * from emp where deptno = 30; -- 列出全部业务员(CLERK)的姓名,编号,和部门编号 sele ...
- 带你轻松看源代码---AsyncTask(异步任务)
本文出自博客Vander丶CSDN博客,如需转载请标明出处,尊重原创谢谢 博客地址:http://blog.csdn.net/l540675759/article/details/62893318 写 ...
- linux服务器集群重复批量操作脚本实现
http://blog.csdn.net/flyinmind/article/details/8074863 在服务器集群的维护中,经常会遇到同样的操作重复执行很多遍的情况,“登录服务器->做 ...
- Eclipse使用技巧总结(六)
四十.增量查找 Ctrl + J : Ctrl + Shift + J: 四十一.快速跳到某行 Ctrl + L 四十二.快速比较不同 Window-->Preference___查找quick ...
- TstringBuilder Delphi2007版
2010中的StringBuilder对象用的比较爽快!于是稍作了一些修改(增加了几个函数和属性)然后移植到D2007中来使用了!效果不错,共享一下! unit DxStringBuilder; in ...