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

开始在网上查了查有个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. HashMap、HashTable 区别

    区别项 HashMap HashTable 继承和实现 public class HashMap<K,V> extends AbstractMap<K,V> implement ...

  2. PHP 多个字段自增或者自减

    //自增$res=Db::name('accessories') ->where('id',$req['id']) ->inc('number',$req['number']) -> ...

  3. 前端 / JavaScript 导出PDF的实践

    1.库:jspdf,自己定义一个高宽,如A4的210mm×297mm 2.让设计给背景图(包括:页眉页脚),水印图(背景透明,高宽和你的PDF单页一致)以及很多,能设计给的设计要给,因为在pdf上,排 ...

  4. cocos2dx+KinectV2 体感游戏之微信打飞机

    https://download.csdn.net/download/qq_34609108/10038417 https://blog.csdn.net/qq_34609108/article/de ...

  5. OpenCV 学习笔记（15）openc解帧视频

    1 修改读取视频的地址 2 修改保存图片序列的路径 String videopath = "F:/dongdong/0tool/3D/2模型/相机阵列/1_12cam亿级相机/数据/giga ...

  6. Numpy | 23 文件读写

    Numpy 可以读写磁盘上的文本数据或二进制数据. NumPy 为 ndarray 对象引入了一个简单的文件格式:npy. npy 文件用于存储重建 ndarray 所需的数据.图形.dtype 和其 ...

  7. 踩iviewui中Tabs 标签页数据绑定坑

    今天小颖要实现点击Tabs 标签页中每个标签,并动态获取当前点击的标签值. 一句话说不清楚,那就看动态图吧 小颖一开始看官网写的代码是: <template> <Tabs :valu ...

  8. Spring Boot 知识笔记（创建maven项目、HTTP接口）

    一.使用Maven手工创建SpringBoot应用(IDEA) 1.  点击File——New——Project——Maven——Next,填写相关信息,创建项目. 2.  在pom.xml中添加相关 ...

  9. Python UDP小程序

    为了做UDP的测试,采用了nc和Python的服务器端. nc的安装和使用: yum install -y nc nc -vuz Python的UDP服务器端小程序: # -*- coding: UT ...

  10. sql实现MD5加密

    select substring(sys.fn_sqlvarbasetostr(HashBytes('MD5','test')),3,32)