web开发 HTML5+CSS3 1 不同的布局_html5+css3管理系统121布局-优快云博客

本文介绍了多种前端布局技术，包括居中布局、单列布局、双飞翼布局、圣杯布局、瀑布流布局和弹性盒布局。通过示例代码详细展示了每种布局的实现方式，涵盖了不同场景下的页面排列需求。重点讲解了弹性盒布局的主轴和垂轴对齐、弹性元素的压缩与放大以及设置弹性基准的方法。

文章目录

居中演示
单列布局
双飞翼布局
圣杯布局
瀑布流布局
弹性盒布局

居中演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>居中演示</title>
    <style type="text/css">
        div {
            width: 200px;
            height: 200px;
            border-radius: 20px;
            color: white;
            background-color: #cb4042;
            text-align: center;
            margin: auto;
            /*四个0撑满浏览器窗口，又因为都说auto所以自动划分*/
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }
        span {
            font-size: 20px;
            line-height: 200px;
        }
        .container {
            width: 500px;
            height: 500px;
            position: relative;
            background-color: #40cbc9;
        }
    </style>
</head>
<body>
    <div class="container"><div><span>中</span></div></div>
</body>
</html>

单列布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单列布局</title>
    <style type="text/css">
        header,main,footer {
            max-width: 1024px;
            margin: 0 auto;
            text-align: center;
        }
        header {
            background-color: lightblue;
            height: 50px;
            line-height: 50px;
        }
        main {
            background-color: pink;
            height: 200px;
            line-height: 200px;
        }
        footer {
            background-color: lightblue;
            height: 50px;
            line-height: 50px;
        }
    </style>
</head>
<body>
    <header>头部</header>
    <main>内容</main>
    <footer>尾部</footer>
</body>
</html>

双飞翼布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双飞翼布局</title>
    <style type="text/css">
        header {
            width: 100%;
            height: 30px;
            background-color: red;
        }
        main{
            overflow: hidden;
        }
        .container {
            width: 100%;
            float: left;
        }
        .center {
            height: 500px;
            margin: 0 200px;
            background-color: cornsilk;
        }
        .left {
            height: 500px;
            float: left;
            width: 200px;
            background: pink;
            margin-left: -100%;
        }
        .right {
            height: 500px;
            float: left;
            width: 200px;
            background: aqua;
            margin-left: -200px;
        }
        footer {
            height: 30px;
            width: 100%;
            background-color: red;
        }

    </style>
</head>
<body>
    <header></header>
    <main>
        <div class="container">
            <div class="center"></div>
        </div>
        <div class="left"></div>
        <div class="right"></div>
    </main>
    <footer></footer>
</body>
</html>

圣杯布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圣杯布局</title>
    <style type="text/css">
        body {
            min-width: 600px;
        }
        main {
            padding: 0 200px;
        }
        .column {
            float: left;
        }
        #center {
            width: 100%;
            height: 500px;
            background-color: cornsilk;
        }
        #left {
            width: 200px;
            height: 500px;
            margin-left: -100%;
            position: relative;
            right: 200px;
            background-color: pink;
        }
        #right {
            width: 200px;
            height: 500px;
            margin-right: -200px;
            background-color: lightblue;
        }
        header {
            height: 30px;
            background-color: red;
        }
        footer {
            height: 30px;
            background-color: red;
            clear: both;
        }

    </style>
</head>
<body>
    <header></header>
    <main>
        <div id="center" class="column"></div>
        <div id="left" class="column"></div>
        <div id="right" class="column"></div>
    </main>
    <footer></footer>
</body>
</html>

瀑布流布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>瀑布流布局</title>
    <Style type="text/css">
        body {
            background-color: lightblue;
            margin: 10px;
        }

        #page {
            margin: 0 auto;
            max-width: 888px;
            column-count: 3;
            column-gap: 13px;
            column-fill: auto;
        }

        .text {
            background-color: aqua;
            font-size: 15px;
            font-family: Arial, Helvetica, sans-serif;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 0 5px pink;
        }
    </Style>
</head>
<body>
    <div id="page">
        <div class="text">
            <p>1Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum dolor eligendi atque, expedita voluptatem odio ex minus neque explicabo excepturi maxime animi nulla sit totam molestias placeat repellat quibusdam autem!Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum dolor eligendi atque, expedita voluptatem odio ex minusneque explicabo excepturi maxime animi nulla sit totam molestias placeat repellat quibusdam autem!</p>
        </div>
        <div class="text"> 
            <p>2Lorem ipsum dolor sit amet conseLorem ipsum dolor sit amet. Eum dolor eligendi atque, expedita voluptatem odio ex minusneque explicabo excepturi maxime animi nulla sit totamt quibusdam autem!ctetur adipisicing elit. Eum dolor eligendi atque, expedita voluptatem odio ex minus neque explicabo excepturi maxime animi nulla sit totam molestias placeat repellat quibusdam autem!</p>
        </div>
        <div class="text">
            <p>3Lorem ipsum dolor Eum dolor eligendi atque, expedita voluptatem odio ex minus neque explicabo excepturi maxime animi nulla sit totam molestias placeat repellat quibusdam autem!</p>
        </div>
        <div class="text">
            <p>4Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum dolor eligendi atque, expedita voluptatem odio ex minus neque explicabo excepturi maxime animi nulla sit totam molestias placeat repellat quibusdam autem!</p>
        </div>
        <div class="text">
            <p>5Lorem ipsum dolor sit amet consectetur adipisicing Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum dolor eligendi atque, expedita voluptatem odio ex minusneque explicabo excepturi maxime animi Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum dolor eligendi atque, expedita voluptatem odio ex minusneque explicabo excepturi maxime animi nulla sit totam molestias placeat repellat quibusdam autem! nulla sit totam molestias placeat repellat</p>
        </div>
        <div class="text">
            <p>6Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum dolor eligendi atque, expedita voluptatem odio ex minusneque explicabo excepturi maxime animi nulla sit totam molestias placeat repellat quibusdam autem! consectetur adipisicing elit. Eum dolor eligendi atque, expedita voluptatem odio ex minus neque explicabo excepturi maxime animi nulla sit totam molestias placeat repellat quibusdam autem!</p>
        </div>
        <div class="text">
            <p>6Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum dolor eligendi atque,expedita voluptatem odio ex minusneque explicabo excepturi maxime animi nulla sit totam molestias placeatrepellat quibusdam autem! consectetur ipisicing elit. Eum dolor eligendi atque, expedita voluptatem odio exminus neque explicabo excepturi maxime animi nulla sit totam molestias placeat repellat quibusdam autem!</p>
        </div>
    </div>
