CSS布局大全

本文轉載自查看原文 2019-05-28 17:01 5260 Web前端

前幾天面試，問我某布局感覺回答不是很OK所以研究了一下各種布局。

一、單列布局

1.普通布局（頭部、內容、底部）

    <div class="container">
        <header></header>
        <div class="content"></div>
        <footer></footer>
    </div>

.container {
            width: 80%;
            margin: 30px auto;
            border:2px solid red;
            box-sizing: border-box;
        }
        .container header {
            width: 100%;
            height: 30px;
            background: #faa;
        }
        .container .content {
            width: 100%;
            height: 300px;
            background: #aaf;
        }
        .container footer {
            height: 50px;
            background: #afa;
        }

2.內容居中（內容區域為80%寬度，采用margin:0 auto;實現水平居中）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .container {
            width: 80%;
            margin: 30px auto;
            border:2px solid red;
            box-sizing: border-box;
        }
        .container header {
            width: 100%;
            height: 30px;
            background: #faa;
        }
        .container .content {
            width: 80%;
            height: 300px;
            margin: 0 auto;
            background: #aaf;
        }
        .container footer {
            height: 50px;
            background: #afa;
        }
    </style>

</head>
<body>
    <div class="container">
        <header></header>
        <div class="content"></div>
        <footer></footer>
    </div>
</body>
</html>

二、兩欄布局

1.采用float 左邊固定大小，右邊自適應

左側采用float:left往左浮動，右側margin-left:200px,留出左側內容的空間。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .wrapper {
            /* width:80%;和margin 是為了方便我截圖*/
            width: 80%;
            margin: 50px auto;
            border:2px solid #aaa;
            box-sizing: border-box;
            /*采用bfc清除浮動*/
            overflow: hidden;
        }
        .nav {
            float: left;
            width: 200px;
            background: #faa;
            height: 500px;
        }
        .content {
            margin-left: 200px;
            height: 500px;
            background-color: #aaf;
        }
    </style>

</head>
<body>
    <div class="wrapper">
        <div class="nav"></div>
        <div class="content"></div>
    </div>
</body>
</html>

2.采用display: inline-block; 和 calc() 實現

由於inline-會把空格和回車算進去，所以我們在wrappper中設置font-size:0來清除影響。當然，打包出來的壓縮格式可以忽略。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .wrapper {
            /* width:80%;和margin 是為了方便我截圖*/
            width: 80%;
            margin: 50px auto;
            border:2px solid red;
            box-sizing: border-box;
            font-size: 0;
        }
        .nav {
            display: inline-block;
            width: 200px;
            background: #faa;
            height: 500px;
        }
        .content {
            width: calc(100% - 200px);
            display: inline-block;
            height: 500px;
            background-color: #aaf;
        }
    </style>

</head>
<body>
    <div class="wrapper">
        <div class="nav"></div>
        <div class="content"></div>
    </div>
</body>
</html>

3.采用flex實現，左側固定大小，右側設置flex:1,即可實現自適應

HTML不變，css如下：

.wrapper {
            /* width:80%;和margin 是為了方便我截圖*/
            width: 80%;
            margin: 50px auto;
            border:2px solid red;
            box-sizing: border-box;
                        /*flex布局*/
            display: flex;
        }
        .nav {
            width: 200px;
            background: #faa;
            height: 500px;
        }
        .content {
            flex: 1;
            height: 500px;
            background-color: #aaf;
        }

三、三欄布局

1.采用float浮動,左右大小固定，中間自適應

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .wrapper {
            width: 100%;
            margin-bottom: 30px;
            border:2px solid red;
            box-sizing: border-box;
        }
        .wrapper .left {
            width: 200px;
            height: 300px;
            background: #faa;
            float: left;
        }
        .wrapper .right {
            width: 200px;
            height: 300px;
            background: #afa;
            float: right;
        }
        .wrapper .content {
            height: 300px;
            background-color: #aaf;
            margin:0 200px;
        }
    </style>

</head>
<body>
    <!-- 三欄-浮動布局 -->
    <div class="wrapper">
        <div class="left"></div>
        <div class="right"></div>
        <div class="content"></div>
    </div>
</body>
</html>

采用inline-block 與兩欄布局類似

.wrapper {
            width: 100%;
            margin-bottom: 30px;
            border:2px solid red;
            box-sizing: border-box;
            font-size: 0;
        }
        .wrapper .left {
            display: inline-block;
            width: 200px;
            height: 300px;
            background: #faa;
        }
        .wrapper .right {
            display: inline-block;
            width: 200px;
            height: 500px;
            background: #afa;
        }
        .wrapper .content {
            width: calc(100% - 400px);
            display: inline-block;
            height: 400px;
            background-color: #aaf;
        }

這里我們給每個容器的高度不同，結果：

我們可以發現他是底部對齊的，只需改變他的對其方式即可。vertical-align: top;

.wrapper .left {
            display: inline-block;
            width: 200px;
            height: 300px;
            background: #faa;
            vertical-align: top;/*添加*/
        }
        .wrapper .right {
            display: inline-block;
            width: 200px;
            height: 500px;
            background: #afa;
            vertical-align: top;
        }
        .wrapper .content {
            width: calc(100% - 400px);
            display: inline-block;
            height: 400px;
            background-color: #aaf;
            vertical-align: top;
        }

