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

开始在网上查了查有个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. rf增加产品的例子

    Open Browser http://xxx.xxx.xxx.xxx:1000/portal/login/init.htm gcMaximize Browser Window sleep 2 #Ge ...

  2. excel隔行选中内容如何操作

    查看log日志是站长经常要做的事,从日志中可以发现很多问题,spider最近有没来爬,爬了哪些url,哪些页面不存在了等等,这些都可以看得到.然后你要根据不同的情况采取相应的措施.ytkah喜欢把这些 ...

  3. Python实现终端FTP文件传输

    实现终端FTP文件传输 代码结构: .├── client.py├── readme.txt└── server.py 运行截图: readme.txt tftp文件服务器 项目功能: * 客户端有简 ...

  4. ACE在Ubuntu下的安装和编译

    之前写了很多linux下的底层网络API的demo,这些demo可用于了解底层的网络通信过程,但是想做出好的服务器用于实际业务还是非常困难的,需要大量的代码实现,移植性也非常差,想要写出高性能架构的服 ...

  5. 洛谷P1894 [USACO4.2]完美的牛栏The Perfect Stall题解

    题目 二分图最大匹配问题 cow数组标现在牛栏里的牛是几号牛 每次寻找都要清空vis数组 如果可行有两种情况 1.这个牛栏里没有牛 2.这个牛栏里的牛可以到别的牛栏去 根据此递归即可 Code: #i ...

  6. ECMAScript6之Class

    1.Class的基本语法 1.1简介 基本上,ES6 的class可以看作只是一个语法糖,它的绝大部分功能,ES5 都可以做到,新的class写法只是让对象原型的写法更加清晰.更像面向对象编程的语法而 ...

  7. Python【每日一问】30

    问: [基础题]:一个足球队在寻找年龄在10岁到12岁的小女孩(包括10岁和12岁)加入.编写一个程序,询问用户的性别(m表示男性,f表示女性)和年龄,然后显示一条消息指出这个人是否可以加入球队,询问 ...

  8. 阿里云配置DDoS高防

  9. AntDesign vue学习笔记（八）Table服务端分页使用

    本文是AntDesign后端分页方法 1.设置pagination <a-table :columns="columns" :dataSource="data&qu ...

  10. SQL Server 中获取所有的用户表、用户视图的信息

    直接贴代码了: 用户表: SELECT s.Name,Convert(varchar(max),tbp.value) as Description FROM sysobjects s AND (tbp ...