CSS固定布局与流动布局

CSS布局方式

一  固定布局：

1  三栏固定宽度：思路 先写一栏，再左浮动写第二栏，再左浮动写第三栏。注意：将三栏的总宽度设为960px。所以创建一个总 容器。

html代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>布局</title>
	<script type="text/javascript" src="demo.js"></script>
	<link rel="stylesheet" type="text/css" href="demo.css">
</head>
<body>
	<div id="container"><!--总-->
		<nav><!--左导航栏-->
			<ul>
				<li><a href='#'>链接1</a></li>
				<li><a href='#'>链接2</a></li>
				<li><a href='#'>链接3</a></li>
				<li><a href='#'>链接4</a></li>
				<li><a href='#'>链接5</a></li>
				<li><a href='#'>链接6</a></li>
				<li><a href='#'>链接7</a></li>
			</ul>
		</nav>
		<article><!--中间-->
			<p>钱袋子更鼓了！ 去年安徽城镇居民人均可支配收入增长8.5%</p>
			去年，全省城镇常住居民人均可支配收入同比增长8.5%。社会保险费率政策阶段性实施，为企业减负26.8亿元。援企稳岗补贴政策推行，帮助困业缓缴社会保险费18.7亿元，发放稳岗补贴10.3亿元，稳定就业岗位481.4万个。从2016年起，两年来安置去产能分流职工6.2万人。2017年起，实施为期三年的精准帮扶精准就业精准脱贫专项行动计划，支持大别山区等地的扶贫开发工作，帮助13.2万贫困劳动者就业、创业。五年来，全省新增就业人口335万人，共招录公务员3.3万人，培训120万人次。
		</article>
		<aside><!--右边-->
			民生保障网进一步织密,企业退休人员基本养老金连续增加,月人均达到2232元,与五年前相比增长51.6%;城乡居民基础养老金最低标准提高17元:查处工资类案件2700件,清理拖欠农民工工资7.77亿元
	    </aside>
	</div>
</body>
</html>

css代码：

*{	
	margin: 0 ;
	padding: 0;
}
#container{
	width: 960px;
	margin: 0 auto;  
	border:1px solid #ccc;
}
nav{
	width: 150px;
	float: left;
	background: #ccc;
}
nav ul li{
	list-style-type: none;  /*去掉圆点*/
}
article {
	background:#ffed53;
	width: 600px;
	float: left;
}
aside{
	background: #3f7ccf;
	width: 210px;
	float: left;
}

说明：将三栏宽度分别设为150px,600px;210px，保证总宽度为960px不要设置高度;都设为左浮动。

图示：

