单列布局

danlie

第一种

给定宽度，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;
}

实例：

example

---

三列布局(双飞翼)

左侧固定，右侧固定，中间自适应的三列布局

实现方式有很多：
    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>

实例：

example

---

圣杯布局

同样也是两边固定宽度，中间自适应，唯一区别是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;
}

未完待续...