CSS经典多栏布局（多列自适应布局、等高布局、圣杯布局、双飞翼布局）

一、多列自适应布局

自适应: 盒子宽度随着屏幕宽度发生变化 百分比

1:两列自适应布局

要求:左侧盒子固定,右侧盒子100% 左侧盒子加左浮动属性 ===>浮动元素会覆盖标准盒子

2: 三列自适应布局

左右两侧固定宽度,中间盒子自适应

技术点: 负外边距 margin-left:-px + 相对定位 (left-,right-)+ 浮动并排

二、等高布局

height:auto时的现象

height:auto 全部都是内容撑开

每一列盒子高度同时变化,以最高的那列为基准 整个盒子的高度应该取决于最高的那列

等高布局

伪等高 —>内外边距相消法

<style>
    * {
        padding: 0;
        margin: 0;
    }
    .c {
        overflow: hidden;

    }
    .col1 {
        width: 30%;
        height: 400px;
        background-color: yellow;
        float: left;
        padding-bottom: 9999px;
        margin-bottom: -9999px;
    }
    .col2 {
        width: 40%;
        height: 300px;
        background-color: red;
        float: left;
        padding-bottom: 9999px;
        margin-bottom: -9999px;
    }
    .col3 {
        width: 30%;
        height: 500px;
        background-color: palegoldenrod;
        float: left;
        padding-bottom: 9999px;
        margin-bottom: -9999px;
    }
    
    
    </style>
&l