【HTML+CSS 】计算属性

计算属性

💡在页面布局时（例如两栏布局、三栏布局）常常会用到宽高自适应，这时就可以使用calc（）函数经常宽高的自动计算，达到自适应的效果。

• 用于动态计算数值
  • calc(100% - 200px)运算符符号两边必须有空格

两栏布局案例

上下布局\左右布局适用于后台管理系统的布局

<style>
        /* 重置 */
        * {
            padding: 0;
            margin: 0;
        }
        /* 高度自适应 */
        html,
        body {
            height: 100%;
        }
        /* 左边导航栏 */
        .left{
            width: 200px;
            height: 100%;
            background-color: pink;
            float: left;
        }
        /* 右边主题区域 */
        .right{
            width: calc(100% - 200px);
            height: 100%;
            float: left;
            background-color: skyblue;
        }
</style>
  <div class="left"></div>
  <div class="right"></div>

💡执行结果截图

三栏布局(圣杯布局)案例

<style>
        * {
            padding: 0;
            margin: 0;
        }
        html,
        body {
            height: 100%;
        }


        .top{
            /* width: 100%; */
            height: 100px;
            background-color: pink;
        }
        .main{
            /* width: 100%; */
            height: calc(100% - 100px - 100px);
            background-color: skyblue;
        }
        /* 左边导航栏 */
        .left{
            width: 200px;
            height: 100%;
            background-color: green;
            float: left;
        }
        /* 右边导航 */
        .right{
            width: 200px;
            height: 100%;
            background-color: orange;
            float: right;
        }
        /* 中间主题部分 */
        .center{
            width: calc(100% - 400px);
            height: 100%;
            background-color: red;
            float: left;
        }
        /* 底部 */
        .foot{
            height: 100px;
            background-color: black;
        }
 </style>
    <div class="top"></div>
    <div class="main">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center"></div>
    </div>
    <div class="foot"></div>

💡执行结果截图