css3 中的calc用法

2024-05-19 12:45:07

定义与用法

calc() 函数用于动态计算长度值。

1.需要注意的是，运算符前后 都需要保留一个空格，例如：width: calc(100% - 10px)；
2.任何长度值都可以使用calc()函数进行计算；
3.calc()函数支持 “+”, “-“, “*”, “/” 运算；
4.calc()函数使用标准的数学运算优先级规则；
calc是css3中的计算，IE10+浏览器支持，IE9浏览器基本支持(不能用在background-position上)；

///防止不支持，可以加浏览器前缀.element {-moz-calc(expression);-webkit-calc(expression); -o-calc(expression);-ms-calc(expression);calc(expression);      }

下面转自http://caibaojian.com/css3-calc-vw.html

calc实现滚动条出现页面不跳动

100vw相对于浏览器的window.innerWidth，是浏览器的内部宽度，注意，滚动条宽度也计算在内！而100%是可用宽度，是不含滚动条的宽度。
于是，calc(100vw - 100%)就是浏览器滚动条的宽度大小（如果有，如果没有滚动条则是0）！左右都有一个滚动条宽度（或都是0）被占用，主体内容就可以永远居中浏览器啦，从而没有任何跳动！

.wrap-outer {padding-left: calc(100vw - 100%);
}
///或者下面这样
.wrap-outer {margin-left: calc(100vw - 100%);
}

测试连接http://www.zhangxinxu.com/study/201501/body-scrollbar-no-jump.html?utm_source=caibaojian.com

css3 中的calc用法相关推荐

CSS3中的calc()函数以及在less中的使用
1. calc()函数在CSS3中我们可以通过calc()函数来动态计算长度值,如: #div {width: calc(100% - 100px); } 它的语法是 calc(expression ...
css3中使用calc()计算宽高
calc()是什么? 是CSS3中新增的一个函数,calculate(计算)的缩写.用于动态计算宽/高,你可以使用calc()给元素的各个属性设置值[margin.border.padding.fon ...
css3中nth-child()的用法
nth-child(n)是css3中的一种选择器,它的作用是匹配属于其父元素的第n个元素,不论元素的类型.重点是"不论元素的类型这句话",好多人容易误解这句话. 现在提出一个需求, ...
CSS3中的calc( )属性
作用: calc() 函数用于动态计算长度值其实,calc()这个形式看起来就很容易让人想到Javascript里的函数,当然他不是js里的函数,但是他有着类似函数的功能,可以用来计算,括号里是一个 ...
css之calc,初探CSS3中的calc()功能
之前,我们想要实现一个完美的宽度自适应的输入框好麻烦,曾经也被作为对前端技术的一个挑战.类似的常见场景还有100%宽+边框的容器等.遇到这些情况,我们不得不分外小心,因为各个浏览器的表现可能不一致. ...
css3中的calc()
1.什么是calc()? calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,用来指定元素的长度.比如说,你可以使用calc()给元素的border.margin.padi ...
CSS3中使用calc()设置浏览器宽度和高度减去固定值的写法
设置宽度:width:calc(100vw - 123px); 说明:1.vw是width of view(port)的缩写: 2.100vw表示百分之百的视图宽度: 3.123px是需要减去的宽度: ...
CSS3中box-shadow的用法介绍
一般我们通过box-shadow来设置盒阴影,但是有些属性我们一般没有用到,这篇文章将对box-shadow属性进行逐个分析. 语法 CSS Code复制内容到剪贴板 E {box-shadow:in ...
css3中transform的用法
transform:rotate旋转deg #box1{ -moz-transform:rotate(10deg); -webkit-transform:rotate(10deg); } transf ...

最新文章

热门文章