一、单栏布局

1. HTML

<header>我是头部</header>
<main>我是主要部分</main>
<footer>我是尾部</footer>

2. CSS

header {
  width: 100%;
  line-height: 60px;
  background-color: brown;
}
main {
  width: 100%;
  line-height: 600px;
  background-color: burlywood;
}
footer {
  width: 100%;
  line-height: 60px;
  background-color: cadetblue;
}

3. 效果

二、两栏布局

1. 左栏布局

1. HTML

<header>我是头部</header>
<main>
	<div class="left">我是左边部分</div>
	<div class="right">我是右边部分</div>
</main>
<footer>我是尾部</footer>

2. CSS

header {
	width: 100%;
	line-height: 60px;
	background-color: cadetblue;
}
main {
	width: 100%;
	line-height: 600px;
}
main .left {
	width: 200px;
	line-height: 600px;
	background-color: red;
	/* 设置为左，则是左栏布局，设置为右即是右栏布局 */
	float: left;
}
main .right {
	width: 100%;
	line-height: 600px;
	background-color: orange;
}
footer {
	width: 100%;
	line-height: 60px;
	background-color: chocolate;
}

3. 效果

4. 右栏布局

只需要将浮动改为右浮动即可实现。

三、三栏布局（圣杯布局）

1. HTML

<header>我是头部</header>
<main>
  <div class="left">我是左边部分</div>
  <div class="middle">我是中间部分</div>
  <div class="right">我是右边部分</div>
</main>
<footer>我是尾部</footer>

2. CSS

header {
  width: 100%;
  line-height: 60px;
  background-color: orange;
}
main {
  width: 100%;
  line-height: 600px;
  // 弹性布局实现水平居中
  display: flex;
}
/* 设置三个盒子均分 100 百分比宽度 */
main .left {
  width: 20%;
  line-height: 600px;
  background-color: orchid;
}
main .middle {
  width: 60%;
  line-height: 600px;
  background-color: palegreen;
}
main .right {
  width: 20%;
  line-height: 600px;
  background-color: pink;
}
footer {
  width: 100%;
  line-height: 60px;
  background-color: orangered;
}

3. 效果

四、左右固定，中间自适应，且中间优先加载布局

1. HTML

html 部分并没有什么特别的。

<header>我是头部</header>
<main>
  <div class="left">我是左边</div>
  <div class="middle">我是中间</div>
  <div class="right">我是右边</div>
</main>
<footer>我是尾部</footer>

2. CSS

CSS 这里需要的是，中间需要优先加载，这一点也很好理解，只需要将中间部分相关的样式放在最下面就行了，因为 CSS 是从样式表的最下方开始解析的。所以说放在最下面就可以实现中间先加载的效果了。（虽说在页面上看着不明显）

header {
  width: 100%;
  height: 60px;
  background-color: pink;
}
footer {
  width: 100%;
  height: 60px;
  background-color: orange;
}
main {
  width: 100%;
  height: 600px;
  /* 弹性布局实现水平对齐 */
  display: flex;
}
/* 左右固定两百像素，中间设置百分之百占比 */
main .left {
  width: 200px;
  height: auto;
  background-color: plum;
}
main .right {
  width: 200px;
  height: auto;
  background-color: purple;
}
main .middle {
  width: 100%;
  height: auto;
  background-color: red;
}

3. 效果

拉大后

缩小后



原文地址：www.yuque.com/xiaochens/h…