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”支持,其他的全军覆没。
实际使用时,同样需要添加浏览器的前缀,

CSS3表达式calc( )的更多相关文章

  1. CSS3的calc()使用

    CSS3的calc()使用 calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,用来指定元素的长度.比如说,你可以使用calc()给元素的border.margin.pad ...

  2. CSS的单位及css3的calc()及line-height百分比

    锚点:css中百分比减去固定元素 单位介绍 说到css的单位,大家应该首先想到的是px,也就是像素,我们在网页布局中一般都是用px,但是近年来自适应网页布局越来越多,em和百分比也经常用到了.然后随着 ...

  3. CSS3 使用 calc() 计算高度 vh px

    Viewport    viewport:可视窗口,也就是浏览器.    vw Viewport宽度, 1vw 等于viewport宽度的1%    vh Viewport高度, 1vh 等于view ...

  4. CSS的单位 及 css3的calc() 及 line-height 百分比

    CSS的单位及css3的calc()及line-height百分比 摘自:http://www.haorooms.com/post/css_unit_calc 单位介绍 说到css的单位,大家应该首先 ...

  5. css3的calc() css3的百分比减宽,减高,加,乘,除,适合用于后台的排版定位

    css3的calc() css3的百分比减宽,减高,加,乘,除,适合用于后台的排版定位 浏览器支持IE9+.FF4.0+.Chrome19+.Safari6+ calc()语法非常简单,就像我们小时候 ...

  6. [转]CSS3 使用 calc() 计算高度 vh px

    1.px 像素,我们在网页布局中一般都是用px. 2.百分比 百分比一般宽泛的讲是相对于父元素,自适应网页布局越来越多,百分比也经常用到了. 3.Viewport    viewport:可视窗口,也 ...

  7. 理解CSS中的数学表达式calc()

    前面的话 数学表达式calc()是CSS中的函数,主要用于数学运算.使用calc()为页面元素布局提供了便利和新的思路.本文将介绍calc()的相关内容 定义 数学表达式calc()是calculat ...

  8. css3 的 calc()函数在布局中的使用----头部高度固定,页面正好占满一屏

    最近项目遇到一个布局需求,头部高度固定,页面需要刚好占满一屏幕. 如下示意图: 方法:使用calc .wrap{ position: relative; margin-left: 24px; marg ...

  9. CSS当中数学表达式calc

    CSS当中数学表达式calc  数学表达式calc()是CSS中的函数,主要用于数学运算.使用calc()为页面元素布局提供了便利和新的思路.本文将介绍calc()的相关内容 定义 数学表达式calc ...

随机推荐

  1. 集训队日常训练20180513-DIV2

    A.2176 给一个字符串s,问距离为D的字母对是否存在相同. 模拟. #include<bits/stdc++.h> using namespace std; int main() { ...

  2. 洛谷P2426 删数 [2017年4月计划 动态规划12]

    P2426 删数 题目描述 有N个不同的正整数数x1, x2, ... xN 排成一排,我们可以从左边或右边去掉连续的i(1≤i≤n)个数(只能从两边删除数),剩下N-i个数,再把剩下的数按以上操作处 ...

  3. tp5.1 本地正常, 线上route.php不起作用的问题

    由于本项目 的.htaccess文件是放在根目录的, 上传没有覆盖,重新编辑 <IfModule mod_rewrite.c> Options +FollowSymlinks -Multi ...

  4. eclipse修改中文注释的字体(亲测有用!)

    Window –> Preferences –> General –> Appearance –> Colors and Fonts –> Basic –> Tex ...

  5. 【JZOJ3601】【广州市选2014】Tree(tree)

    ╰( ̄▽ ̄)╭ 每个非叶子节点,其左右子树叶子节点的权值之和相等.我们称这种二叉树叫平衡二叉树. 我们将一棵平衡二叉树叶子节点的权值从左到右列出来,假如这个权值序列是另一个序列A的子序列,我们称这棵平 ...

  6. 廖雪峰Python总结3

    1.模块简介 为了编写可维护的代码,我们把很多函数分组,分别放到不同的文件中,这样每个文件包含的代码相对来说就比较少.一个.py文件就称之为一个模块(Module). 使用模块的好处: 提高了代码的可 ...

  7. Hdu 4143

    题目链接 好久没有在Hdu水题了,于是乎在无聊之际还是找了一道水题, 但是看完题目之后,明显是个数学题,我还是感觉有点打触的. 因为一直对数学题没有多大信心. 分析了一下,Y^2 = X^2 + n ...

  8. LeetCode141 Linked List Cycle. LeetCode142 Linked List Cycle II

    链表相关题 141. Linked List Cycle Given a linked list, determine if it has a cycle in it. Follow up:Can y ...

  9. Spring_Bean的作用域---和使用外部属性文件

    <!-- 使用 bean的scope属性来配置bean的作用域 singleton:默认值.容器初始时创建bean实例,在整个容器的生命周期内只创建这一个bean单例 prototype:原型的 ...

  10. Java版阿里云通信短信发送API接口实例(新)

    阿里云通信(原名阿里大于)的短信服务(Short Message Service)是阿里云为用户提供的一种通信服务的能力,支持快速发送短信验证码.短信通知等. 完美支撑双11期间2亿用户,发送6亿短信 ...