CSS經常使用佈局

時間 2019-11-08

標籤 css 經常使用佈局欄目 CSS 简体版

原文原文鏈接

本文是我的筆記，都是些基礎用法，大佬請自行略過css

多列等高，多行佈局共用htmlhtml

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>經常使用佈局</title>
  <style> html, body { width: 100%; height: 100%; box-sizing: border-box; margin: 0; padding: 0; } </style>
</head>
<body>
  <div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</body>
</html>
複製代碼

多列等高佈局

常見應用：三列布局，左右定寬，中間自適應ide

效果圖以下：佈局

普通實現（最不喜歡的方案）

html學習

<div class="container">
  <div>1</div><!-- --><div>2</div><!-- --><div>3</div>
</div>
複製代碼

cssflex

.container {
  width: 100%;
  height: 100%;
}

.container>div {
  display: inline-block;
  height: 100%;
  border: 1px solid #000;
  background-color: #0ff;
  box-sizing: border-box;
}

.container>div:nth-child(2) {
  width: calc(100% - 200px);
}

.container>div:nth-child(1), .container>div:nth-child(3) {
  width: 100px;
}
複製代碼

display 爲 inline-block 時會有空隙，常見的解決方案有以下幾種：ui

html不換行，可是這樣不方便維護，能夠經過添加註釋的方法實現（示例代碼用的就是這個方法）
將父元素 font-size 設爲 0 ，子元素 font-size 從新設置正確的值（font-size 會繼承父元素的值）
設置浮動，會影響佈局（不推薦）
設置子元素的 margin 爲負值
最好的方案：使用別的佈局方案！！！

flex 實現

.container {
  width: 100%;
  height: 100%;
  display: flex;
}

.container>div {
  border: 1px solid #000;
  background-color: #0ff;
}

.container>div:nth-child(2) {
  flex: 1;
}

.container>div:nth-child(1), .container>div:nth-child(3) {
  width: 100px;
}
複製代碼

學習 flex 佈局能夠參考如下連接：flexbox

grid 實現

.container {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 100px 1fr 100px;
  /* grid-template-columns: 100px auto 100px; */
}

.container>div {
  border: 1px solid #000;
  background-color: #0ff;
}
複製代碼

學習 grid 佈局能夠參考如下連接spa

CSS Grid 網格佈局教程-阮一峯老師
grid-MDN

table 實現

.container {
  display: table;
  width: 100%;
  height: 100%;
}

.container>div {
  display: table-cell;
  height: 100%;
  border: 1px solid #000;
  background-color: #0ff;
}

.container>div:nth-child(1), .container>div:nth-child(3) {
  width: 100px;
}
複製代碼

多行佈局

常見應用：上中下佈局，上下定高，中間自適應code

實現與多列相似，下面是具體代碼

效果圖以下：

普通方式

.container {
  width: 100%;
  height: 100%;
  /* height: 200vh; */
}

.container>div {
  width: 100%;
  height: 100%;
  border: 1px solid #000;
  background-color: #0ff;
  box-sizing: border-box;
}

.container>div:nth-child(2) {
  /* width: 80%; margin: auto; */
  height: calc(100% - 200px);
}

.container>div:nth-child(1), .container>div:nth-child(3) {
  height: 100px;
}
複製代碼

如頁腳須要固定在頁面底端，請另行處理

flex 方式

.container {
  width: 100%;
  height: 100%;
  /* height: 200vh; */
  display: flex;
  flex-direction: column;
}

.container>div {
  border: 1px solid #000;
  background-color: #0ff;
}

.container>div:nth-child(2) {
  flex: 1
}

.container>div:nth-child(1), .container>div:nth-child(3) {
  height: 100px;
}
複製代碼

grid 方式

.container {
  width: 100%;
  height: 100%;
  /* height: 200vh; */
  display: grid;
  grid-template-rows: 100px 1fr 100px;
  /* grid-template-rows: 100px auto 100px; */
}

.container>div {
  border: 1px solid #000;
  background-color: #0ff;
}
複製代碼

多行多列

常見應用：三行三列，兩行三列等

示例爲三行三列——左右列定寬，中間列自適應；上下行定高，中間行自適應

效果圖以下：

flex 方式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>混合-多行多列-flex</title>
  <style> html, body { width: 100%; height: 100%; margin: 0; padding: 0; } .container { height: 100%; /* height: 200vh; */ display: flex; flex-direction: column; text-align: center; } header, footer { height: 100px; display: flex; } section { flex: 1; display: flex; } header>div, section>div, footer>div { width: 100px; border: 1px solid red; } header>div:nth-child(2), section>div:nth-child(2), footer>div:nth-child(2) { flex: 1; } </style>
</head>
<body>
  <div class="container">
    <header>
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </header>
    <section>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </section>
    <footer>
      <div>7</div>
      <div>8</div>
      <div>9</div>
    </footer>
  </div>
</body>
</html>
複製代碼

grid 方式

html<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>混合-多行多列-grid</title>
  <style> html, body { width: 100%; height: 100%; margin: 0; padding: 0; } .container { height: 100%; /* height: 200vh; */ display: grid; /* grid-template-columns: 100px auto 100px; grid-template-rows: 100px auto 100px; */ grid-template: 100px auto 100px / 100px auto 100px; } .container>div { border: 1px solid red; } </style>
</head>
<body>
  <div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
  </div>
</body>
</html>
複製代碼