第九章DIV+CSS布局

9.1 DIV+CSS概述

DIV + CSS 是一种网页布局技术。其中，DIV（division）是 HTML 中的一个标签，主要用于划分网页的区域，它本身没有任何样式，只是一个块级元素。CSS（Cascading Style Sheets，层叠样式表）用于控制网页的样式，包括布局、颜色、字体等各个方面。通过将 DIV 和 CSS 结合使用，可以实现灵活、高效的网页布局。

9.1.1 认识DIV

定义和作用：DIV 是 HTML 中的块级元素，它可以用来划分网页的不同部分，就像在一张纸上划分不同的区域一样。例如，可以用一个 DIV 包裹网页的头部内容（如网站 logo、导航菜单），另一个 DIV 包裹主体内容（如文章、图片），还有一个 DIV 包裹底部内容（如版权信息、联系方式）。

9.1.2 DIV的宽高设置

9.1.2.1 宽高属性

在 CSS 中，width和height是用于设置元素宽高的属性。它们可以应用于 DIV 元素来控制其大小

div {

width: 300px; height: 200px;

}

9.1.2.2 div标签内直接设置宽高

除了在 CSS 文件或<style>标签中设置宽高，还可以直接在 DIV 标签内部使用style属性来设置。

<div style="width: 400px; height: 300px; background-color: yellow;"> 这个DIV直接在标签内设置了宽高和背景颜色 </div>

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><body><div style="width: 400px; height: 300px; background-color: yellow;"> 这个DIV直接在标签内设置了宽高和背景颜色 </div></body>
</html>

9.1.2.3 div使用选择器设置宽高

除了在标签内直接设置，还可以利用CSS选择器来设置DIV的宽高。先定义好合适的选择器（比如类选择器、ID选择器等），然后在对应的CSS规则中设置“width”和“height”属性的值，这样就可以批量地或者有针对性地对符合选择器条件的DIV元素进行宽高设置。

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>.d1{width: 30px;height: 20px;border: royalblue solid 2px;}</style></head><body><div class="d1">设置宽度高度px</div><div id="d2">设置宽度高度百分比</div></body>
</html>

9.1.2.4 div高度的百分比设置问题

当设置DIV高度为百分比时，情况会相对复杂一些。它的实际高度往往取决于其上级元素（父元素）的高度。如果父元素没有明确设置高度，那么子元素（DIV）设置的百分比高度可能无法按照预期显示，因为浏览器无法确定其具体的参照高度值，所以在使用百分比设置DIV高度时要特别注意其父元素的高度设置情况。

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>.d1{width: 300px;height: 200px;border: royalblue solid 2px;}*{width: 100%;height: 100%;}#d2{width: 50%;height: 40%;border: royalblue solid 2px;}</style></head><body><div class="d1">设置宽度高度px</div><div id="d2">设置宽度高度百分比</div></body>
</html>

9.2 DIV+CSS的应用

9.2.1 DIV元素的布局技巧

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>.d1{width: 300px;height: 200px;border: royalblue solid 2px;}*{width: 100%;height: 100%;}#d2{width: 50%;height: 40%;border: royalblue solid 2px;}#d3{width: 300px;height: 400px;border: blanchedalmond solid 20px;margin-left: auto;margin-right: auto;}</style></head><body><div class="d1">设置宽度高度px</div><div id="d2">设置宽度高度百分比</div><div id="d3">DIV盒子图片居中</div></body>
</html>

9.2.2 DIV元素的宽度自适应

DIV元素可以设置为宽度自适应的模式。这意味着它能够根据其内部包含内容的多少或者浏览器窗口的大小变化而自动调整自身的宽度。通常可以通过一些CSS属性和值的设置来达到这个效果，比如使用“width: auto;”或者结合一些弹性布局相关的属性等，这样能让网页在不同设备的不同屏幕宽度下都有较好的显示效果。

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>.d1{width: 300px;height: 200px;border: royalblue solid 2px;}*{width: 100%;height: 100%;}#d2{width: 50%;height: 40%;border: royalblue solid 2px;}#d3{width: 300px;height: 400px;border: blanchedalmond solid 20px;margin-left: auto;margin-right: auto;}#all{height: 200px;border: hotpink solid 3px;}#left{width: 100px;height: 100px;border: navy solid 3px;float: left;}#right{height: 200px;border: yellow solid 3px;margin-left: 100px;}</style></head><body><div class="d1">设置宽度高度px</div><div id="d2">设置宽度高度百分比</div><div id="d3">DIV盒子图片居中</div><div id="all"><div id="left">左盒子 宽度固定</div><div id="right">右盒子 自适应</div></div></body>
</html>

