calc()是css3的一个新增的功能,用来指定元素的长度。比如说,你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。calc()最大的好处就是用在流体布局上,可以通过calc()计算得到元素的宽度。

calc()语法:

加 (+)、减(-)、乘(*)、除(/),注意的是:乘数中至少要有一个是 <number> 类型的、被除数(/右面的数)必须是 <number> 类型的

calc()的运算规则
calc()使用通用的数学运算规则,但是也提供更智能的功能:

  1. 使用“+”、“-”、“*” 和 “/”四则运算;
  2. 可以使用百分比、px、em、rem等单位;
  3. 可以混合使用各种单位进行计算;
  4. 表达式中有“+”和“-”时,其前后必须要有空格,如”widht: calc(100% + 5px)”;
  5. 表达式中有“*”和“/”时,其前后可以没有空格,但建议留有空格。

calc()在less文件中的坑:

在Less里加入calc时确发现了有点问题,我在Less中这么写:

div {width : calc(100% - 250px);}

结果Less把这个当成运算式去执行了,结果给我解析成这样:

div{width: calc(-150%);}

顿时懵逼,后来各种查度娘,才知道是由于less的计算方式跟calc方法有重叠,两者在一起有冲突,于是,在Less中把calc的写法改写成下面这样:

div {width: calc(~"100% - 250px");}

顺利通过编译

而当250px是一个变量的时候,要这样写:

div {
  @diff : 250px;
  width : calc(~"100% - @{diff}");
  }

搞定!

calc() 计算CSS属性值的更多相关文章

  1. JS中使用document.defaultView.getComputedStyle()、currentStyle()方法获取CSS属性值

    在对网页进行调试的过程中,经常会用到js来获取元素的CSS样式,方法有很多很多,现在仅把我经常用的方法总结如: 1. obj.style:这个方法只能JS只能获取写在html标签中的写在style属性 ...

  2. CSS属性值一览

    牢记内联式>嵌入式(嵌入式中设置各种文字字体.大小.位置.颜色.外距.内距最好用选择器)>外部式(外联式)的使用 属性和属性值(点击可展开) font-family(字体) Microso ...

  3. css属性值语法解读

    //margin 形式语法: [ <length> | <percentage> | auto ]{1,4} //合法实例: margin: style /*单值语法 */ 举 ...

  4. js修改css属性值

    推荐用dom.style.setProperty('属性','属性值'); 例如: $("#id")[0].style.setProperty('margin-top','1px' ...

  5. javascript之复习(css属性值的计算)

    js取div的宽高咋办,css有content-box,border-box,padding-box,表现又不一样.好在有个offsetWidth, <style type="text ...

  6. css 属性值 calc (目前只了解部分)

    移动端页面,有如下图的需求: 实现效果: 实现 css 代码: .list {/*父级*/ border: 1px solid #E9EAEA; border-radius: 2px; backgro ...

  7. JS使用getComputedStyle()方法获取CSS属性值

    在对网页进行调试的过程中,经常会用到js来获取元素的CSS样式,方法有很多很多,现在仅把我经常用的方法总结如下: 1. obj.style:这个方法只能JS只能获取写在html标签中的写在style属 ...

  8. JS 获取CSS属性值

    obj: 元素对象 attribute: 属性 返回值:该对象这个属性的值 function getDefaultStyle(obj,attribute){ // 返回最终样式函数,兼容IE和DOM, ...

  9. 在不同的浏览器下FORM及它的小伙伴们默认样式的CSS属性值是不全然一致

    我们一般在定义CSS样式的时候都须要定义去掉HTML标签默认样式的CSS,原因是在不同的浏览器以下它们的表现出来的默认样式不全然一致,我们要保证在不同的浏览器下它们能正常显示出我们想要达到的预期效果, ...

随机推荐

  1. alsa和oss声音系统比较

    OSS(Open Sound System) OSS的含义为,Open Sound System,是unix平台上一个统一的音频接口.以前,每个Unix厂商都会提供一个自己专有的API,用来处理音频. ...

  2. 2款JS脚本判断手机浏览器跳转WAP手机网站

    随着移动设备的普及,企业的网络宣传已经不能局限在PC端,而需要同时在移动端有所建树.对于公司网站来说,以前都是做的PC端的,当然手机等移动端也可以访问,但是用户体验肯定不如完全适合的手机端来的方便.我 ...

  3. Asp与Asp.Net

    1.Asp是什么? ASP是动态服务器页面(Active Server Page)的英文缩写.是微软公司开发的代替CGI脚本程序的一种应用,它可以与数据库和其它程序进行交互,是一种简单.方便的编程工具 ...

  4. [SoapUI] Jenkins 配置

    cd %WORKSPACE% cmd /c call "%SOAPUI_PRO_HOME%\bin\testrunner.bat" -a -j -PprojectPath=&quo ...

  5. bzoj1025 [SCOI2009]游戏——因数DP

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1025 这篇博客写得真好呢:https://www.cnblogs.com/phile/p/4 ...

  6. RDA TDT & TOT

    首先看下面的TS PSI分析图: 注意:TOT UTC与TDT是一致的 TDT下的时间为: UTC+手动TIMEZONE TOT下的时间为: UTC+解析的time_offset time_offes ...

  7. qunar面试题及一位大牛的解答

    本文摘自:http://www.cnblogs.com/jarson-7426/p/3989208.html 1.写一个函数padstare(string str1,min_lenthg,string ...

  8. 【旧文章搬运】无Device的驱动如何通信

    原文发表于百度空间,2009-07-14========================================================================== 标准的驱动 ...

  9. 量子纠缠1——量子比特、Bell态、EPR佯谬

    量子纠缠是量子物理的基本性质,他描述的是:当几个粒子相互作用后,无法单独描述各个粒子的性质,只能整体描述,本文主要介绍两个量子比特之间的纠缠. 量子比特(Qubit) 量子比特是量子计算的基本单位,就 ...

  10. Codeforces - 1118D2 - Coffee and Coursework (Hard Version) - 二分

    https://codeforces.com/problemset/problem/1118/D2 也是很好想的一个二分啦. 验证m的可行性的时候,肯定是把最多咖啡因的咖啡先尽可能平均分到每一天,因为 ...