再设置头尾：
css:header{background:#f00;}  footer{ background:#666;}

我们希望页眉和页脚与布局同宽，而且它们默认就与布局同宽,在此我们只简单地为它们设定了背景色，以便能看到它们在哪儿。

图示：


此时的页眉与布局同宽，其内容高度也比较合适。但是，页脚位于浮动元素后面所以就会尽量往上移动。解决这个问题也很简单.

css中添加 footer {clear:both;}

接着调整各栏的内容

问题：只要一调整各栏中的内容，布局就可能超过容器宽度，而右边的栏就可能滑到左边的栏下方。
原因：
1  为了让内容与栏边界空开距离，为栏添加水平外边距和内边距，或者为了增加栏间距，为栏添加外边距，导致布局宽度增大，进而浮动栏下滑。换句话说，右边浮动的栏因为没有足够的空间与其他栏并列，就会滑到左边栏的下方.
2  在栏中添加大图片，或者没有空格的长字符串（如长URL），也会导致栏宽超过布局宽度。同样，这种情况下右边的栏也会滑到左边的栏下方。
比如在中间栏的文本四周都增加了间距，与栏边界保持了一定距离。可是，这样一来由于中间栏的总宽度增加，导致右边的栏不能再与前两栏并排在一起，结果就跑到了左边栏的下方。
解决方法：
1）：重设宽度以抵消内边距和边框。
       从设定的元素宽度中减去添加的水平外边距、边框和内边距的宽度和。比如要添加padding:10px 20px;

       原来中间宽度是600px;要添加20px的内边距保证盒子大小不变，可以将中间栏的宽改为600-40=560px。

2）：给容器内部的元素应用内边距和边框。

        在栏中再添加一个没有宽度的div ，让它包含所有内容元素，然后再给这个div应用边框和内边距。

html:<div class:inner></div>

css:

article .inner{
	margin: 10px;
	border: 1px solid red;
	padding: 20px;
}

图示：

发现：中间栏的宽度并没有改变，因为内容区减少的宽度抵消了应用到内部div上的外边距、边框和内边距的总宽度。

结论：如果布局中的栏是浮动的，而且都设定了宽度，你就根本不要去动它！要动，就把内容放在内部div里，动这个div。

处理栏及其内部div的关键在于：浮动栏并设定栏宽，但不给任何内容元素设定宽度。要让内容元素扩展以填充它们的父元素——内部div。这样，只要简单地设定内部div的外边距和内边距，就可以让它们以及它们包含的内容与栏边界保持一定距离。

子-星选择符：article>*选择所有的子元素而非后代元素。

3）：使用box-sizing:border-box。

只要在三个浮动的栏的CSS规则中分别加上box-sizing:border-box声明，再给栏添加内边距（和边框）就不会导致盒子的宽度变化了。此时，既不用调整栏宽去抵消增加的内边距，不用使用内部div。添加内边距的结果就是内容收缩。

css:

*{	
	margin: 0 ;
	padding: 0;
}
#container{
	width: 960px;
	margin: 0 auto;
	border:1px solid #ccc;
}
header{
	background:#f00;
}
nav{
	box-sizing: border-box;
	padding: 10px 20px;
	width: 150px;	
	float: left;
	background: #ccc;
}
nav ul li{
	list-style-type: none;  /*去掉圆点*/
}
article {
	box-sizing: border-box;
	padding: 10px 20px;
	background:#ffed53;
	width: 600px;
	float: left;
}
aside{
	box-sizing: border-box;
	padding: 10px 20px;
	background: #3f7ccf;
	width: 210px;
	float: left;
}
footer{
	background:#666;
	clear: both;
	text-align: center;
}

PS:IE6和IE7不支持box-sizise属性,有一个专门解决这个问题的脚本（polyfill）,名叫borderBoxModel.js（https://github.com/albertogasparin/borderBoxModel）.你可以把它添加到HTML标记之后、结束的</body>标签之前，以保证在加载DOM之后再执行该脚本。

图示：

预防元素过大比如后期开发插入了一个较大的图片导致栏变宽，解决方法：

1）：img{max-width:100%}

2）：overflow：hidden；

一些长 URL，甚至一些长单词，在栏比较窄的情况下，都会导致栏宽过大。还应该给所有栏的外包装元素应用word-wrap:break-word声明。

4) 分别再用一个div包围住设置宽度。由于宽度限制里面的div宽度不会超过外面的div。

二 流动布局：

1  三栏-中栏流动布局：

html:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>布局</title>
	<script type="text/javascript" src="demo.js"></script>
	<link rel="stylesheet" type="text/css" href="demo.css">