9.2.3 DIV内容的居中

要实现DIV内容的居中，可以采用多种方法。可以在DIV内部对文本等内容通过CSS的文本对齐属性（如“text-align: center;”）进行水平居中设置；对于DIV内部包含的其他元素（如图片等），可能需要结合一些布局属性（如相对定位、绝对定位等）以及设置相应的偏移量来实现居中效果，从而让整个DIV中的内容在视觉上呈现出居中的状态

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>.d1{width: 300px;height: 200px;border: royalblue solid 2px;}*{width: 100%;height: 100%;}#d2{width: 50%;height: 40%;border: royalblue solid 2px;}#d3{width: 300px;height: 400px;border: blanchedalmond solid 20px;margin-left: auto;margin-right: auto;}#all{height: 200px;border: hotpink solid 3px;}#left{width: 100px;height: 100px;border: navy solid 3px;float: left;}#right{height: 200px;border: yellow solid 3px;margin-left: 100px;}#d4{width: 300px;height: 100px;border: lightblue solid 4px;text-align: center;line-height: 100px;}</style></head><body><div class="d1">设置宽度高度px</div><div id="d2">设置宽度高度百分比</div><div id="d3">DIV盒子图片居中</div><div id="all"><div id="left">左盒子 宽度固定</div><div id="right">右盒子 自适应</div><div id="d4">div文字居中</div></div></body>
</html>

9.2.4 DIV元素的嵌套

DIV元素可以相互嵌套使用。即将一个DIV作为另一个DIV的子元素放置在其内部。通过这种嵌套方式，可以构建出更加复杂和层次分明的网页结构。比如可以用外层DIV来控制整体的布局框架，内层DIV来分别放置不同类型的内容，并且可以针对不同层次的DIV分别设置不同的样式，以实现丰富多样的页面效果。

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>.all{width: 700px;height: 700px;border: 2px solid red;margin: 0px auto;}.top{width: 700px;height: 100px;background-color: lightcyan;}.main{width: 700px;height: 520px;}.main .left{width: 180px;height: 500px;background-color: yellow;float: left;margin:10px;}.main .right{width: 480px;height: 500px;background-color: lightgreen;float: left;margin: 10px;}.footer{width: 700px;height: 80px;background-color: lightgray;}</style></head><body><div class="all"><div class="top"></div><div class="main"><div class="left"></div><div class="right"></div></div><div class="footer"></div></div></body>
</html>

9.3 DIV+CSS的典型布局

9.3.1 左中右布局

这是一种常见的网页布局方式。通过合理运用DIV元素以及CSS的相关属性，将页面从左到右划分为三个主要区域，分别放置不同的内容。通常会涉及到设置DIV的宽度、浮动属性等，以实现三个区域的并列排列，并且每个区域可以根据需要设置各自不同的内容和样式。

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>*{margin: 10px auto;padding: 0px auto;font-size: large;}.all{background-color: red;width: 700px;height: 500px;}.left,.main,.right{text-align: center;height: 480px;line-height: 480px;float: left;}.left{background-color: antiquewhite;width: 150px;}.main{background-color: lightcyan;width: 400px;}.right{background-color: antiquewhite;width: 150px;}</style></head><body><div class="all"><div class="left">导航菜单</div><div class="main">视觉集中区域，主要内容</div><div class="right">表单或链接</div></div></body>
</html>

9.3.2 上中下布局

同样是较为常见的布局形式。利用DIV元素和CSS属性把页面从上到下分成三个主要部分，分别用于承载不同的内容。可能会通过设置高度、边距等属性来明确各个部分的界限和外观，使得页面呈现出清晰的上中下分层结构，方便用户浏览和理解网页内容。

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>* {margin:0px auto;padding: 0px auto;font-size: large;}.all{background-color: red;text-align: center;width: 700px;height: 500px;}.top{background-color: antiquewhite;width: 680px;height: 80px;line-height: 80px;}.main{background-color: lightcyan;width: 680px;height: 340px;line-height: 340px;}.footer{background-color: antiquewhite;width: 680px;height: 80px;line-height: 80px;}</style></head><body><div class="all"><div class="top">导航或者横幅广告</div><div class="main">视觉集中区域，主要内容</div><div class="footer">版权信息</div></div></body>
</html>

