DIV+CSS固定页⾯布局
本⽂讲解使⽤DIV+CSS布局最基本的内容，读完本⽂你讲会使⽤DIV+CSS进⾏简单的页⾯布局。
DIV+CSS布局中主要CSS属性介绍：
Float:
Float属性是DIV+CSS布局中最基本也是最常⽤的属性，⽤于实现多列功能，我们知道<div>标签默认⼀⾏只能显⽰⼀个，⽽使⽤Float 属性可以实现⼀⾏显⽰多个div的功能，最直接解释⽅法就是能实现表格布局的多列功能。
Margin:
Margin属性⽤于设置两个元素之间的距离。
Padding:
Padding属性⽤于设置⼀个元素的边框与其内容的距离。
Clear:
使⽤Float属性设置⼀⾏有多个DIV后（多列），最好在下⼀⾏开始之前使⽤Clear属性清楚⼀下浮动，否则上⾯的布局会影响到下⾯。
实例讲解：下⾯使⽤实例如果做⼀个简单⼜基本的布局，效果如下图：
代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
31 32 33 34 35 36<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""">
<html xmlns="">
<head>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>
<title>DIV+CSS布局教程</title>
<style type="text/css">
#Container{
width:1000px;
margin:0auto;/*设置整个容器在浏览器中⽔平居中*/
background:#CF3;
}
#Header{
height:80px;
background:#093;
}
#logo{
padding-left:50px;
padding-top:20px;
padding-bottom:50px;
}
#Content{
height:600px;
/*此处对容器设置了⾼度，⼀般不建议对容器设置⾼度，⼀般使⽤overflow:auto；属性设置容器根据内容⾃适应⾼度，如果不指定⾼度或不设置⾃适应⾼度，容器将默认为1个字符⾼度，容器下⽅的布局元素（footer）设置margin-top：属性将⽆效*/
margin-top:20px;/*此处讲解margin的⽤法，设置content与上⾯header元素之间的距离*/
background:#0FF;
}
#Content-Left{
height:400px;
width:200px;
margin:20px;/*设置元素跟其他元素的距离为20像素*/
float:left;/*设置浮动，实现多列效果，div+Css布局中很重要的*/
background:#90C;
}
#Content-Main{
height:400px;
36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67
height:400px;
width:720px;
margin:20px;/*设置元素跟其他元素的距离为20像素*/
float:left;/*设置浮动，实现多列效果，div+Css布局中很重要的*/
background:#90C;
}
/*注：Content-Left和Content-Main元素是Content元素的⼦元素，两个元素使⽤了float:left；设置成两列，这个两个元素的宽度和这个两个元素设置的padding、margin的和⼀定不能⼤于⽗层Content元素的宽度，否则设置列将失败*/
#Footer{
cssclass属性height:40px;
background:#90C;
margin-top:20px;
}
.Clear{
clear:both;
}
</style>
</head>
<body>
<div id="Container">
<div id="Header">
<div id="logo">这⾥设置了padding属性介绍⼀下padding的⽤法,padding将设置⽂本与边框的距离。</div>
</div>
<div id="Content">
<div id="Content-Left">Content-Left</div>
<div id="Content-Main">Content-Main</div>
</div>
<div class="Clear"><!--如何你上⾯⽤到 float，下⾯布局开始前最好清除⼀下。--></div>
<div id="Footer">Footer</div>
</div>
</body>
</html>
注解：Container作为整个页⾯的容器，控制着整个页⾯在浏览器的位置，此处使⽤margin:0 auto；控制Container容器在浏览器中⽔平居中，⼀般固定宽度的布局都会⽤到这就代码。
本⽂只讲述最基本的布局，在具体开发实践中可能会遇到浏览器兼容性等其他问题，遇到细节问题请⾃⾏百度解决，解决的多了经验就积累起来了。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。