[前端知識點]css三欄佈局

阿新 • • 發佈：2021-02-06

[前端知識點]css三欄佈局

前言
一、float佈局
二、position佈局
三、table佈局
四、flex佈局
五、grid佈局

前言

常見的三欄佈局方式: float佈局、Position定位、table佈局、彈性(flex)佈局、網格(grid)佈局

設定高度100，左右寬度300，中間自適應
三欄佈局
html模板如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    < 
title>三欄佈局</title>
    <style type="text/css">
      *{
        margin: 0;
        padding: 0;
      }
    </style>
</head>

<body>
  <div class="main">
    <div class="left">左</div>
    <div class="center">中</ 
div>
    <div class="right">右</div>
  </div>
</body>
</html>

一、float佈局

float最初的設計的初衷是為了解決文字環繞的問題，即給一個圖片設定float屬性之後會使文字環繞在圖片周圍顯示。
float之所以可以實現文字環繞是源於設定float屬性的元素可以脫離文件流，使父元素高度塌陷。

.left{
  float: left;
  width: 300px;
  height: 100px;
  background: #1d9f33;
}
.right 
{
  float: right;
  width: 300px;
  height: 100px;
  background: red;
}
.center{
  margin-left: 300px;
  margin-right: 300px;
  height: 100px;
  background-color: #4990E2;
}

為了不影響其他元素的顯示，我們需要清除浮動，具體可見[前端知識點]css清除浮動

二、position佈局

position 的屬性有5種 :

inherit: 繼承父元素的position屬性值
static: 預設值，沒有定位
fixed: 生成絕對定位的元素,相對於瀏覽器視窗進行定位（不管螢幕內容怎麼滑動,其位置不會改變）
relative:生成相對定位,相對於其正常位置進行定位
absolute:生成絕對定位的元素,相當於static定位以外的第一個父元素進行定位。

給其父元素新增 position:relative屬性, 這樣這三個子元素可以相對於父元素進行絕對定位

.main{
  position:relative;
}
.left{
    position: absolute;
    left: 0;
    width: 300px;
    background-color: red;
}
.center{
    position: absolute;
    left: 300px;
    right: 300px;
    background-color: blue;
}
.right{
    position: absolute;
    right: 0;
    width: 300px;
    background-color: #3A2CAC;
}

三、table佈局

table是一種常見的佈局方式, 可以將整個頁面按照表格的方式設定為多行多列
CSS中可以使用 display: table 的方式使用table佈局, 同時設定子元素為列的屬性為display:table-cell

.main{
  width: 100%;
  display: table;
}
.left,.center,.right{
  display: table-cell;
}
.left{
  width: 300px;
  background-color: red;
}
.center{
  background-color: blue;
}
.right{
  width: 300px;
  background-color: red;
}

四、flex佈局

flex佈局是W3C提出了一種新的方案，可以簡便、完整、響應式地實現各種頁面佈局
當給元素設定display:flex，則該元素就是一個flex容器,其子元素就是容器成員,稱之為flex專案，每個專案預設按照從左到右方式排列

.main {
    display: flex;
}
.left{
    width: 400px;
    background-color: red;
}
.center{
	flex:1;
    background-color: blue;
}
.right{
    background-color: red;
    width: 400px;
}

flex其他方式可參考flex教程

五、grid佈局

grid將網頁劃分成一個又一個網格，可以任意組合不同的網格，做出各種各樣的佈局

將屬性 display 值設為 grid 或 inline-grid 就建立了一個網格容器，所有容器直接子結點自動成為網格專案

gird提供了 gird-template-columns、grid-template-rows屬性讓我們設定行和列的高、寬

.main{
  display: grid;
  width: 100%;
  grid-template-rows: 100px;  /*設定行高*/
  grid-template-columns: 300px auto 300px;  /*設定三列數屬性*/
}
.left{
  background: red;
}
.main{
  background: blue;
}
.right{
  background:red;
}

如果還有其他推薦佈局，歡迎大傢俬信或評論區分享

[前端知識點]css三欄佈局