9.3.3 混合布局

混合布局就是综合了左中右布局和上中下布局等多种布局方式的特点。在一个网页页面中，既存在着横向的区域划分（类似左中右布局），又存在着纵向的区域划分（类似上中下布局）。通过巧妙地运用DIV元素和CSS属性对不同区域进行设置和组合，可以构建出更加复杂、功能更全、视觉效果更丰富的网页页面布局，以满足不同的网页设计需求。

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>*{margin: 0px auto;padding: 0px auto;width: 100%;height: 100%;}.all{border: 2px dashed red;width: 95%;height: 100%;}.top{background-color: pink;width: 100%;height: 15%;}.main{height: 75%;width: 100%;}.left{background-color: yellow;width: 20%;float: left;}.centerr{background-color: lightcyan;width: 60%;float: left;}.right{background-color: yellow;}.footer{background-color: pink;width: 100%;height: 10%;}</style></head><body><div class="all"><div class="top"></div><div class="main"><div class="left"></div><div class="centerr"></div><div class="right"></div></div><div class="footer"></div></div></body>
</html>

9.4 综合案例——众成远程教育

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>众成远程教育</title><style type="text/css">*{margin:0px auto;}.all{width:1000px;height:840px;background-image: url(img/img/9-bg.jpg);}.top{width: 1000px;height:150px;}.main{background-color: aliceblue;width:1000px;height:630px;}.left{padding-top:30px;padding-left: 20px;width:200px;height:570px;float: left;line-height: 60px;}.center{border-left: 2px dashed blue;border-right:2px dashed blue;padding-top:50px;width:500px;height:580px;float: left;}.right{padding-left: 20px;width:250px;height:630px;float: left;}.footer{width:1000px;height:60px;font-family: "楷体";font-size: 18px;text-align: center;line-height: 30px;}a,span{color:red;font-weight: 700;text-align: center;}p{font-family: "黑体";font-weight: 700px;color:brown;font-size: 28px;text-align: center;}table{font-family: "黑体";font-weight: 700px;color:blue;font-size: 20px;line-height: 55px;}</style></head><body><div class="all"><div class="top"><img src="img/img/9-logo.jpg" width="708px" height="150px"/></div><div class="main"><div class="left"><p><img src="img/img/but2.jpg"/></p><p><img src="img/img/but3.jpg"/></p><p><img src="img/img/but4.jpg"/></p><p><img src="img/img/but5.jpg"/></p><p>相关信息</p><a href="#">4大学历提升方案</a><br /><a href="#">新报考政策解读击</a><br /><a href="#">6大类专业报考指南</a><br /><a href="#">更多链接请点击</a><br /></div><div class="center"><p>入学报名表</p><form id="form2" name="form2"method="post" action=""><table width="400" border="0" align="center" cellpadding="0"cellsapcing="0"><tr><td width="158" align="right">姓名：<label for="textfield"></label></td><td width="242"><input type="text" name="textfield" id="textfield"/></td></tr><tr><td align="right">联系电话：</td><td ><input type="text" name="textfield2" id="textfield2"/></td></tr><tr><td align="right">邮箱：</td><td ><input type="text" name="textfield3" id="textfield3"/></td></tr><tr><td align="right">资料邮寄地址：</td><td ><input type="text" name="textfield4" id="textfield4"/></td></tr><tr><td align="right">最高学历：</td><td ><select name="select2" id="select2"><option>大学本科</option><option>专科</option><option>高中</option><option>初中</option><option>小学</option></select></td></tr><tr><td align="right">选择的课程：</td><td ><input type="text" name="textfield6" id="textfield6"/></td></tr><tr><td align="right">意向学习方式：<label for="select2">></label></td><td ><select name="select" id="select"><option>网课授课</option><option>周末班</option><option>全日制</option></select></td></tr><tr><td colspan="2" align="center"><input type="image" name="imageField"id="imageField" src="img/but1.jpg"/></td></tr></table></form></div><div class="right"><img src="img/ing/pho1.jpg"/><img src="img/img/pho2.jpg"/><img src="img/img/pho3.jpg"/><img src="img/img/pho4.jpg"/></div></div><div class="footer"><span>免费电话：</span>400—XXX-XXX（18条线）||<span>(北京校区)</span>北京路XX大厦一楼0000号；||<span>(上海校区)</span>上海路XX科技园7栋9999号<br />此网站信息最终解释权&copy;众成远程教育</div></div></body>
</html>