CSS 三栏布局之宽度自适应

开场白

页面采用流动性布局（亦可称自适应布局）在网页设计中现在已经很常见了，今天整理了一些关于宽度自适应的内容，希望加深自己对宽度自适应原理的理解。
参考了一篇挺好的博客，这篇博客帮助我很快的理解了三种自适应方法的原理，下面我将融合一些自己的理解，对自适应基于样例做一些记录。
参考博客如下：
https://www.zhangxinxu.com/wordpress/2009/11/我熟知的三种三栏网页宽度自适应布局方法/

一、布局描述

三栏布局，左右栏固定宽度200px，中间栏宽度自适应，高度都是100%。
效果：
CSS 三栏布局之宽度自适应

二、绝对定位法

先看代码：

<!DOCTYPE html>
<html>
<head>
	<title>Adaptive layout</title>
	<style type="text/css">
		html,body{
			margin: 0;
			height: 100%;
		}
		#left,#right{
			position: absolute;/*here is the point*/
			top: 0;
			width: 200px;
			height: 100%;
		}
		#left{
			left: 0;/*here is the point*/
			background: pink;
		}
		#right{
			right: 0;/*here is the point*/
			background: pink;
		}
		#main{
			margin: 0 210px;/*here is the point*/
			background: black;
			height: 100%;
		}
	</style>
</head>
<body>
	<div id="left"></div>
	<div id="main"></div>
	<div id="right"></div>
</body>
</html>

原理：

在HTML中，三个块分别以左中右的方式排列，文档流的顺序为左中右；
在CSS中将左右两栏设置成绝对定位，使它们脱离文档流，此时它们不再与中间栏相互影响；
对中间栏设置左右 margin 值为210px，大于左右栏的宽度（其实随便设置，设置大于左右栏的宽度知识为了显示效果清楚而已，如果设置了一个比较小的值，左右栏会覆盖在上面）；
左右栏已经不受文档流控制，分别设置它们 left的值为0，right的值为0，此时左右栏距离父元素（即body，因为body设置了 margin 值为0，所以相当于设置左右栏距离浏览器窗口边框的距离），实现了左右栏的位置定位。

三、margin负值法

先看代码：

<!DOCTYPE html>
<html>
<head>
	<title>Adapting layout by negative margin value</title>
	<style type="text/css">
		html,body{
			margin: 0;
			height: 100%;
		}
		#main{
			width: 100%;
			height: 100%;
			float: left;/*here is the point*/
		}
		#main #body{
			margin: 0 210px;
			background: black;
			height: 100%;
		}
		#left,#right{
			width: 200px;
			height: 100%;
			float: left;/*here is the point*/
			background: pink;
		}
		#left{
			margin-left: -100%;/*here is the point*/
		}
		#right{
			margin-left: -200px;/*here is the point*/
		}
	</style>
</head>
<body>
	<div id="main">
		<div id="body"></div>
	</div>
	<div id="left"></div>
	<div id="right"></div>
</body>
</html>

原理：

在HTML中，嵌套的div作为中间栏，然后是左右栏，这样设置的目的是为了CSS样式调整时，采用float和 margin 负值对位置进行调整，样式设计如下：
三个部分都设置 float: left，呈现的效果应该为：
（图一）
再看main块和body块的样式设计：

所以实际呈现出来的是这样子：（红色块是class为body的块，与区分开）

但是位置调整还是可以按照理论上的（如图一所示）进行。
对左栏的定位为：

margin-left : 100% 的意思是，为左栏清除左边的间距（间距大小=父元素的100%，这里是body的100%），效果为：
对右栏的定位与实现效果：

四、float自身浮动

先看代码：

<!DOCTYPE html>
<html>
<head>
	<title>Adapting_float</title>
	<style type="text/css">
		html,body{
			margin: 0;
			height: 100%;
		}
		#main{
			height: 100%;
			margin:0 210px;
			background: black;
		}
		#left,#right{
			width: 200px;
			height: 100%;
			background: pink;
		}
		#left{
			float: left;
		}
		#right{
			float: right;
		}
	</style>
</head>
<body>
	<div id="left"></div>
	<div id="right"></div>
	<div id="main"></div>
</body>
</html>

原理：

对左右栏设置 float ，使得它们脱离文档流，与中间栏互不影响。然后让左右栏各自向左向右浮动即可：
CSS 三栏布局之宽度自适应

CSS 三栏布局之宽度自适应

开场白

一、布局描述

二、绝对定位法

原理：

三、margin负值法

原理：

四、float自身浮动

原理：

相关推荐