</head>
<body>
	<div id="container">
		<header>
			我们希望页眉和页脚与布局同宽，而且它们默认就与布局同宽,在此我们只简单地为它们设定了背景色，以便能看到它们在哪儿。
		</header>
		<div id="three"><!--包含三栏-->
			<div id="two"><!--包含两栏-->
				<nav><!--左导航栏-->			
					<ul>
						<li><a href='#'>链接1</a></li>
						<li><a href='#'>链接2</a></li>
						<li><a href='#'>链接3</a></li>
						<li><a href='#'>链接4</a></li>
						<li><a href='#'>链接5</a></li>
						<li><a href='#'>链接6</a></li>
						<li><a href='#'>链接7</a></li>
					</ul>
				</nav>			
			<article><!--中间-->
				<!--没有宽度的div给内容设置边框和内边距不影响外部布局-->
				<p>钱袋子更鼓了！ 去年安徽城镇居民人均可支配收入增长8.5%</p>
					去年，全省城镇常住居民人均可支配收入同比增长8.5%。社会保险费率政策阶段性实施，为企业减负26.8亿元。援企稳岗补贴政策推行，帮助困业缓缴社会保险费18.7亿元，发放稳岗补贴10.3亿元，稳定就业岗位481.4万个。从2016年起，两年来安置去产能分流职工6.2万人。2017年起，实施为期三年的精准帮扶精准就业精准脱贫专项行动计划，支持大别山区等地的扶贫开发工作，帮助13.2万贫困劳动者就业、创业。五年来，全省新增就业人口335万人，共招录公务员3.3万人，培训120万人次。
			</article>
			</div>
			<aside><!--右边-->
				民生保障网进一步织密,企业退休人员基本养老金连续增加,月人均达到2232元,与五年前相比增长51.6%;城乡居民基础养老金最低标准提高17元:查处工资类案件2700件,清理拖欠农民工工资7.77亿元清理拖欠农民工工资7.77亿元
		        </aside>
	        </div>
	    <footer>
	    	此时的页眉与布局同宽，其内容高度也比较合适。但是，页脚位于浮动元素后面所以就会尽量往上移动。解决这个问题也很简单.
	    </footer>
	</div>
</body>
</html>

css:

*{	
	margin: 0 ;
	padding: 0;
}
#container{
	margin: 0 auto;
	min-width: 600px;      /*最小宽度*/
	max-width: 1100px;     /*最大宽度*/
}
header{
	background:#f00;
	padding: 5px 10px;
}
#three{
	float: left;
	width: 100%;
}
#two{
	float: left;
	width: 100%;
	margin-right: -210px;/*把右栏拉到区块外边距腾出的位置 210是右栏的宽度*/
}
nav{
	padding: 20px 0;   /*此时padding只影响高度*/
	width: 150px;	
	float: left;
	background: #ccc;
}
nav > *{margin:0 10px;}
nav ul li{
	list-style-type: none;  /*去掉圆点*/
}
article {    /*没有浮动*/		
	margin-left: 150px;  /*防止内容溢出到左栏上*/
	margin-right: 210px; /*在流动居中的栏右侧腾出空间*/
	background:#ffed53;
	width: auto;         /*宽度设为auto 最小*/
	padding: 20px 0;
}
article > * {margin:0 20px;}
aside{
	padding: 20px 0;
	background: #3f7ccf;
	width: 210px;
	float: left;
}
aside > * {margin:0 10px;} 
footer{
	width: 100%;
	background:#666;
	clear: both;
	text-align: center;
}

说明：首先将中间一栏的宽度设为auto,这个容器宽度最小600px最大1100px，中间一栏变化。

问题：第二栏宽度是auto如何将第三栏放上去。

方案：首先创建两个div分别包裹前两栏和三栏。都设为左浮动，左栏和右栏都为左浮动，中间一栏是变化的不浮动；

接着将中间一栏 margin-right: 210px; margin-right的值设为第三栏的宽度这是就会空出210px;这属于中间一栏的，第三栏不能上来，这时将前两栏  margin-right: -210px; margin-right的值设为-210px;就会把右栏拉过来。

最后将中间一栏 margin-left: 150px;  防止内容溢出到左栏上。

图1：

图2：


PS：'人造栏' 技术:就是给包围栏的外包装元素应用 与各栏同宽的背景图片和背景色,设置 background:repeat-y;保证图片铺满。

效果：看起来三栏同宽。

2 CSS3单元格实现：

优点：

1） 单元格（table-cell）不需要浮动就可以并排显示，而且直接为它们应用内边距也不会破坏布局。

