CSS常用布局一（三栏布局）

最新推荐文章于 2024-02-05 14:39:35 发布

BreenCL

最新推荐文章于 2024-02-05 14:39:35 发布

阅读量621

点赞数 3

分类专栏：前端基础面试文章标签： css3 html

本文链接：https://blog.csdn.net/baoyin0822/article/details/107459363

版权

前端基础同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

面试

4 篇文章 0 订阅

订阅专栏

CSS常用布局一（三列布局）

一、常用的布局

前言：浏览网站时会发现圣杯布局和双飞翼布局已经是现今大多数网页布局的主流，因此也成为了前端工程师需要掌握的重要布局方式。而两种布局的效果基本一样，实现了一个两侧宽度固定，中间宽度自适应的三列布局样式。
圣杯布局的来历是2006年发在a list part上的文章In Search of the Holy Grail；
双飞翼则源自淘宝UED，两者都算是对页面的一种形象的表达，两中布局的异同如下：
相同点：

两侧宽度固定，中间宽度自适应的三栏布局；
中间栏要放在DOM前面优先渲染；
允许三列中的任意一列成为最高列；
三栏全部float浮动，但左右两栏加上负margin让其跟中间栏div并排，形成三栏；
多使用一个div标签（目的是减少使用多个CSS属性）；

不同点：

解决中间栏div内容不被遮挡问题的思路不一样；
圣杯布局：为了中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后，将左右两个div用相对布局position:relative并分别配合right和left属性，以便在左右两栏div移动后不被遮挡中间div；
双飞翼布局：为了中间的div不被遮挡，直接再中间的div内部创建自div用于放置内容，在子div里面用margin-left和margin-right为左右两栏div留出位置；

1.圣杯布局

（1）DOM结构

<body>
 <div class="header">
  <h3>Header</h3>
 </div>
 <div class="container">
  <div class="middle">
   <h2>这个是中间的列</h2>
  </div>
  <div class="left">
   <h4>这个是左侧的列</h4>
  </div>
  <div class="right">
   <h4>这个是右侧的列</h4>
  </div>
 </div>
 <div class="footer">
  <h3>Footer</h3>
 </div>
</body>

（2）CSS代码

* {
 margin: 0;
 padding: 0;
}
/* 最小宽度 */
body {
 min-width: 600px;
}
/* header和footer随便加一个样式 */
.header,
.footer {
	border: 1px solid #333;
	background: #aaa;
	text-align: center;
}
/* 设置圣杯布局最中间部分，左右两边预留固定宽度 */
.container {
	padding-left: 200px;
	padding-right: 200px;
	overflow: hidden;
}
/* 将三列设置浮动以及最小高度 */
.middle,
.left,
.right {
	position: relative;
	float: left;
	min-height: 230px;
	text-align: center;
}
/* 中间部分将宽度设为100%，自适应 */
.middle {
	width: 100%;
	background-color: #B0C4DE;
}
/* 左侧使用负外边距nagetive margin（也就是将margin设为负值），
		再使用position，将其移动到middle的左侧预留出的200px位置显示 */
.left {
	width: 200px;
	margin-left: -100%;
	right: 200px;
	background-color: #5F9EA0;
}
/* 再将将右侧的放到预留位置即可 */
.right {
	width: 200px;
	margin-right: -200px;
	background-color: #98FB98;
}
/* footer设置浮动清除 */
.footer{
	clear: both;
}

（3）样式展示

圣杯布局效果

注意：在css样式中，给middle设置了width:100%，这是使中间列可以进行自适应的关键所在，可能有些人会觉得如果middle不设置宽度的情况下会默认将宽度设置为父元素container的100%宽度，但是我们将middle的样式设置成了浮动元素，因为浮动元素具有包裹性，所以在不设置其宽度的情况下会根据内容的多少而进行收缩变化，所以去掉width:100%样式后，当中间部分不包含或者有较少内容时会导致布局崩溃。

2.双飞翼布局

（1）DOM结构

<body>
	<div class="header">
			<h3>Header</h3>
	</div>
	<div class="main">
		<div class="main-inner">
				<h2>这个是中间列</h2>
		</div>
	</div>
	<div class="left">
		<h4>这个是左侧列</h4>
	</div>
	<div class="right">
		<h4>这个是右侧列</h4>
	</div>
	<div class="footer">
		<h3>Footer</h3>
	</div>
</body>

（2）CSS代码

* {
	margin: 0;
	padding: 0;
}

/* 设置最小宽度 */
body {
	min-width: 600px;
}

/* 设置头部和底部样式 */
.header,
.footer {
	border: 1px solid #333;
	background: #aaa;
	text-align: center;
}

/* 设置三列浮动和最小高度 */
.left,
.main,
.right {
	float: left;
	min-height: 230px;
	text-align: center;
}

/* 设置百分比宽度，使中间部分宽度自适应 */
.main {
	width: 100%;
}

/* 设置中间部分的样式，并且设置margin-left和margin-right为左右两列预留出了空间 */
.main-inner {
	margin-left: 200px;
	margin-right: 200px;
	min-height: 230px;
	background: #F5DEB3;
}

/* 设置左侧的样式，并将左侧的div放到预留位置上 */
.left {
	margin-left: -100%;
	width: 200px;
	background: #FF7F50;
}

/* 设置右侧样式，并将右侧的div放到预留位置上 */
.right {
	margin-left: -200px;
	width: 200px;
	background: #FFD700;
}

/* footer设置浮动清除 */
.footer {
	clear: both;
}

（3）样式展示

双飞翼布局效果

3.扩展与总结

（1）扩展：使用flex实现三列布局

上述的三列布局可以进行一定程度的简化，使用flex需要使用与圣杯布局相同的DOM结构

DOM结构

<body>
	<div class="container">
		<div class="middle">
			<h2>这个是中间部分</h2>
		</div>
		<div class="left">
			<h3>这个是左侧部分</h3>
		</div>
		<div class="right">
			<h3>这个是右侧部分</h3>
		</div>
	</div>
</body>

CSS代码

/* 最小宽度 */
body {
	min-width: 600px;
}

/* 设置flex布局 */
.container {
	display: flex;
}

/* 设置最小高度 */
.middle,
.left,
.right {
	min-height: 230px;
	text-align: center;
}

/* 设置中间件部分的样式 */
.middle {
	flex: 1;
	background-color: #B0C4DE;
}

/* 设置左侧部分的样式 */
.left {
	flex: 0 0 200px;
	order: -1;
	background-color: #5F9EA0;
}

/* 设置右侧部分的样式 */
.right {
	flex: 0 0 200px;
	background-color: #98FB98;
}