在less或者scss中 calc(100% -4rem) 等带单位混合运算会被less解析忽略单位，全部按照百分比计算，此例中的计算被less编译成calc(96%)，

解决办法：

width:("calc(100% - 4rem)"); 或者  width:calc(~"100% - 4rem");本人更倾向于使用后者。

css篇-less,scss 用calc问题的更多相关文章

  1. CSS篇（上）

    紧接着HTML篇的CSS篇开啦,老铁们快来围观... 1.介绍一下标准的CSS盒子模型?低版本IE的盒子模型有什么不同? 1>有两种:IE盒子模型      W3C盒子模型 2>盒模型:内 ...

  2. 前端面试题总结（二）CSS篇

    前端面试题总结(二)CSS篇 一.link和@import的区别? link属于HTML标签,可以引入出css以外的事务,如RSS,而@import是css提供的,只能加载css文件. link会在页 ...

  3. BAT及各大互联网公司2014前端笔试面试题--Html,Css篇

    很多面试题是我自己面试BAT亲身经历碰到的.整理分享出来希望更多的前端er共同进步吧,不仅适用于求职者,对于巩固复习前端基础更是大有裨益. 而更多的题目是我一路以来收集的,也有往年的,答案不确保一定正 ...

  4. 面试题2：BAT及各大互联网公司2014前端笔试面试题：HTML/CSS篇

    BAT及各大互联网公司2014前端笔试面试题:HTML/CSS篇 Html篇: 1.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? IE: trident内核 Firefox:gecko内 ...

  5. BAT及各大互联网公司前端笔试面试题--Html,Css篇

    注意 转载须保留原文链接(http://www.cnblogs.com/wzhiq896/p/5931347.html )作者:wangwen896 整理分享出来希望更多的前端er共同进步吧,不仅适用 ...

  6. 前端编码规范（4）—— CSS 和 Sass (SCSS) 规范

    CSS and Sass (SCSS) style rules ID and class naming ID和class(类)名总是使用可以反应元素目的和用途的名称,或其他通用名称.代替表象和晦涩难懂 ...

  7. 高质量代码之HTML、CSS篇

    HTML篇 使用语义化标签<strong><fieldset><legend><ul>等等,少用<div><span> 判断网页 ...

  8. BAT及各大互联网公司2014前端笔试面试题：HTML/CSS篇

    BAT及各大互联网公司2014前端笔试面试题:HTML/CSS篇 2014/08/03 · Web前端, 开发 · CSS, HTML, 技术面试 分享到: 188 MongoDB集群之分片技术应用 ...

  9. (转)BAT及各大互联网公司2014前端笔试面试题--Html,Css篇

    BAT及各大互联网公司2014前端笔试面试题--Html,Css篇   很多面试题是我自己面试BAT亲身经历碰到的.整理分享出来希望更多的前端er共同进步吧,不仅适用于求职者,对于巩固复习前端基础更是 ...

随机推荐

  1. 【GIS】Vue修改图层透明度

    1.添加透明度控制条 <input id="slider" type="range" min="0" max="1" ...

  2. chromedriver与chrome最新版本对应表

    如果需要看到最新版的chromedriver和chrome版本对应问题,点击http://npm.taobao.org/mirrors/chromedriver/,点击最新版本的chromedrive ...

  3. ubuntu-16.04更好软件源

    author: headsen chen date:2019-03-06  14:01:07 1,修改软件源文件成如下的清华大学的源(亲测可用) root@ubuntu:/var/lib/apt/li ...

  4. Ubuntu 配置vsftpd实现FTP服务器

    0.vsftpd是啥玩意 都不知道安装了个啥东西,那就没意思了,所以先去了解下什么是vsftpd.vsftpd意思为“very secure FTP daemon(非常安全的FTP进程)”,当然只有更 ...

  5. Slapper帮助Dapper实现一对多

    Dapper的Query的方法提供了多个泛型重载可以帮助我们实现导航属性的查询 1对1 public class Employees4List { public int Id { get; set; ...

  6. Writable序列化

    序列化:将内存中的对象 转换成字节序列以便于存储在磁盘上或者用于网络传输. 反序列化:将磁盘或者从网络中接受到的字节序列,装换成内存中的对象. 自定义bean对象(普通java对象)要想序列化传输,必 ...

  7. Chrome浏览器如何调试移动端网页信息

    Chrome浏览器如何调试移动端网页信息 2017年08月12日 12:42:20 阅读数:835 最近在弄项目,用WebView加载一个页面,想追踪页面中一个按钮的点击事件.这个可能就需要调试这个页 ...

  8. Shell实现判断进程是否存在并重新启动脚本

    Shell实现判断进程是否存在并重新启动脚本 - superbfly的专栏 - CSDN博客 https://blog.csdn.net/superbfly/article/details/52513 ...

  9. php之运算符

    运算符优先级相同,运算符的结合方向决定了该如何运算, 一.运算符优先级 组合方向 运算符 附加信息 无 clone new clone和new 左 [ array 右 ** 算术运算符 右 ++ -- ...

  10. mysql中建立索引的一些原则

    1.先存数据,再建索引 有索引的好处是搜索比较快但是在有索引的前提下进行插入.更新操作会很慢 2.不要对规模小的数据表建立索引,数据量超过300的表应该有索引:对于规模小的数据表建立索引 不仅不会提高 ...