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

开始在网上查了查有个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. Elasticsearch 报错：Fielddata is disabled on text fields by default. Set `fielddata=true` on [`your_field_name`] in order to load fielddata in memory by uninverting the inverted index.

    Elasticsearch 报错: Fielddata is disabled on text fields by default. Set `fielddata=true` on [`your_fi ...

  2. JMeter【第四篇】参数化

    概念 参数化的原因,并不是网上说的真实模拟不同用户,真实反应服务器性能,而是: 数据唯一性(比如注册名不能一样) 避免数据库查询缓存 如何避免参数化: 去掉唯一性校验的约束 关闭数据库的查询缓存,my ...

  3. idea每次新建项目的默认路径

    idea每次新建项目的默认路径 每次新建项目的默认路径是上一次新建项目所在的文件夹.第一次需要手动切换.

  4. Linux中的关机操作

    shutdown -h now //马上停止服务进行关机 shutdown -h  12:00 .//在12点后进行关机 shutdown -h +10   //在10分钟后进行关机 shutdown ...

  5. 【java异常】【redis】ERR Client sent AUTH, but no password is set

    项目中使用jedis或redisson连接redis时,如果redis没有密码,但在配置文件中写为 spring: redis: database: 0 host: 127.0.0.1 passwor ...

  6. Nacos

    欢迎来到 Nacos 的世界! Nacos 致力于帮助您发现.配置和管理微服务.Nacos 提供了一组简单易用的特性集,帮助您快速实现动态服务发现.服务配置.服务元数据及流量管理. Nacos 帮助您 ...

  7. Layui 必填验证

    lay-verify="required"

  8. C语言博客作业4——数组

    0.展示PTA总分 一维数组 二维数组 字符数组 1.本章学习总结 1.1学习内容总结 一维数组知识点: 无论是对一维数组还是二维数组进行应用时,我们对其下标的应用十分广泛. 1:一维数组的输入和遍历 ...

  9. nmap 速查手册

     0x00:说明 只是一个快速查询手册,理论的东西都没有补充,欢迎大家积极在评论区补充自己常用的参数,O(∩_∩)O 0x01:nmap功能介绍 1.主机存活检测2.端口探测3.服务识别4.操作系统识 ...

  10. Unittest 类方法

    import unittest,time from selenium import webdriver class TestClass(unittest.TestCase): @classmethod ...