第九章 DIV+CSS布局

原创于 2024-12-03 15:42:03 发布 · 1.6k 阅读

46 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

9.1 DIV+CSS概述

9.1.1 认识DIV

在HTML中，<div>（division的缩写）是一个块级元素，用于组织和布局页面内容。<div>元素本身不带有具体的语义含义，它通常用作一个容器，以便通过CSS来应用样式。通过将<div>元素与其内容一起，可以创建页面的结构区块，如页眉、页脚、侧边栏、内容区域等。

<div>元素的基本语法格式如下：

<div class="classname">
  <!-- 这里是div的内容 -->
</div>

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8">
    <title>Div标签示例</title>
</head>
 
<body>
    <div style="background-color: lightblue; padding: 20px; border: 1px solid gray;">
        这是一个div标签内的内容。
    </div>
</body>
 
</html>

9.1.2 DIV的宽高设置

9.1.2.1 宽高属性

在CSS中，用于设置<div>宽高的主要属性是width和height。

width：定义<div>元素的宽度。可以使用绝对单位（如px - 像素），例如width: 200px;表示将<div>的宽度设置为200像素；也可以使用相对单位（如% - 百分比），像width: 50%;就是设置<div>的宽度为其父元素宽度的50%。
height：用于确定<div>元素的高度，单位的使用和width类似。不过需要注意的是，当内容的高度超过设置的高度时，可能会出现内容溢出的情况，这时候可能需要结合overflow属性来处理。

9.1.2.2 div标签内直接设置宽高

可以直接在<div>标签内部使用style属性来设置宽高。例如：

<div style="width: 300px; height: 200px;">
  这里是div中的内容。
</div>

这种方式虽然简单直接，但在实际项目中如果大量使用会使HTML代码变得臃肿，不利于代码的维护和复用，而且将样式和结构混合在一起不符合良好的代码编写规范。

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8">
    <title>Div宽高设置示例</title>
</head>
 
<body>
    <div style="width: 300px; height: 200px; background - color: yellow; border: 1px solid black;">
        这个div有指定的宽和高。
    </div>
</body>
 
</html>

9.1.2.3 div使用选择器设置宽高

这是在实际项目中更为推荐的方式。首先在HTML中给<div>元素添加类名或者ID，然后在CSS文件中使用相应的选择器来设置宽高。

类选择器：如果HTML中有<div class="box">，在CSS中可以这样设置宽高：
```
.box {
  width: 400px;
  height: 300px;
}
```
ID选择器：对于<div id="mainDiv">，CSS中设置如下：
```
#mainDiv {
  width: 500px;
  height: 400px;
}
```
使用选择器的方式将样式和结构分离，便于管理和维护代码，并且可以方便地对多个具有相同类名的<div>元素进行统一的样式设置

例：

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

当设置<div>高度为百分比时，需要注意它是相对于父元素的高度来计算的。如果父元素的高度没有被明确定义（例如父元素的高度为auto），那么子<div>元素设置的百分比高度可能无法按预期显示。例如：
```
<div style="height: 300px;">
  <div style="height: 50%;">
    这个子div的高度设置为父div高度的50%。
  </div>
</div>
```
在这个例子中，因为父<div>的高度被设置为300px，所以子<div>的高度为150px。但如果父<div>没有设置高度，子<div>的百分比高度可能就不会生效，除非父元素的高度能够通过其他方式（如内容撑开或者其他布局属性）被确定。

9.2 DIV+CSS的应用

9.2.1 DIV元素的布局技巧
在使用DIV元素进行网页布局时，有几种常用的技巧可以提高布局的灵活性和效率。例如，可以使用浮动（float）属性来实现元素的水平布局，使用定位（position）属性来进行绝对或相对定位，以及使用负外边距（margin）来微调元素的位置。此外，利用盒模型的概念，可以通过调整内容（content）、内边距（padding）、边框（border）和外边距（margin）来控制DIV的最终外观和位置.

例：

9.2.2 DIV元素的宽度自适应
为了使DIV元素的宽度能够根据内容自适应，可以设置DIV的width属性为auto或者使用min-width和max-width属性来限制宽度的范围。在某些情况下，可以使用fit-content值来确保DIV的宽度恰好匹配其内容的宽度，防止内容换行.

例：

9.2.3 DIV内容的居中
DIV内容的居中可以通过多种CSS技术实现。使用Flexbox布局，可以通过设置justify-content和align-items属性来轻松实现水平和垂直居中。另外，使用Grid布局，可以通过place-items属性来实现同样的居中效果。对于内联元素或设置了display: inline-block的元素，可以通过设置其父元素的text-align属性为center来实现水平居中.

例：

9.2.4 DIV元素的嵌套

DIV元素可以相互嵌套，以创建更复杂的布局结构。嵌套布局允许开发者将页面分割成多个区块，并对这些区块进行独立的样式和行为控制。在嵌套时，应当注意内外层DIV的定位上下文和浮动行为，以免造成意外的布局问题.

在应用DIV+CSS进行网页布局时，应当考虑到响应式设计的需求，使用媒体查询（Media Queries）来适配不同屏幕尺寸，以及利用现代布局技术如Flexbox和Grid来提高布局的灵活性和维护性。

例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>示例9.10程序（DIV元素的嵌套）</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: lightgrey;
			}
		</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 左中右布局

左中右布局是一种常见的网页布局方式，其中页面被分为三个主要区域：左侧、中央和右侧。这些区域通常用于放置导航菜单、主内容和辅助内容。在CSS中，可以通过使用浮动（float）或定位（position）属性来实现这种布局。例如，可以将左侧和右侧的元素设置为浮动，然后将中央的元素包围在它们之间，并清除浮动以防止布局错位。

例：

9.3.2 上中下布局

上中下布局涉及将页面内容分为三个垂直区域：顶部、中部和底部。这种布局适合于包含页眉、主要内容和页脚的页面。在CSS中，可以通过设置固定高度或使用百分比来指定这些区域的高度，并使用定位属性来确定它们在页面中的位置。

例：

9.3.3 混合布局
混合布局是指结合使用了多种布局技术的页面，如固定布局、流体布局和弹性布局等。这种布局方式可以提供更强的适应性，确保页面在不同设备和屏幕尺寸上都能保持良好的用户体验。混合布局通常涉及使用CSS3的Flexbox和Grid系统，这些系统提供了更高级的布局控制和更好的响应式设计支持。

在设计混合布局时，开发者需要考虑布局的灵活性、兼容性以及性能优化，确保页面不仅在视觉上吸引人，而且在各种设备上都能流畅加载和运行。随着前端技术的不断发展，混合布局成为了现代网页设计中不可或缺的一部分。

例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>示例9.13混合布局</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{
				width: 100%;
				height: 75%;
			}
			.left{
				background-color: yellow;
				width: 20%;
				float: left;
			}
			.center{
				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="center"></div>
				<div class="right"></div>
			</div>
			<div class="footer"></div>
		</div>
	</body>
</html>