面试中常问的自适应布局都有哪些？

题目：假设高度已知，请写出三栏布局，其中左栏，右栏宽度各为300px,中间自适应

1.浮动     2.绝对定位    3.flex布局    4.表格布局    5.网格布局

1. 浮动

左元素{
        float：left;
        width:300px;
        background:blue
}
右元素{
        flaot:right;
        width:300px;
        background:blue
}
中间元素{
        background:yellow
}

2. 绝对定位

左元素{
        left： 0；
        width:300px;
        background:blue
}
右元素{
        right: 0
        width:300px;
        background:blue
}
中间元素{
        left：300px;
        right: 300px;
        background:yllow;
}

3. flex布局

父元素{
       display: flex;
}
左子元素{
        width:300px;
        background:blue
}

右子元素{
        width:300px;
        background:blue
}

中间子元素{
        flex：1；
        background:yllow;
}

4. 表格布局

容器{  
       width：100%；
       heigth:  100%;
       display：table；
}
元素{display：table-cell}
元素1{
       width:300px;
       background-color:blue
}
元素2{
       background-color:blue
}
元素3{
       width:300px;
       background-color:blue
}

5. 网格布局

容器{          
       display： grid;           
       width:100%;          
       grid-template-rows:100px;    （高）        
       grid-template-cocumns:300px auto 300px
}

各布局的优缺点