CSS常見佈局

時間 2021-02-15

標籤 html dom 佈局 flex code htm table class 欄目 CSS 简体版

原文原文鏈接

兩列自適應佈局

兩列自適應佈局是指一列由內容撐開，另外一列撐滿剩餘寬度的佈局方式

1.float+overflow:hidden

<style>
    .contain {
        overflow: hidden;
        zoom: 1;
    }
    .left {
        float: left;
        background: blue;
    }
    .right {
        overflow: hidden;
        zoom: 1;
        background: yellow;
    }
</style>
<div class="contain">
    <div class="left">左欄</div>
    <div class="right">右欄</div>
</div>

2.flex佈局

<style>
    .contain {
        display: flex;
    }
    .right {
        flex: 1;
    }
</style>
<div class="contain">
    <div class="left">左欄</div>
    <div class="right">右欄</div>
</div>

3.grid佈局

<style>
    .contain {
        display: grid;
        grid-template-columns: auto 1fr;
    }
</style>
<div class="contain">
    <div class="left">左欄</div>
    <div class="right">右欄</div>
</div>

三欄佈局——兩邊固定寬度中間自適應

1.float佈局

float佈局使用時注意清除浮動。

<style>
    /*父元素清除浮動*/
    .float:after {
        content: "";
        height: 0;
        display: block;
        clear: both;
        visibility: hidden;
    }
    .float {
        *zoom: 1;
    }
    .float .left {
        float: left;
        width: 300px;
        height: 300px;
        background: red;
    }
    .float .right {
        float: right;
        width: 300px;
        height: 300px;
        background: blue;
    }
    .float .center {
        background: yellow;
        height: 400px;
        margin-left: 300px;
        margin-right: 300px;
    }
</style>
<section class="float">
    <div class="left">左邊</div>
    <div class="right">右邊</div>
    <div class="center">中間</div>
</section>

2.Position 佈局

Position佈局只是根據定位屬性去直接設置元素位置。不推薦使用

<style>
    .position {
        position: relative;
    }
    .position .left {
        position: absolute;
        left: 0;
        width: 300px;
        height: 300px;
        background: red;
    }
    .position .center {
        position: absolute;
        left: 300px;
        right: 300px;
        height: 400px;
        background: yellow;
    }
    .position .right {
        position: absolute;
        right: 0;
        width: 300px;
        height: 300px;
        background: blue;
    }
</style>
<section class="position">
    <div class="left">左邊</div>
    <div class="center">中間</div>
    <div class="right">右邊</div>
</section>

3.Flex 佈局

flex佈局比較強大,只能支持到 IE10及以上。

<style>
    .flex {
        display: flex;
    }
    .flex .left {
        width: 300px;
        background: red;
    }
    .flex .center {
        flex: 1;
        background: yellow;
    }
    .flex .right {
        width: 300px;
        background: blue;
    }
</style>
<section class="flex">
    <div class="left">左邊</div>
    <div class="center">中間</div>
    <div class="right">右邊</div>
</section>

4.table 佈局

table佈局使用起來方便,沒有兼容性也不存在問題，但使用不方便

<style>
    .table {
        width: 100%;
        display: table;
    }
    .table .left {
        display: table-cell;
        width: 300px;
        background: red;
    }
    .table .center {
        display: table-cell;
        background: yellow;
    }
    .table .right {
        display: table-cell;
        width: 300px;
        background: blue;
    }
</style>
<section class="table">
    <div class="left">左邊</div>
    <div class="center">中間</div>
    <div class="right">右邊</div>
</section>

5.grid佈局

grid佈局很強大，可是兼容性不好。

<style>
    .grid {
        display: grid;
        grid-template-rows: 100px;
        grid-template-columns: 300px auto 300px;
    }
    .grid .left {
        background: red;
    }
    .grid .center {
        background: yellow;
    }
    .grid .right {
        background: blue;
    }