結果:

3.采用flex布局

.wrapper {
            width: 100%;
            margin-bottom: 30px;
            border:2px solid red;
            box-sizing: border-box;
            display: flex;
        }
        .wrapper .left {
            width: 200px;
            height: 300px;
            background: #faa;
        }
        .wrapper .right {
            width: 200px;
            height: 500px;
            background: #afa;
        }
        .wrapper .content {
            flex: 1;
            height: 400px;
            background-color: #aaf;
        }

接下來就是大名鼎鼎的 聖杯布局 和 雙飛翼布局了。

這兩個布局非常重要，性能什么的都要比上面好很多，主要是為了讓content內容區域優先加載。

1.聖杯布局

<!-- 聖杯布局 -->
    <div class="container">
        <div class="middle"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>

上面是html，發現了吧，middle寫在最前面，這樣網頁在載入時，就會優先加載。

具體實現思路，通過給 container 左右固定的padding來預留出left和right的空間

看一下css部分：

.container {
            position: relative;;
            height: 300px;
            background: #ddd;
            padding: 0 300px 0;
        }
        .container .middle{
            float: left;
            width: 100%;
            height: 300px;
        }
        .container .left{
            float: left;
            position: relative;
            height: 300px;
            width: 300px;
            margin-left: -100%;
            left: -300px;
        }
        .container .right {
            float: left;
            position: relative;
            width: 300px;
            height: 300px;
            margin-left: -300px;
            left: 300px;
        }

所以內部元素都是左浮動的，主要區域寬度100%;

左側區域通過margin-left:100%;使它浮動到左方，然后更具自身定位 left：-300px;將之移動到父容器的padding中

右側同理，只不過只需要margin自己本身的寬度。

結果：左右固定寬度300px，中間自適應

2.雙飛翼布局

雙飛翼布局和聖杯差不多，主要是將padding換成了margin而且只需要包裹middle即可，

    <div class="container">
        <div class="middle"></div>
    </div>
    <div class="left"></div>
    <div class="right"></div>

css：

       .container{
            float: left;
            width: 100%;
            height: 300px;
            background: #ddd;
        }
        .container .middle{
            height: 300px;
            margin: 0 300px;
        }
        .left{
            float: left;
            position: relative;
            width: 300px;
            height: 300px;
            margin-left: -100%;
        }
        .right{
            float: left;
            position: relative;
            width: 300px;
            height: 300px;
            margin-left: -300px;
        }

差距不大，看代碼就完事了。

最后，我們就可以自嗨了！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        * {
            margin:0;
            padding: 0;
        }
        .wrapper {
            width: 100%;
            display: flex;
        }
        .wrapper .left {
            width: 200px;
            height: 90vh;
            background: #faa;
        }
        .wrapper .left .left-box {
            width: 90%;
            height: 120px;
            margin: 30px auto;
            background: #ff4;
        }
        .wrapper .left .left-box2 {
            height: 50%;
        }
        .wrapper .right {
            width: 200px;
            height: 90vh;
            background: #afa;
        }
        .wrapper .right .card {
            width: 80%;
            margin: 20px auto;
            background-color: #f42
        }
        .wrapper .content {
            flex: 1;
            min-height: 90vh;
            background: #aaf;
            column-count: 3;
            column-gap: 10px;
        }
        .wrapper .card {
            width: 100%;
            height: 100px;
            background: #c44;
            font-size: 18px;
            text-align: center;
            line-height: 100px;
            margin:5px 0;
            break-inside: avoid;
        }
        header,footer {
            height: 5vh;
            background: #424242;
        }
        h2 {
            text-align: center;
            color: #f8f8f8;
        }

        @media screen and (max-width: 800px) {
            .wrapper .content {
                column-count: 2;
            }
        }
    </style>

</head>
<body>
    <!-- 頭部 -->
    <header><h2>頭部</h2></header>
    <div class="wrapper">
        <div class="left">
            <div class="left-box"></div>
            <div class="left-box left-box2"></div>
        </div>
        <div class="content">
            <div class="card" style="height: 100px">1</div>
            <div class="card" style="height: 200px">2</div>
            <div class="card" style="height: 150px">3</div>
            <div class="card" style="height: 210px">4</div>
            <div class="card" style="height: 120px">5</div>
            <div class="card" style="height: 180px">6</div>
            <div class="card" style="height: 160px">7</div>
            <div class="card" style="height: 136px">8</div>
            <div class="card" style="height: 120px">9</div>
        </div>
        <div class="right">
            <div class="card"></div>
            <div class="card"></div>
            <div class="card"></div>
            <div class="card"></div>
        </div>
    </div>
    <footer><h2>底部</h2></footer>
</body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 【CSS】布局之聖杯布局 CSS布局之浮動布局 Android布局大全 CSS布局-table表格布局 android布局屬性大全 CSS 多欄布局固定布局流動布局 css布局彈性布局和網格布局 CSS屬性大全 css 樣式大全 CSS屬性大全