最近在布局的时候遇到一个问题，在页面中的左侧是侧边栏，右边是内容区域，内容区域中有一个固定定位的标签页，在设置固定定位的标签设置宽度的时候应该是内容区域的宽度，而固定定位的时候相对于是窗口的宽度，所以转换为了当前窗口的宽度减去左侧的侧边栏的宽度

开始在网上查了查有个calc属性是可以写表达式的，但是自己使用的时候却没有效果，自己测试了半天才发现是写法的错误

width: calc（100% - 10px）;

在写的时候需要在运算符的左右都加上空格才能生效

css3中的calc的使用的更多相关文章

  1. CSS3中的calc()

    什么是calc()? calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能; MDN的解释为可以用在任何长度,数值,时间,角度,频率等处; /* property: calc ...

  2. Css3中的 calc()使用

    http://www.w3cplus.com/css3/how-to-use-css3-calc-function.html

  3. less中使用calc

    css3中可以使用calc()来实现自适应布局 例如:width:“calc(100%  - 25px)” width: calc(expression); ==> expression是一个表 ...

  4. 浏览器中使用calc不识别

    在使用css3中的calc运算函数时,发现浏览器不识别,当时代码是这样的 width:calc(100%-50px); 经过查询官网原来发现这里有个需要注意的地方就是在进行加减运算的时候,必须在运算符 ...

  5. CSS3中动画属性transform、transition 和 animation

    CSS3中和动画有关的属性有三个 transform.transition 和 animation.下面来一一说明:        transform   从字面来看transform的释义为改变,使 ...

  6. css3中的布局相关样式

    web页面中的布局是指在页面中如何对标题.导航栏.主要内容.脚注.表单等各种构成要素进行合理编辑.在css3之前,主要使用float属性或position属性进行页面中的简单布局,但是也存在一些缺点, ...

  7. css3中的制作动画小总结

    系列教程 CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation: Transform 在CSS3中transform主要包括以下几种:旋转rotate. ...

  8. 为什么CSS中的calc函数可能会不生效？

    前言 在早期如果想要对某一些样式进行动态计算,绝大多数的做法都是使用JavaScript来进行,当时的CSS在面对这种场景显得有点无能为力.但是,当CSS3中新增了calc函数时,面对这种场景,Jav ...

  9. CSS3中的动画效果记录

    今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...

随机推荐

  1. el-table 固定表头

    fixedTableHeaderMixin.js: /* 使用此mixin: 第一:需要在页面的el-table配置属性:ref="table" 和 :height="t ...

  2. SpringBoot开发mockserver及生成swagger接口文档

    通过springboot开发mock server,包含get及post接口,用于练习接口自动化及jmeter很方便 当然,也为后面jenkins持续集成做基础(开发push代码后  → jenkin ...

  3. 12-cmake语法-内部变量-系统信息

    系统信息 CMAKE_MAJOR_VERSION CMAKE 主版本号,比如 2.4.6 中的 2 CMAKE_MINOR_VERSION CMAKE 次版本号,比如 2.4.6 中的 4 CMAKE ...

  4. Scikit-learn Preprocessing 预处理

    本文主要是对照scikit-learn的preprocessing章节结合代码简单的回顾下预处理技术的几种方法,主要包括标准化.数据最大最小缩放处理.正则化.特征二值化和数据缺失值处理. 数学基础 均 ...

  5. 【oracle】decode函数

    DECODE(参数,值1,翻译值1,值2,翻译值2,...值n,翻译值n,缺省值) 值1:当参数=值1    翻译值1:想要得到的值 值2:当参数=值2 翻译值2:想要得到的值

  6. ZBX_TCP_READ() time out windows

    zabbix 客户端无法推送数据,日志显示在启动的时候ZBX_TCP_READ() time out windows, 场景:agent 到proxy的10051通,proxy到agnet的10050 ...

  7. three.js 加载STL文件

    注意: TrackballControls.js 和 TDSLoader.js 都引用了 three.module.js,特别注意引用的路径 比如: 直接代码咯 <!DOCTYPE html&g ...

  8. MYSQL：基于哈希的索引和基于树的索引有什么区别？

    B+树是一个平衡的多叉树.B+树从根节点到叶子节点的搜索效率基本相当,不会出现大幅波动. 哈希索引采用一定的哈希算法,把键值换成新的哈希值,检索时不需要类似B+树那样从根节点逐级查找,只需一次哈希算法 ...

  9. 洛谷 P1807 最长路_NOI导刊2010提高（07）题解

    相当与一个拓扑排序的模板题吧 蒟蒻的辛酸史 题目大意:给你一个有向无环图,让你求出1到n的最长路,如果没有路径,就输出-1 思路:一开始以为是一个很裸的拓扑排序 就不看题目,直接打了一遍拓扑排序 然后 ...

  10. 洛谷P1578 奶牛牧场（悬线法思想）

    题目 悬线法的思想--即扫描线的思想,每个矩阵必定是由两个障碍来构成左右边界或者上下边界. 如果此两个障碍组成了左右边界,枚举这两个障碍中途更新这两个障碍之间的矩阵上下边界,并且更新最大值. 考虑如何 ...