做一个懒人----CSS之calc()
2017-11-13 17:49
127 查看
大家在写代码遇到要计算宽度、高度时一定很烦躁吧,每次都要去计算,但是CSS有一个强大的东西能够帮助我们做一个”懒人“,那就是calc()函数。
在上面这个简单的例子中,我们可以得到的结果是div位于浏览器中央(这得益于margin:0 auto;),宽度为浏览器宽度减去100px,这就是calc()的作用,这样设置的好处就是会根据当前浏览器的宽度自动减去100px,这样我们就不用去花太多的心思去计算到底应该应什么样的宽度。
看上述代码会发现-webkit-calc(),这是针对不同的浏览器要使用不同的写法
chrome : -webkit-calc(expression)
Firefox : -moz-calc(expression)
通用 : calc(expression)
加号和减号运算符之间必须用空格分隔;
函数名和括号之间不可有空格;
也就是说,calc函数是提供基础运算的函数,我们在这上面可以做很多事情。
- calc()语法:
calc(expression).test{ width:-webkit-calc(100% - 100px); margin:0 auto; } <body> <div class="test"> <p>Hello World!</p> </div> </body>
在上面这个简单的例子中,我们可以得到的结果是div位于浏览器中央(这得益于margin:0 auto;),宽度为浏览器宽度减去100px,这就是calc()的作用,这样设置的好处就是会根据当前浏览器的宽度自动减去100px,这样我们就不用去花太多的心思去计算到底应该应什么样的宽度。
看上述代码会发现-webkit-calc(),这是针对不同的浏览器要使用不同的写法
chrome : -webkit-calc(expression)
Firefox : -moz-calc(expression)
通用 : calc(expression)
-calc()注意事项:
记得第一次写calc()的时候好像不起作用,当时检查了很多遍感觉都是对的,但是就是没有效果,所以很是郁闷,后来发现就是一个空格的问题,所以大家在用calc的时候一定要注意下面的情况:加号和减号运算符之间必须用空格分隔;
clac(100% - 100px)
函数名和括号之间不可有空格;
calc (100% - 100px)
也就是说,calc函数是提供基础运算的函数,我们在这上面可以做很多事情。
相关文章推荐
- CSS 多类选择器一个class值包含一个词列表,或分开包含时的选择
- 用css控制一个DIV画图标。
- 看css发现一个pointer-events:none;的东西
- css嵌套带来的一个问题
- 一个简单又不简单的Css设计实例
- 一个静态页面效仿1(div+css)
- JAWR【一个java项目的javascript和CSS集成和压缩工具】
- 一个不错的JS+CSS选项卡菜单[收藏]
- 一个简单css例子
- 一个关于CSS的小问题
- asp.net 多个css文件内容自动放到一个文件中
- 【Css】一个简单的图片库
- css如何在一个工具条中定义向左(或向右)靠的button
- div+css 让一个小div在另一个大div里面 垂直居中
- CSS中一个冒号和两个冒号之间区别
- 推荐一个Android开发懒人库 -- ButterKnife
- css控制一个div在其父级的div垂直居中显示
- 大神写的一个纯CSS圆角框,膜拜!(支持IE9一下的低版本)
- 用jQuery创建一个可编辑的SELECT下拉控件(HTML/CSS)
- 手机版和网页版公用一个页面的方法css