本文详细介绍了CSS布局的两种主要方式：固定布局和流动布局。在固定布局中，重点讲述了三栏固定宽度布局的实现，包括如何处理内边距、边框和浮动元素的问题，以及IE6和IE7的兼容性解决方案。而在流动布局部分，介绍了中栏流动布局和CSS3的table-cell方法，讨论了它们的优势和适用场景。
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;}
我们希望页眉和页脚与布局同宽，而且它们默认就与布局同宽,在此我们只简单地为它们设定了背景色，以便能看到它们在哪儿。
图示：
此时的页眉与布局同宽，其内容高度也比较合适。但是，页脚位于浮动元素后面所以就会尽量往上移动。解决这
最低0.47元/天 解锁文章
2973
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
