第九章 DIV+CSS布局

最新推荐文章于 2025-10-29 10:27:03 发布

原创最新推荐文章于 2025-10-29 10:27:03 发布 · 1.4k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

9.1 DIV+CSS概述

9.1.1 认识DIV

<div> 标签是HTML中的一种块级元素，用于定义文档中的一个分区或区域。它是一个容器，可以包含文本、图像、列表、表格、段落、其他块级元素，甚至是其他 <div> 元素。<div> 标签本身不会在页面上显示任何内容，但它可以作为组织和布局HTML文档的工具

9.1.2 DIV的宽高设置
1 宽高属性
在CSS中，可以通过 width 和 height 属性来设置 <div> 元素的宽度和高度。这两个属性接受长度值（如px, em）或百分比值。例如，可以设置一个 <div> 的宽度为200像素，高度为100像素：

#myDiv {
    width: 200px;
    height: 100px;
}

这样定义的 <div> 会在页面上显示为一个200x100像素的矩形区域。

2 div标签内直接设置宽高
虽然可以直接在 <div> 标签内使用 style 属性来设置宽度和高度，例如：
<div style="width: 200px; height: 100px;"></div>
但这种方法不推荐使用，因为内联样式会使HTML代码变得冗长且难以维护，不利于代码的复用

3 div使用选择器设置宽高
更推荐的方式是通过外部CSS文件或者 <style> 标签来设置 <div> 的宽度和高度。例如，可以为 <div> 设置一个类名 .myDiv，然后在CSS中这样写：

.myDiv {
    width: 200px;
    height: 100px;
}

这样做的好处是可以将样式和结构分离，提高代码的可读性和可维护性

4 div高度的百分比设置问题
当给 <div> 设置百分比高度时，它实际上是相对于其父容器的高度。如果父容器没有明确的高度，则子元素的百分比高度可能不会按预期工作。为了使百分比高度生效，通常需要确保所有祖先元素都有明确的高度设置。例如：

.parent {
    height: 500px; /* 父容器的高度 */
}
 
.child {
    height: 50%; /* 子元素的高度为父容器高度的50% */
}

在这种情况下，.child 的高度将是250像素

9.2 DIV+CSS的应用

9.2.1 DIV元素的布局技巧

在网页设计中，<div> 元素是最常用的布局工具之一。通过CSS，可以实现各种复杂的布局效果。以下是几种常见的布局技巧：

浮动布局：使用 float 属性可以让 <div> 浮动到页面的左侧或右侧，常用于创建多列布局。例如，可以创建一个两列布局：

<div class="left-column">左边栏</div>
<div class="right-column">右边栏</div>
.left-column {
    float: left;
    width: 30%;
}
 
.right-column {
    float: right;
    width: 70%;
}

定位布局：通过 position 属性（如 relative, absolute, fixed 或 sticky），可以精确控制 <div> 在页面上的位置。例如，可以创建一个固定在页面顶部的导航栏：

<div class="navbar">导航栏</div>
<div class="content">内容区域</div>
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #333;
    color: white;
    padding: 10px;
}
 
.content {
    margin-top: 50px; /* 为内容区域留出导航栏的空间 */
}

Flexbox 布局：Flexbox 是一种一维布局模型，提供了更加灵活的布局方式，能够轻松实现响应式设计。例如，可以创建一个水平居中的容器：

<div class="container">
    <div class="item">项目1</div>
    <div class="item">项目2</div>
    <div class="item">项目3</div>
</div>
.container {
    display: flex;
    justify-content: center;
    align-items: center;
}
 
.item {
    margin: 10px;

Grid 布局：

概念：Grid 布局是一种二维布局模型，允许开发者以行和列的形式排列项目，非常适合复杂布局的设计。
示例：创建一个3x3的网格布局。

<div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>
</div>
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 10px;
}
 
.grid-item {
    background-color: #f0f0f0;
    padding: 20px;
    text-align: center;
}

9.2.2 DIV元素的宽度自适应
使用百分比：

概念：设置 <div> 的宽度为百分比，使其根据父容器的大小自动调整。
示例：

.responsive-div {
    width: 100%;
}

使用 max-width 和 min-width：

概念：这些属性可以限制 <div> 的最大和最小宽度，有助于在不同屏幕尺寸上保持良好的显示效果。
示例：

.responsive-div {
    max-width: 800px;
    min-width: 300px;
    margin: 0 auto;
}

使用 Flexbox 和 Grid：

概念：这两种现代布局技术都支持项目的自适应调整，能够很好地处理不同设备上的布局需求。
示例：使用 Flexbox 创建一个响应式布局。

<div class="flex-container">
    <div class="flex-item">项目1</div>
    <div class="flex-item">项目2</div>
    <div class="flex-item">项目3</div>
</div>
.flex-container {
    display: flex;
    flex-wrap: wrap;
}
 
.flex-item {
    flex: 1;
    min-width: 300px;
    margin: 10px;
}

9.2.3 DIV内容的居中
水平居中：

概念：对于块级元素，可以设置 margin-left 和 margin-right 为 auto；对于行内元素，可以使用 text-align: center。
示例：

.center-block {
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}
 
.center-inline {
    text-align: center;
}

垂直居中：

概念：可以利用 Flexbox 的 align-items: center 或者 Grid 的 align-items: center 来实现垂直居中。
示例：