</body>
</html>

弹性盒布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹性盒布局</title>
    <style type="text/css">
        .flex-container {
            display: flex;
            background-color: pink;
        }
        .inline-flex-container {
            display: inline-flex;
            flex-wrap: wrap-reverse;
            flex-direction: column-reverse;
            background-color: pink;
        }
        .flex-container > div, .inline-flex-container > div {
            margin: 50px;
            padding: 20px;
            color: white;
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div class="flex-container">
        <div>One</div>
        <div>Two</div>
        <div>Three</div>
        <div>Four</div>
        <div>Five</div>
    </div>
    <br>
    <div class="inline-flex-container">
        <div>One</div>
        <div>Two</div>
        <div>Three</div>
        <div>Four</div>
        <div>Five</div>
    </div>
</body>
</html>

主轴和垂轴

column和row 请添加图片描述

请添加图片描述

主轴上的对齐方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主轴上的对齐方式</title>
    <style type="text/css">
        .flex-container {
            display: flex;
            justify-content: center;
            flex-direction: column;
            height: 800px;
            background-color: pink;
        }
        .flex-container > div {
            margin: 20px;
            padding: 20px;
            color: white;
            background-color: lightblue;
        }
        /*把one和six交换位置 安排弹性元素的显示顺序*/
        .flex-container > div:nth-of-type(1){
            order: 1;
        }
        .flex-container > div:nth-of-type(5){
            order: -1;
        }
    </style>
</head>
<body>
    <div class="flex-container">
        <div>one</div>
        <div>two</div>
        <div>three</div>
        <div>four</div>
        <div>five</div>
        <div>six</div>
    </div>
</body>
</html>

垂轴上的对齐

align-items在外面设置，align-self在单个元素设置，
align-content在wrap的情况下才可以把内容在垂轴上对齐
align-items以弹性元素里面的内容为单位，align-content以一整行弹性元素为单位进行对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>垂轴上的对齐</title>
    <style type="text/css">
        .flex-container {
            display: flex;
            height: 888px;
            flex-wrap: wrap;
            align-items: flex-start;
            align-content: space-between;
            background-color: pink;
        }
        .flex-container > div {
            margin: 20px;
            padding: 20px;
            color: white;
            background-color: lightblue;
        }
        .special {
            align-self: flex-end;
        }
    </style>
</head>
<body>
    <div class="flex-container">
        <div>one</div>
        <div style="font-size: 2em;">two<br>two</div>
        <div class="special">three<br>three<br>three</div>
        <div>four<br>four<br>four<br></div>
        <div>five<br>five<br>five<br>five<br>five</div>
    </div>
</body>
</html>

压缩和放大弹性元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>压缩弹性元素</title>
    <style type="text/css">
        .flex-container {
            display: flex;
            width: 1024px;
            background-color: pink;
        }

        .flex-container > div {
            width: 250px;
            margin: 20px;
            padding: 20px;
            color: white;
            text-align: center;
            background-color: lightblue;
        }
        /*当给定的宽度不足以容纳所有的元素时，弹性元素就会压缩，flex-shrink属性可以设置压缩等级*/
        .shrink2 {
            flex-shrink: 2;
        }
        .shrink4 {
            flex-shrink: 4;
            /*当压缩太严重时，最小限额20+20px的内外边距还是要保持的，所以就不能压缩了*/
        }
    </style>
</head>
<body>
    <div class="flex-container">
        <div>one</div>
        <div>two</div>
        <div class="shrink2">three</div>
        <div class="shrink4"></div>
        <div>five</div>
    </div>
</body>
</html>

同理，放大弹性元素使用flex-grow

设置弹性基准

flex-basis设置的是元素在主轴上占的初始长度
而且如果有width或者height，那么flex-basis会将其覆盖

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>设置弹性基准</title>
    <style type="text/css">
        .flex-container {
            display: flex;
            width: 1024px;
            background-color: pink;
            flex-direction: column;
        }

        .flex-container>div {
            width: 80px;
            margin: 20px;
            padding: 20px;
            color: white;
            text-align: center;
            background-color: lightblue;
        }

        .basis3 {
            flex-basis: 300px;
        }
    </style>
</head>

<body>
    <div class="flex-container">
        <div>one</div>
        <div>two</div>
        <div class="basis3">three</div>
        <div>four</div>
        <div>five</div>
    </div>
</body>
</html>