1. CSS 基础

  2. 取值单位

  3. 外观样式

  4. 布局样式

  5. 动画样式

  6. 工具与规范

  7. 实例练习

calc 函数可以在设定属性值时执行一些基本的运算,有以下运算符:

  • + :加
  • - :减
  • * :乘
  • / :除

$$warning

运算符前后应该有空格,不然 calc(20% -10px) 中会把 -10px 解析成负值,导致属性值失效。

$$

以下代码演示了一个侧边栏(菜单栏)宽度固定,内容区宽度占满剩下区域的实例。侧边栏设定了 100px, 而内容区用 calc(100% - 100px) 保证了自身宽度占满剩下的区域,而不论父元素的宽度是多少。

<div class="container">
    <span class="side">侧边栏</span><span class="content">内容区</span>
</div>
<style>
    .container {
        height: 200px;
        color: white;
        font-size: 26px;
    }
    .side {
        display: inline-block;
        width: 100px;
        height: 100%;
        background-color: teal;
    }
    .content {
        display: inline-block;
        width: calc(100% - 100px);
        height: 100%;
        background-color: pink;
    }
</style>

$$demo

<div class="container"> <span class="side">侧边栏</span><span class="content">内容区</span> </div> <style> .container { height: 200px; color: white; font-size: 26px; } .side { display: inline-block; width: 100px; height: 100%; background-color: teal; } .content { display: inline-block; width: calc(100% - 100px); height: 100%; background-color: pink; } </style>

$$