CSS3表达式calc( )

第一次看到calc( )时，不太相信calc()是css中的部分。因为看其外表像个函数，但是CSS里为啥会有表达式我也不太清楚，偶然机会在网页里看到的，自己切片写自适应时尝试了一下，完美。接下来就和大家分享一下CSS表达式calc( )

calc( )我们可以把他理解为一个函数function。cale是英语单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元素的长度。比如在写自适应时候，就可以用cale( )给元素的border、margin、padding、font-size、width和定位等属性设置为动态值。就可以自动计算值了。

calc( )完全可以照我们小学学的加（+）、减（-）、乘（*）、除（/）一样来计算，也遵守四则运算，但是要自己带单位，如百分比、px、em、rem等单位，里边有“+”和“-”时，其前后必须要有空格，没有空格浏览器不会识别，也不会报错，有“*”和“/”时，其前后可以没有空格，但建议留有空格，一家人就要齐齐整整嘛。

举个栗子
文案设计的置顶小图标居右却不靠边，给了position:fixed以后，这个小图标就会相对于浏览器窗口定位，当窗口在1200px和1920px之间时，小图标距离右边的距离是定死的，就会遮挡内容部分。当然也可以用js给小图标定位，获取右侧导航条位置，随之下移，这样就要先获取屏幕高度，然后到一定高度小图标出现，还要获取导航条位置，让小图标随导航条下移，喏，要是换做用cale( )就只需要一个表达式了，

看效果，在窗口为1371px和1801px时，返回顶部按钮依然在相同的位置。

浏览器对calc()的兼容性还算不错，在IE9+、FF4.0+、Chrome19+、Safari6+都得到较好支持，同样需要在其前面加上各浏览器厂商的识别符，不过可惜的是，移动端的浏览器还没仅有“firefox for android 14.0”支持，其他的全军覆没。
实际使用时，同样需要添加浏览器的前缀，

转载于:https://www.cnblogs.com/ss-wdp/p/10805398.html

CSS3表达式calc( )相关推荐

CSS的单位及css3的calc()及line-height百分比
说在前面的话阳历2014年已经离我们远去,2015年接踵而来.祝大家新年快乐!在新的一年,我将有新的蜕变!这是2015年的第一篇文章,写一篇关于css的单位的文章吧! 单位介绍说到css的单位,大 ...
CSS3运算 calc()函数是怎么实现计算
CSS3运算 calc()函数是怎么实现计算 CSS3 的 calc() 函数允许我们在属性值中执行数学计算操作.例如,我们可以使用 calc() 指定一个元素宽的固定像素值为多个数值的和. .foo ...
html 自适应单位vw,CSS单位em、rem、vh和vw等及CSS3的calc()以及line-height百分比
css单位我们常用的是px,也即是像素.随着网页开发自适应的要求,css3新增了许多单位,rem.vw和vh.vmin和vmax.ch和ex等. em 做前端的应该对em不陌生,不是什么罕见的单位,是 ...
CSS3使用calc() 计算高度和宽度 vh px
Viewport viewport:可视窗口,也就是浏览器. vw Viewport宽度, 1vw 等于viewport宽度的1% vh Viewport高度, 1vh 等于viewport高的的1% ...
CSS3 使用 calc() 计算高度 vh px
1.px 像素,我们在网页布局中一般都是用px. 2.百分比百分比一般宽泛的讲是相对于父元素,自适应网页布局越来越多,百分比也经常用到了. 3.Viewport viewport:可视窗口, ...
css3 的 calc()函数在布局中的使用----头部高度固定，页面正好占满一屏
最近项目遇到一个布局需求,头部高度固定,页面需要刚好占满一屏幕. 如下示意图: 方法:使用calc .wrap{position: relative;margin-left: 24px;margin- ...
在less中不能正常使用css3的calc属性的解决方法
在less中不能正常使用css3的calc属性的解决方法参考文章: (1)在less中不能正常使用css3的calc属性的解决方法 (2)https://www.cnblogs.com/zhaozh ...
CSS3属性calc函数（CSS3）
CSS3属性calc函数(CSS3) <!DOCTYPE html> <html lang="en"><head><meta charse ...
【uniapp】CSS3 的 calc() 函数使用表达式动态计算
前言 css3 中增加了 calc() 函数 calc() 函数语法:property: calc(expression) expression 表达式为: "+". " ...

CSS3表达式calc( )

CSS3表达式calc( )相关推荐

最新文章

热门文章