页面布局的总结

Posted 2020-10-04

众所周知，前端主要由3部分组成，css、js、以及html标签。所以要掌握好前端，这三者是必须相辅相成，缺一不可。

今天主要分享一下在开发过程中遇到的关于页面布局这个问题。

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

---

这里有5种方式解决，来解决这个情况。

第一种：通过float方式

html:

<div class="content">
     <div class="left fl"></div>
    <div class="right fr"></div>
    <div class="main"></div>
</div>

css:

        .content{
            height: 200px;
            width: 100%;
        }
        .content div{
            border: 1px solid red;
            height: 100%;
        }
        .content .left,.content .right{
            width: 200px;
        }
        .fl{
            float: left;
        }
        .fr{
            float: right;
        }

第二种：通过position定位的方式

html:

<div class="content">
    <div class="left position_l">左边</div>
    <div class="main position_center">中</div>
    <div class="right position_r">右</div>
</div>

css:

        .content{
            height: 200px;
            width: 100%;
            position: relative;
        }
        .content div{
            border: 1px solid red;
            height: 100%;
            position: absolute;
            top: 0;
        }
        .content .left,.content .right{
            width: 200px;
        }
        .position_l{
            left: 0;
        }
        .position_center{
            left: 200px;
            right: 200px;
        }
        .position_r{
            right: 0;
        }

第三种：通过flex定位的方式

 

 html和第一种写法一样 就只写样式

        .content{
            height: 200px;
            width: 100%;
            display: flex;
        }
        .content div{
            border: 1px solid red;
        }
        .content .left,.content .right{
            width: 200px;
        }
        .content .main{
            flex: 1;
        }

注意一点，flex是必须写,flex的含义是所占弹性范围,flex是由flex-grow、flex-shrink、flex-basis的缩写。

关于flex的资料可参考http://www.w3.org/html/ig/zh/css-flex-1/这里就不一一赘述了。

 第四种：通过表单的方式

css:

        .content{
            height: 200px;
            width: 100%;
            display: table;
        }
        .content div{
            border: 1px solid red;
            display: table-cell;
        }
        .content .left,.content .right{
            width: 200px;
        }

第五种：通过表格的方式

css:

        .content {
            width: 100%;
            display: grid;
            grid-template-columns:300px auto 300px;
            grid-template-rows: 200px;
        }
        .content div{
            border: 1px solid red;
        }

更多网格布局的资料可参考http://www.w3cplus.com/css3/line-base-placement-layout.html