内容提要
实现页面布局的三种方式：表格布局、框架布局、DIV+CSS布局
一、表格布局
1、优点
（1）实现方式比较简单。
（2）各个元素可以位于独立的单元格中，相互影响较小，而且对于浏览器的兼容性较好。
2、缺陷
（1）在某些浏览器下（例如IE），表格只有在全部下载完成后才可以显示。数据量比较大时会影响网页的浏览速度。
（2）搜索引擎难以分析较复杂的表格，而且网页样式的改版也比较麻烦。
（3）在多重表格嵌套的情况下，代码可读性较差，页面下载的速度也会受到影响。
3、目前，除了规模较小的网站之外，一般不采用表格布局
二、框架布局：
（1）利用框架来对页面空间进行有效的划分，每个区域可以显示不同的网页内容，各个区域之间互不影响。
（2）使用框架进行布局，可以使网页更整洁、清晰，网页下载的速度较快。
（3）但是如果框架使用较多，也会影响网页的浏览速度。对于内容较多，较复杂的网站最好不要采用框架布局。
（4）另外，框架和浏览器的兼容性不好，保存比较麻烦，应用的范围有限，一般也只应用于较小规模的网站。
三、DIV+CSS布局
对于规模较大的、比较复杂的网站大多数采用DIV+CSS方式来进行布局。DIV+CSS布局方式具有较为明显的优势。
1、优点
（1）内容和表现相分离。
（2）对搜索引擎的支持更加友好。
（3）文件代码更加精简，执行速度更快。
（4）易于维护。
2、缺陷
（1）DIV+CSS方式实现起来比较复杂，初学者不易掌握。
（2）DIV+CSS方式对于元素的控制太灵活，容易出错。
（3）DIV+CSS方式还没有解决浏览器的完全兼容。例如在IE浏览器上可以正常显示的页面，换作其它浏览器显示可能会面目全非。
（4）使用DIV+CSS布局网页的开发成本较高，开发周期较长。
CSS盒模型布局
• 在CSS中，页面中的所有元素都可以看成一个盒子，占据着页面上的一定的空间。
• CSS盒模型（Box Model）规定了元素处理内容、内边距、边框和 外边距 的方式。
CSS盒模型主要由四部分组成：
content： 盒模型里的内容，即元素的内容。
padding： 内边距，也称填充，指内容与边框的间距。
border： 边框，指盒子本身。
margin： 外边距，指与其他盒模型的距离。外边距默认是透明的，因此不会遮挡其后面的任何元素。
一个盒子的实际宽度或高度为：
content + padding + border
例如：
• 盒宽度= 1 + 10 + 300 + 10 + 1 = 322px
• 盒高度= 1 + 10 + 200 + 10 + 1 = 222px
盒子的宽度 = content-width + border-left + border-right + padding-left + padding-right
盒子的高度 = content-height + border-top + border-bottom + padding-top + padding-bottom
可以通过 CSS 来控制这些盒子的显示属性，把这些盒子进行定位完成整个页面的布局，盒模型是CSS定位布局的核心内容。
• 内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边，盒模型内边距、边框和外边距按照顺时针的顺序，可分别为 top、right、bottom 和 left 四个边。
（一）内边距 （padding）
元素的内边距在 边框 和 内容区 之间，padding 属性定义元素边框与元素内容之间的空白区域。内边距会影响盒子的可见框的大小，元素的背景会延伸到内边距。
1、属性
（1） 定义元素的内边距，属性值可以使用 长度值 或 百分比值，但不允许使用负值。
如希望所有h1元素的各边都有10像素的内边距：
h1{
padding:10px;
}
（2） 还可以按照 上、右、下、左 的顺序分别设置各边的内边距，各边均可以使用不同的单位 或 百分比值。
如：
h1{
padding:10px 0.25em 2ex 20%;
}
2、单边内边距
• 通过使用 padding-top、padding-right、padding-bottom和padding-left四个单独的属性，分别设置上、右、下、左内边距。
如：
h1{
padding-top:10px;
padding-right:0.25em;
padding-bottom:2ex;
padding-left:20%;
}
3、内边距的百分比数值
• 可以为元素的内边距设置百分数值，百分数值是相对于其父元素的width计算的。上下内边距与左右内边距一致，即上下内边距的百分数会相对于父元素宽度设置，而不是相对于高度。
如下面这条规则把段落的内边距设置为父元素width的10%：
p {
padding:10%;
}
• 下面实例说明了如何设置CSS内边距。
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>padding</title>
<style type="text/css">
div{
border:1px solid #F00;
margin-bottom:2px;
}
#div1{
padding:1.5cm
}
#div2{
padding:0.5cm 2.5cm
}
</style>
</head>
<body>
<div id="div1"><span>每个边拥有相等的内边距</span></div>
<div id="div2"><span>上和下内边距是 0.5cm，左和右内边距是 2.5cm</span></div>
</body>
</html>
（二）外边距（margin）
指的是 当前盒子 与 其他盒子 之间的距离，他不会影响可见框的大小，而是会影响到盒子的位置。
1、盒子有四个方向的外边距:
margin-top ：
margin-right ：
margin- bottom ：
margin-left ：
2、外边距同样可以使用 简写 属性margin：
（1）margin:10px; （上右下左均为10px）
（2）margin：10px 20px; （上下 左右）
3、可以 同时设置 四个方向的外边距 ：
margin: 10px 20px 30px 40px； （上 右 下 左）
4、margin还可以设置为auto,。auto一般只设置给水平方向的margin。
如：
margin：0 auto; （水平方向——居中）
注：（1）如果只指定 左外边距 或 右外边距 的 margin 为 auto 则会将外边距设置为最大值
（2）垂直方向外边距如果设置为 auto,则外边距默认就是 0，
就可以使元表自动在父元素中居中，所以我们经常将左右外边距设置为auto以使于子元素在父元素中水平居中
5、使网页整体居中
要使最外层的 div 在页面上居中显示，可使用以下样式：
#container{
margin:0 auto; // 盒子水平居中
text-align:center;
}
其中，margin:0 auto;指的是上下边距为0，左右为自动边距，对于IE6以上的浏览器可以实现居中。
text-align:center;是为了兼容IE6以下版本的浏览器。
6、垂直外边距
（1）在网页中垂直方向的相邻外边距会发生外边距的重叠
（2）外边距重叠指兄弟元素之间的相邻外边距会取最大值而不是取和。
DIV布局
• DIV全称为 Division（分隔），代表网页内容中的一个逻辑区域。DIV相当于一个容器，由起始标签 < div> 和结束标签 < /div> 以及其中的内容组成。在DIV内部可以嵌套各类元素。
• 一般的网页需要包括标志、站点名称、主页面内容、站点导航、子菜单、搜索区、功能区以及页脚等部分。每一部分可以使用一个div表示。各个div组成了整个网页的结构。每一个div都可以使用CSS的定位属性使其显示在页面的合适位置。
一、默认布局
div的默认布局为垂直排列。每个div在默认情况下是块级元素，div前后会出现换行。
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>DIV的默认布局-垂直排列</title>
<style type="text/css">
#lay1{
width:200px;
height:30px;
background-color:#90EE90;
}
#lay2{
width:200px;
height:30px;
background-color:#FFFACD;
}
#lay3{
width:200px;
height:30px;
background-color:#F08080;
}
</style>
</head>
<body>
<div id="lay1">1</div>
<div id="lay2">2</div>
<div id="lay3">3</div>
</body>
</html>
效果如下：
二、水平排列
如果要div水平排列，只需要将 div 的 float 属性设置为 left 即可。
即：
#lay1{
float:left;
}
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>DIV默认布局—水平排列</title>
<style type="text/css">
#lay1{
width:100px;
height:30px;
background-color:#90EE90;
float:left;
}
#lay2{
width:100px;
height:30px;
background-color:#FFFACD;
float:left;
}
#lay3{
width:100px;
height:30px;
background-color:#F08080;
float:left;
}
</style>
</head>
<body>
<div id="lay1">1</div>
<div id="lay2">2</div>
<div id="lay3">3</div>
</body>
</html>
效果如下：
三、div的嵌套
div之间可以互相嵌套，可以通过设置div的相关属性来确定各个div之间的位置。
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DIV的嵌套</title>
<style type="text/css">
#container{
width:300px;
height:120px;
background-color:#7B68EE;
padding-top:10px;
padding-right:20px;
padding-bottom:10px;
padding-left:20px;
text-align:center;
/*水平居中*/
margin-left:auto; /*左外边距 最大值*/
margin-right:auto; /*右外边距 最大值*/
}
#lay1{
width:200px;
height:30px;
background-color:#90EE90;
}
#lay2{
width:200px;
height:30px;
background-color:#FFFACD;
}
#lay3{
width:200px;
height:30px;
background-color:#F08080;
}
</style>
</head>
<body>
<div id="container">
<div id="lay1">1</div>
<div id="lay2">2</div>
<div id="lay3">3</div>
</div>
</body>
</html>
效果如下：
四、div 浮动
当div的 float 属性取值为 left 或者 right 时，即成为浮动对象。
div用于网页布局时，一般都是嵌套的。如果外层的 div 没有设定大小，而内层的 div 又是浮动的，浮动对象的物理位置会脱离文档流，因而对其父元素或者其后的元素的布局会产生影响，甚至会出现布局混乱的现象。
如：①
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DIV的浮动</title>
<style type="text/css">
#container{
background-color:#7B68EE;
}
#lay1{
float: left;
width:200px;
height:30px;
background-color:#90EE90;
}
#lay2{
width:200px;
height:30px;
background-color:#FFFACD;
}
#lay3{
float: left;
width:200px;
height:30px;
background-color:#F08080;
}
</style>
</head>
<body>
<div id="container">
<div id="lay1">1</div>
<div id="lay2">2</div>
<div id="lay3">3</div>
</div>
</body>
</html>
如：②
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DIV的浮动</title>
<style type="text/css">
#container{
background-color:#7B68EE;
}
#lay1{
width:200px;
height:30px;
background-color:#90EE90;
}
#lay2{
float: left;
width:200px;
height:30px;
background-color:#FFFACD;
}
#lay3{
float: left;
width:200px;
height:30px;
background-color:#F08080;
}
</style>
</head>
<body>
<div id="container">
<div id="lay1">1</div>
<div id="lay2">2</div>
<div id="lay3">3</div>
</div>
</body>
</html>
清除浮动可以消除浮动对象对其它元素的影响。
一般可以采用四种方法来清除浮动，分别为使用 空标签、使用 overflow 属性、使用 after伪对象 以及 浮动外部元素。
（一）使用空标签
使用空标签是最常用的清除浮动的方法，也是W3C推荐使用的方法。
空标签可以采用块级元素。
例如：<div>、<p> 以及 <br/> 等。
在浮动元素之后添加一个空标签，并使其 clear 属性取值为both（或者除 none 之外的其它属性值）。
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用空标签消除浮动</title>
<style type="text/css">
#container{
background-color:#7B68EE;
text-align:center;
margin-left:auto;
margin-right:auto;
padding:10px;
}
#lay1{
width:30%;
height:50px;
background-color:#90EE90;
float:left;
}
#lay2{
width:60%;
height:60px;
background-color:#FFFACD;
float:right;
}
</style>
</head>
<body>
<div id="container">
<div id="lay1"></div>
<div id="lay2"></div>
<div style="clear:both"></div> <!--空标签消除浮动-->
</div>
</body>
</html>
效果如下：
（二）使用overflow属性
可以把父级元素的 overflow 属性设置成 hidden、auto 或者 scroll 来清除浮动。
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>使用overflow属性消除浮动</title>
<style type="text/css">
#container{
background-color:#7B68EE;
text-align:center;
margin-left:auto;
margin-right:auto;
padding:10px;
overflow:auto;
zoom:1;
}
#lay1{
width:30%;
height:50px;
background-color:#90EE90;
float:left;
}
#lay2{
width:60%;
height:60px;
background-color:#FFFACD;
float:right;
}
</style>
</head>
<body>
<div id="container">
<div id="lay1"></div>
<div id="lay2"></div>
</div>
</body>
</html>
例：
（未清除浮动的div嵌套）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用空标签消除浮动</title>
<style type="text/css">
#container{
background-color:#7B68EE;
text-align:center;
margin-left:auto;
margin-right:auto;
padding:10px;
}
#lay1{
width:30%;
height:50px;
background-color:#90EE90;
float:left;
}
#lay2{
width:60%;
height:60px;
background-color:#FFFACD;
float:right;
}
</style>
</head>
<body>
<div id="container">
<div id="lay1"></div>
<div id="lay2"></div>
<!-- <div style="clear:both"></div> <!–空标签消除浮动–>-->
</div>
</body>
</html>
效果如下：
练习：
要求： 第一行嵌套在一个div中，注意需要清除浮动（overflow），2、3行也一样。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div盒子嵌套练习</title>
<link href="12.jpeg" rel="icon">
<style>
.box{ /*在 div 的 type 中添加另一个属性值同意设置，以便减少代码书写*/
width: 200px;
height: 100px;
border: 10px solid #cccbc5;
background-color:darkseagreen;
margin: 10px;
float: left;
padding: 10px;
}
.xiao{
width: 160px;
height: 60px;
background-color: #cccccc;
border: 10px solid #92a1eb;
padding: 10px;
margin: 10px;
float: right;
}
.main{
overflow: hidden; /*利用overflow属性清除浮动*/
}
</style>
</head>
<body>
<div>
<div class="box1 box">这个盒子大小为240*140px<br/>内容区为200*100px</div>
<div class="box2 box">这个盒子大小为240*140px<br/>内容区为200*100px</div>
<div class="box3 box">这个盒子大小为240*140px<br/>内容区为200*100px</div>
<div style="clear:both"> <!--利用空标签清除浮动-->
</div>
<div class="main">
<div class="box4 box">这个盒子大小为240*140px<br/>内容区为200*100px</div>
<div class="box5 box">这个盒子大小为240*140px<br/>内容区为200*100px</div>
</div>
<div class="box6 xiao">这个盒子大小为200*100px<br/>内容区为160*60px</div>
<div class="box7 xiao">这个盒子大小为200*100px<br/>内容区为160*60px</div>
</body>
</html>
效果如下：
扫一扫
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
