css-常用布局-基础的五种

三栏布局：

如果不考虑高度，即用内容填充高度的话，是可以用inline-block和calc（）实现布局的。但适用性差。
float和position的兼容性好，但float会用到calc属性影响兼容性。
calc和flex的兼容性都有一定问题。
grid是未来的发展趋势所以兼容性拉跨也很合理吧，哈哈

body 
<body>
    <div class="out">
        <div class="item left"></div>
        <div class="item mid"></div>
        <div class="item right"></div>
    </div>
</body>

float实现

点我查看代码 
        .item{
            float: left;
            height: 400px;
        }
        .left,.right{
            width: 200px;
            background-color: antiquewhite;
        }
        .mid{
            width: calc(100% - 400px);
            background-color: aqua;
        }

重点：使用了calc计算了中间宽度

absolute实现

点击查看代码 
        .out{
            position: relative;
        }
        .item{
            top:0;
            position: absolute;
            height: 400px;
        }
        .left{
            background-color:antiquewhite;
            width: 200px;
            left: 0;
        }
        .right{
            background-color: antiquewhite;
            width: 200px;
            right: 0;
        }
        .mid{
            width: calc(100% - 400px);
            left: 200px;
            background-color: aqua;
        }

重点：同样可使用calc计算宽度，但也可以通过ps的方法达到更好的兼容性
ps. mid也可以通过left：200px；right：200px实现

flex实现

点击查看代码 
        .out{
            display: flex;
            height: 400px;
        }
        .left,.right{
            width: 200px;
            background-color: antiquewhite;
        }
        .mid{
            flex:auto;
            background-color: aqua;
        }

用flex:auto实现自适应

table实现

点击查看代码 
        .out{
            display: table;
            height: 400px;
            width: 100%;
        }
        .item{
            display:table-cell;
        }
        .left,.right{
            width: 200px;
            background-color: antiquewhite;
        }
        .mid{
            width: calc(100% - 400px);
            background-color: aqua;
        }

用calc实现自适应

grid布局

点击查看代码 
        .out{
            display: grid;
            grid-template-rows: 400px;
            grid-template-columns: 200px auto 200px;
        }
        .left,.right{
            background-color: antiquewhite;
        }
        .mid{
            background-color: aqua;
        }

用grid-template-rows的auto属性实现自适应

参考

前端面试布局相关汇总--三栏布局·圣杯布局·双飞翼布局·瀑布流布局

posted @ 2022-10-24 19:22  badpear  阅读(85)  评论(0)    收藏  举报