</style>
<section class="grid">
    <div class="left">左邊</div>
    <div class="right">右邊</div>
    <div class="center">中間</div>
</section>

聖盃佈局

三個部分都設定爲左浮動，而後設置center的寬度爲100%，此時，left和right部分會跳到下一行；
經過設置margin-left爲負值讓left和right部分回到與center部分同一行；html

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .main {
      padding-left: 300px;
      padding-right: 300px;
    }
    .center {
      float: left;
      width: 100%;
      height: 400px;
      background: #4ba946;
    }
    .left {
      float: left;
      width: 300px;
      height: 300px;
      background: #0376c2;
      margin-left: -100%;
      position: relative;
      left: -300px;
    }
    .right {
      float: left;
      width: 300px;
      height: 300px;
      background: #9889c1;
      margin-left: -300px;
      position: relative;
      right: -300px;
    }
  </style>
</head>
<body>
<section class="main">
  <div class="center">中間</div>
  <div class="left">左邊</div>
  <div class="right">右邊</div>
</section>
</body>

缺點:
center部分的最小寬度不能小於left部分的寬度，不然會left部分掉到下一行
若是其中一列內容高度拉長(以下圖)，其餘兩列的背景並不會自動填充。(藉助僞等高佈局可解決)dom

雙飛翼佈局

實現步驟(前兩步與聖盃佈局同樣)
三個部分都設定爲左浮動，而後設置center的寬度爲100%，此時，left和right部分會跳到下一行；
經過設置margin-left爲負值讓left和right部分回到與center部分同一行；
center部分增長一個內層div，並設margin: 0 200px；佈局

缺點
多加一層 dom 樹節點，增長渲染樹生成的計算量。flex

多列等高佈局——聖盃佈局

實現步驟：
1.三部分都設定爲浮動，設置center的寬度爲100%。
2.設置 left 和 right的margin-left爲負值讓left和right部分回到與center部分同一行。
3.設置相對定位，讓left和right部分移動到兩邊。
4.僞等高佈局code

.container {
    overflow: hidden;//把溢出背景切掉
}
.center,.left,.right {
    padding-bottom: 10000px;
    margin-bottom: -10000px;
}

示例：htm

<style>
    .container {
        padding-left: 300px;
        padding-right: 300px;
        overflow: hidden;
    }
    /*關鍵*/
    .container .center, .left, .right {
        padding-bottom: 10000px;
        margin-bottom: -10000px;
    }
    .container .center {
        float: left;
        width: 100%;
        height: 400px;
        background: yellow;
    }
    .container .left {
        float: left;
        width: 300px;
        height: 300px;
        margin-left: -100%;
        background: red;
        position: relative;
        left: -300px;
    }
    .container .right {
        float: left;
        width: 300px;
        height: 300px;
        margin-left: -300px; /*right 的寬度*/
        background: blue;
        position: relative;
        right: -300px;
    }
</style>
<section class="container">
    <div class="center">中間</div>
    <div class="left">左邊</div>
    <div class="right">右邊</div>
</section>

粘連佈局

描述：
有一塊內容<main>，當<main>的高度足夠長的時候，緊跟在<main>後面的元素<footer>會跟在<main>元素的後面。當<main>元素比較短的時候(好比小於屏幕的高度),咱們指望這個<footer>元素可以「粘連」在屏幕的底部。
實現步驟：it

<style>
    html, body {
        height: 100%;
    }
    .wrap {
        min-height: 100%;/*設置min-height，變爲視口高度*/
        background: blue;
        overflow: hidden;
    }
    .main {
        padding-bottom: 50px;
    }
    .footer {
        height: 50px;
        margin-top: -50px;
        background: red;
    }
</style>
<div class="wrap">
    <article class="main">
        <p>1</p>
        <p>2</p>
        <p>3</p>
    </article>
</div>
<footer class="footer">footer</footer>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。