單列布局

第一種

給定寬度，margin:auto 即可實現

html

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

css

.header {
  margin: 0 auto;
  max-width: 960px;
  height: 100px;
  background-color: blue;
}
.content {
  margin: 0 auto;
  max-width: 960px;
  height: 400px;
  background-color: yellow;
}
.footer {
  margin: 0 auto;
  max-width: 960px;
  height: 100px;
  background-color: green;
}
 

第二種

html

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

css

.header {
  margin: 0 auto;
  max-width: 960px;
  height: 100px;
  background-color: blue;
}
.nav {
  margin: 0 auto;
  max-width: 800px;
  background-color: darkgray;
  height: 50px;
}
.content {
  margin: 0 auto;
  max-width: 800px;
  height: 400px;
  background-color: aquamarine;
}
.footer {
  margin: 0 auto;
  max-width: 960px;
  height: 100px;
  background-color: aqua;
}
 

等高佈局

當有內容填充一側時,另一側高度跟左側保持相等

html

<div class="parent">
  <div class="box1">
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
  </div>
  <div class="box2">
    <p>content</p>
  </div>
</div>
 

css

通過設定 margin-bottom 和 padding-bottom，然後讓父容器溢位隱藏，就能達到等高的效果

.parent {
  border: 4px solid rgb(69, 209, 228);
  overflow: hidden;
}
.box1 {
  float: left;
  width: 100px;
  background-color: rgb(230, 56, 56);
  margin-bottom: -2000px;
  padding-bottom: 2000px;
}
.box2 {
  float: right;
  width: 100px;
  background-color: rgb(67, 67, 221);
  margin-bottom: -2000px;
  padding-bottom: 2000px;
}

例項：

三列布局(雙飛翼)

左側固定，右側固定，中間自適應的三列布局

實現方式有很多：
    1.BFC
    2.定位
    3.浮動
    4.flex彈性

示例：

html

<div class="container">
  <div class="center">
    <h1>center</h1>
  </div>
  <div class="left">
    <h1>Left</h1>
  </div>
  <div class="right">
    <h1>Right</h1>
  </div>
</div>

css

<div class="container">
  <div class="center">
    <h1>center</h1>
  </div>
  <div class="left">
    <h1>Left</h1>
  </div>
  <div class="right">
    <h1>Right</h1>
  </div>
</div>

例項：

聖盃佈局

同樣也是兩邊固定寬度，中間自適應，唯一區別是 dom 結構必須是先寫中間列部分，這樣實現中間列可以優先載入

html

<article class="container">
  <div class="center">
    <h2>聖盃佈局</h2>
  </div>
  <div class="left"></div>
  <div class="right"></div>
</article>

css

.container {
  padding-left: 220px;
  padding-right: 220px;
}
.left {
  float: left;
  width: 200px;
  height: 400px;
  background: red;
  margin-left: -100%;
  position: relative;
  left: -220px;
}
.center {
  float: left;
  width: 100%;
  height: 500px;
  background: yellow;
}
.right {
  float: left;
  width: 200px;
  height: 400px;
  background: blue;
  margin-left: -200px;
  position: relative;
  right: -220px;
}

未完待續...