2） 默认情况下，一行中的所有单元格高度相同，因而也不需要人造的等高栏效果了。

3 ）任何没有明确设定宽度的栏都是流动的。

方法：把三栏的display属性都设定为table-cell就可以了。

html:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>布局</title>
	<script type="text/javascript" src="demo.js"></script>
	<link rel="stylesheet" type="text/css" href="demo.css">
</head>
<body>
	<div id="container">
		<header>
			我们希望页眉和页脚与布局同宽，而且它们默认就与布局同宽,在此我们只简单地为它们设定了背景色，以便能看到它们在哪儿。
		</header>
			<nav><!--左导航栏-->			
				<ul>
					<li><a href='#'>链接1</a></li>
					<li><a href='#'>链接2</a></li>
					<li><a href='#'>链接3</a></li>
					<li><a href='#'>链接4</a></li>
					<li><a href='#'>链接5</a></li>
					<li><a href='#'>链接6</a></li>
					<li><a href='#'>链接7</a></li>
				</ul>
			</nav>			
			<article><!--中间-->
				<!--没有宽度的div给内容设置边框和内边距不影响外部布局-->
					<p>钱袋子更鼓了！ 去年安徽城镇居民人均可支配收入增长8.5%</p>
					去年，全省城镇常住居民人均可支配收入同比增长8.5%。社会保险费率政策阶段性实施，为企业减负26.8亿元。援企稳岗补贴政策推行，帮助困业缓缴社会保险费18.7亿元，发放稳岗补贴10.3亿元，稳定就业岗位481.4万个。从2016年起，两年来安置去产能分流职工6.2万人。2017年起，实施为期三年的精准帮扶精准就业精准脱贫专项行动计划，支持大别山区等地的扶贫开发工作，帮助13.2万贫困劳动者就业、创业。五年来，全省新增就业人口335万人，共招录公务员3.3万人，培训120万人次。
			</article>			
			<aside><!--右边-->
				民生保障网进一步织密,企业退休人员基本养老金连续增加,月人均达到2232元,与五年前相比增长51.6%;城乡居民基础养老金最低标准提高17元:查处工资类案件2700件,清理拖欠农民工工资7.77亿元清理拖欠农民工工资7.77亿元
		    </aside>
	    <footer>
	    	此时的页眉与布局同宽，其内容高度也比较合适。但是，页脚位于浮动元素后面所以就会尽量往上移动。解决这个问题也很简单.
	    </footer>
	</div>
</body>
</html>

css:

*{	
	margin: 0 ;
	padding: 0;
}
header{
	background:#f00;
	padding: 5px 10px;
}
nav{
	display: table-cell;	
	width: 150px;
	padding: 10px 0;  	 /*这里设置padding上下 不影响布局大小*/		
	background: #ccc;
}
nav ul li{
	list-style-type: none;  /*去掉圆点*/
}
article {    
	display: table-cell;
	padding: 10px;      /*这里设置padding不影响布局大小*/	
	background:#ffed53;
}
aside{
	display: table-cell;	
	background: #3f7ccf;
	padding: 10px 0;
	width: 210px;
}
footer{
	width: 100%;
	background:#666;
	clear: both;
	text-align: center;
}

图一：


图二：

PS:浏览器的排版引擎在碰到没有表行（tr）的一组单元格时，会自动为它们添加表行，而在表行没有被table元素包围时，会自动为表行添加table。因此，你不需要多写任何标记，只要把每一栏的display属性设定为tablecell。

IE6,IE7不支持!

总结：固定布局：使用内部div的浮动固定宽度布局技术，调整栏中内容边距不影响整体布局的3种方法：

         1 重设宽度以抵消内边距和边框。（调整麻烦）；

         2 给容器内部的元素应用内边距和边框；

         3：使用box-sizing:border-box（IE6，7不支持）加上borderBoxModel.js。

流动布局：

三栏-中栏流动布局；

CSS3的 display:table-cell方案实现（IE以上）。


版权声明：本文为qq_41179401原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。