.center-vertical {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

9.2.4 DIV元素的嵌套

概念：
<div> 元素可以相互嵌套，形成复杂的页面结构。嵌套时需要注意层次关系和CSS的选择器优先级，合理规划布局可以提高页面的可读性和可维护性。
示例：创建一个包含头部、内容和底部的布局。

<div id="main">
    <div class="header">头部</div>
    <div class="content">
        <div class="left-column">左边栏</div>
        <div class="right-column">右边栏</div>
    </div>
    <div class="footer">底部</div>
</div>
#main {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
 
.header {
    background-color: #4CAF50;
    color: white;
    padding: 20px;
    text-align: center;
}
 
.content {
    flex: 1;
    display: flex;
}
 
.left-column {
    flex: 1;
    background-color: #f0f0f0;
    padding: 20px;
}
 
.right-column {
    flex: 2;
    background-color: #ffffff;
    padding: 20px;
}
 
.footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px;
}

9.3 DIV+CSS的典型布局

9.3.1 左中右布局

左中右布局是指页面分为三个部分，分别位于页面的左边、中间和右边。这种布局常见于新闻网站或博客首页。可以通过浮动、Flexbox 或 Grid 实现。例如，使用 Flexbox 创建一个左中右布局：

.container {
    display: flex;
}
 
.left-sidebar {
    flex: 1;
    background-color: #f0f0f0;
}
 
.main-content {
    flex: 3;
    background-color: #ffffff;
}
 
.right-sidebar {
    flex: 1;
    background-color: #f0f0f0;
}

9.3.2 上中下布局

上中下布局是指页面从上至下依次为头部、主体和底部。头部通常包含网站的logo和导航菜单，主体展示主要内容，底部则放置版权信息等。这种布局非常普遍，适用于大多数类型的网站。同样，可以通过多种CSS技术实现。例如，使用 Flexbox 创建一个上中下布局：

.container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
 
.header {
    background-color: #4CAF50;
    color: white;
    padding: 20px;
    text-align: center;
}
 
.main {
    flex: 1;
    padding: 20px;
}
 
.footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px;
}

9.3.3 混合布局

混合布局结合了以上两种或多种布局的特点，比如既有左右分布的侧栏，也有上下分布的头部和尾部。混合布局更加灵活多变，可以根据具体需求设计出满足不同功能要求的页面布局。实现时可能需要综合运用浮动、定位、Flexbox 和 Grid 等技术。例如，可以创建一个包含头部、左右侧栏和底部的混合布局

.container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
 
.header {
    background-color: #4CAF50;
    color: white;
    padding: 20px;
    text-align: center;
}
 
.content-container {
    display: flex;
    flex: 1;
}
 
.left-sidebar {
    flex: 1;
    background-color: #f0f0f0;
}
 
.main-content {
    flex: 3;
    background-color: #ffffff;
}
 
.right-sidebar {
    flex: 1;
    background-color: #f0f0f0;
}
 
.footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px;
}

整体布局
一列布局
一列布局是最简单的布局方式，适用于内容较为单一的页面。通过设置 margin: auto 可以实现内容的水平居中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>一列布局</title>
    <style>
        .one-column {
            width: 800px;
            margin: 0 auto;
            background-color: #f0f0f0;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="one-column">
        <h1>一列布局示例</h1>
        <p>这是一个简单的一列布局。</p>
    </div>
</body>
</html>

双飞翼布局

双飞翼布局与圣杯布局类似，但中间列使用 float: left 和 margin-left 来实现，两侧列使用负边距来实现。

示例：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>双飞翼布局</title>
    <style>
        .container {
            overflow: hidden;
        }
        .left-column, .right-column {
            width: 200px;
            background-color: #f0f0f0;
            padding: 20px;
        }
        .middle-column {
            float: left;
            width: 100%;
            margin-left: -200px;
            background-color: #ffffff;
            padding: 20px;
        }
        .middle-column-inner {
            margin-left: 200px;
            margin-right: 200px;
        }
        .left-column {
            float: left;
            margin-left: -100%;
        }
        .right-column {
            float: left;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left-column">
            <h2>侧边栏1</h2>
            <p>这是侧边栏1的内容。</p>
        </div>
        <div class="middle-column">
            <div class="middle-column-inner">
                <h1>主内容区</h1>
                <p>这是主内容区的内容。</p>
            </div>
        </div>
        <div class="right-column">
            <h2>侧边栏2</h2>
            <p>这是侧边栏2的内容。</p>
        </div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>众成远程教育</title>
		<style>
			*{
				margin: 0 auto;
			}
			.all{
				width: 1000px;
				height: 840px;
				background-image: url(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-family: 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/9-logo.jpg" width="708px" height="150px"/>
		</div>
		<div class="main">
			<div class="left">
				<p><img src="img/but2.jpg"/></p>
				<p><img src="img/but3.jpg"/></p>
				<p><img src="img/but4.jpg"/></p>
				<p><img src="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" cellspacing="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="imageFied" id="imageFied" src="img/but1.jpg"/>
							</td>
						</tr>
					</table>
				</form>
			</div>
			<div class="right">
				<img src="img/pho1.jpg"/>
				<img src="img/pho2.jpg"/>
				<img src="img/pho3.jpg"/>
				<img src="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>