常用的几种网页布局方式简单介绍

触光

2021 年 10 月 12 日

1036 次浏览

暂无评论

4316字数

经验分享

这里简单记录常用的四种布局方式,分别为: float浮动布局、position定位方式、还有方便的flex布局和网格grid布局。

下面这里将用这四种布局方式,举例实现左右固定,中间自适应的布局。

float浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
        }
        .container {
            /* vw: view width */
            width: 100vw;
            height: 100vh;
        }
        .container>div {
            height: 100%;
            float: left;
        }
        .left-sider,
        .right-sider {
            width: 100px;
            background-color: green;
        }
        .main {
            /* calculate */
            /* 当前方案的重点 */
            /*注意这里采用左右两边固定宽度,中间自适应宽度的方式,进行布局,注意➖号两边的空格*/
            width: calc(100% - 200px);
            background-color: grey;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left-sider"></div>
        <div class="main"></div>
        <div class="right-sider"></div>
    </div>

</body>
</html>

效果如图

浮动布局很方便,但是它容易影响标准流的其他元素,造成父级元素的塌陷或者"消失",所以我们在使用的时候应当注意这些因素,必要的时候采用"清除浮动"的方式来阻止它对其他元素影响。

position定位方式布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
        }
        .container {
            /* vw: view width */
            width: 100vw;
            height: 100vh;
            position: relative;
        }
        .container>div {
            height: 100%;
            position: absolute;
        }
        .left-sider,
        .right-sider {
            width: 100px;
            background-color: aquamarine;
        }
        .main {
            background-color: red;
            /* 当前方案的重点：左右都定位，不给宽度 */
            left: 100px;
            right: 100px;
        }
        .left-sider {
            left: 0;
        }
        .right-sider {
            right: 0;
        }


    </style>
</head>
<body>
    <div class="container">
        <div class="left-sider"></div>
        <div class="main"></div>
        <div class="right-sider"></div>
    </div>

</body>
</html>

也实现了相同的效果

定位布局的方式的重点在于中间的盒子不设置宽度,只设置定位距离左右两侧的距离.

flex布局

flex布局当前的实用度越来越高,只用几行代码,便可以实现复杂漂亮的页面布局,适用于不需考虑浏览器兼容性的伙伴使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
        }
        .container {
            /* vw: view width */
            width: 100vw;
            height: 100vh;
            display: flex;
        }
        .container>div {
            height: 100%;
        }
        .left-sider,
        .right-sider {
            width: 100px;
            background-color: #000;
        }
        .main {
            /* 当前方案的重点 */
            flex: 1;
            background-color: #333;
        }

    </style>
</head>
<body>
    <div class="container">
        <div class="left-sider"></div>
        <div class="main"> flex布局</div>
        <div class="right-sider"></div>
    </div>

</body>
</html>

flex布局相对来说的话比较的方便,所以这里将在这里详细的介绍一下使用的基本方法,详情请参阅《flex布局的基本使用》。上述布局的实现是为父盒子添加display: flex;属性,同样的两边固定,中间占据1份,flex:1 。

grid布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
        }
        .container {
            /* vw: view width */
            width: 100vw;
            height: 100vh;
            display: grid;
            /*
                grid: 网格/栅格
                template: 模板
                column: 列
                fr: 份儿
                fragment: 片段/片元
                repeat: 重复
            */

            /* 当前方案的重点 */
            grid-template-columns: 100px 1fr 100px;
            /* grid-template-columns: 1fr 1fr 1fr; */
            /* grid-template-columns: repeat(3, 1fr); */
        }
        .container>div {
            height: 100%;
        }
        .left-sider,
        .right-sider {
            background-color: yellow;
        }
        .main {
            background-color: pink;
        }

    </style>
</head>
<body>
    <div class="container">
        <div class="left-sider"></div>
        <div class="main"></div>
        <div class="right-sider"></div>
    </div>

</body>
</html>