网页前端布局方式_网页前端最新布局-CSDN博客

本文链接：https://blog.csdn.net/m0_63841538/article/details/130153806

文章介绍了网页布局的三种常见方法：1)Flex布局，包括flex-direction、flex-wrap等属性的使用；2)定位布局，利用position属性进行元素的绝对定位；3)浮动布局，通过float属性实现左右布局。每个布局方法都配以示例代码进行说明。

摘要由CSDN通过智能技术生成

一、fiex布局

flex布局也称为弹性布局

其属性为：

flex-direction：主轴的方向。
flex-wrap：超出父容器子容器的排列样式。
flex-flow：flex-direction 属性和 flex-wrap 属性的简写形式。
justify-content：子容器在主轴的排列方向。
align-items：子容器在交叉轴的排列方向。

align-content：多根轴线的对齐方式。

<!DOCTYPE html>
<html lang="ne">
    <head>
        <meta charset="utf-8" />
        <title></title>
<style>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            height: 500px;
        }
        .one {
            display: table;
            width: 100%;
        }
        .one > div {
            display: table-cell;
        }
        .two {
            width: 300px;
            background-color: red;
        }
        .four {
            width: 300px;
            background-color: yellow;
        }
        .three {
            flex: 1;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="one">
        <div class="two"></div>
        <div class="three"></div>
        <div class="four"></div>
    </div>
</body>
</html>

运行如下:

二、定位布局定位布局是利用position来实现，可以使用absolute绝对定位移动元素的位置。

<!DOCTYPE html>
<html lang="ne">
    <head>
        <meta charset="utf-8" />
        <title></title>
<style>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            height: 500px;
        }
        .two {
            position: absolute;
            width: 300px;
            left: 0;
            top: 0;
            background-color: red;
        }
        .three {
            background-color: yellow;
            margin: 0 300px;
        }
        .four {
            position: absolute;
            width: 300px;
            right: 0;
            top: 0;
            background-color: blue;
        }
    </style>
</head>
<body>
        <div class="two"></div>
        <div class="three"></div>
        <div class="four"></div>
</body>
</html>

运行如下：

三、浮动布局浮动布局用float属性来实现，然后可根据需要使用left和right实现布局方式。

<!DOCTYPE html>
<html lang="ne">
    <head>
        <meta charset="utf-8" />
        <title></title>
<style>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            height: 500px;
        }
        .left {
            width: 300px;
            float: left;
            background-color: red;
        }
        .right {
            width: 300px;
            float: right;
            background-color: black;
        }
        .middle {
            background-color: pink;
            margin: 0 300px;
        }
    </style>
</head>
<body>
    <div class="left"></div>
    <div class="right"></div>
    <div class="middle"></div>
</body>
</html>

运行如下：