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

开始在网上查了查有个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. 网络编程 TCP协议:三次握手,四次回收,反馈机制 socket套接字通信 粘包问题与解决方法

    TCP协议:传输协议,基于端口工作 三次握手,四次挥手 TCP协议建立双向通道. 三次握手, 建连接: 1:客户端向服务端发送建立连接的请求 2:服务端返回收到请求的信息给客户端,并且发送往客户端建立 ...

  2. reactnative遇到的问题总结

    1.View中出现文本报错,View等标签中不能出现字符串文本,字符串文本需要包在Text中,遇到如下错误 下面是问题代码: let rightTitle = this.props.rightTitl ...

  3. jenkins pipeline之stash/unstash

    在使用jenkins时,经常会问到文件怎么存储? 正好jenkins有一个stash的功能,下面简单介绍下: 先看看官方是怎么解释的: stash: Stash some files to be us ...

  4. ubuntu1604系统初始化

    1.初始化网络配置 1.1.创建工作目录 生产环境下必须有个固定的目录存放一些安装软件和调试工具, 否则每个管理员都随意存放软件工具,服务器的环境可以想而知 mkdir -p /opt/{tools, ...

  5. 【java】String与Date转换

    String转Date            String date="";            SimpleDateFormat format=new SimpleDateFo ...

  6. 第05组 Beta冲刺(4/4)

    第05组 Beta冲刺(4/4) 队名:天码行空 组长博客连接 作业博客连接 团队燃尽图(共享): GitHub当日代码/文档签入记录展示(共享): 组员情况: 组员1:卢欢(组长) 过去两天完成了哪 ...

  7. git blame （10）

    git blame system_server.c 每一行提交的sha ,作者,提交的日期及提交的信息

  8. three.js 设置透明度

    原文:https://www.cnblogs.com/amy2011/p/6148736.html 材质: 材质就像物体的皮肤,决定了几何体的外表,例如是否像草地/金属,是否透明,是否显示线框等 Th ...

  9. selenium--单选框和复选框的操作

    单选框操作 from selenium import webdriver import unittest class Test_radio(unittest.TestCase): def test_S ...

  10. C++中静态成员变量要在类外部再定义或初始化的原因

    C++中静态成员变量要在类外部再定义或初始化,否则会产生错误. class A { public: static int a; }; int A::a=0; 为什么要在类的外部进行定义的原因: 1. ...