两栏布局 三栏布局

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

        .box1{
            background-color: yellow;
            width: 300px;
            height: 100%;
            float: left;
        }
        .box2{
            height: 100%;
            background-color: red;
            margin-left: 300px;
        }

calc()函数

用于动态计算长度值

需注意，运算符前后都需要保留一个空格，例如:width:clac(100% - 10px)

任何长度的值都可以用calc()函数进行计算；

calc()函数使用标准的数学运算优先级规则；

        html,body{
            height: 100%;
        }
    .box1{
        background-color: yellow;
        width: 300px;
        height: 100%;
        float: left;
    }
    .box2{
        width:clac(100% - 300px)
        height: 100%;
        background-color: red;
        margin-left: 300px;
        float:left
    }

三栏布局

*{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
        }
        div{
            float: left;
        }
        .box2{
            width:calc(100% - 200px - 200px) ;
            height: 100%;
            
        }
        .box1,.box3{
            width: 200px;
            height: 100%;
            background-color: red;
        }