第九章DIV+CSS布局

最新推荐文章于 2025-05-30 15:10:57 发布

喜欢败给现实

最新推荐文章于 2025-05-30 15:10:57 发布

阅读量718

点赞数 19

文章标签： css 前端

本文链接：https://blog.youkuaiyun.com/2301_81053053/article/details/143760805

版权

9.1 DIV+CSS概述

DIV+CSS 是 Web 设计标准，它是一种网页的布局方法。与传统中通过表格(table)布局定位的方式不同，它可以实现网页页面内容与表现相分离。DIV组成了网页的格局,C则装饰了格局，比如建一栋房子，开始的架子是 DIV，架子搭建好后开始装饰，这个装饰就是 CSS 样式。使用了 DIV+CSS 布局的网页，它使 HTML,语言变得越来越复杂化、专用化,源码容易扩展，并且更加规整。

9.1.1 认识DIV

div 标签在 Web 标准的网页中使用非常频繁，属于块状元素。div 标签是双标签,即以<div></div>的形式存在，中间可以放置任何内容，包括其他的 div 标签。但是在没有 CSS 的影响下，每个 div标签只占据一行，即一行只能容纳一个 dv 标签。

9.1.2 DIV的宽高设置

9.1.2.1 宽高属性

宽度:width

width：设置宽值为 300像素————300px。

高度:height

height：设置高值为140像素————140px

9.1.2.2 div标签内直接设置宽高


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>第九章DIV+CSS布局</title>
		<style>
			#d2{
				width: 300px;
				height: 140px;
				border: #77ff00 3px solid;
			}
		</style>
	</head>
	<body>
		<div id="d2">百分比设置宽高</div>
	</body>
</html>

9.1.2.3 div使用选择器设置宽高

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>第九章DIV+CSS布局</title>
		<style>
			.d1{
				width: 100px;
				height: 80px;
				border: #77ff00 3px solid;
			}
			*{
				width: 100%;
				height: 100%;
			}
			#d2{
				width: 50%;
				height: 40%;
				border: #77ff00 3px solid;
			}
		</style>
	</head>
	<body>
		<div class="d1">设置宽高</div>
		<div id="d2">百分比设置宽高</div>
	</body>
</html>

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.d1{
				width: 300px;
				height: 100px;
				border: #aa00ff solid 3px;
			}
			*{
				/* 定义浏览器的大小范围使d2定义的范围有效 */
				width: 100%;
				height: 100%;
			}
			#d2{
				width: 50%;
				height: 20%;
				border: #AA00FF solid 3px;
			}
		</style>
	</head>
	<body>
		<div class="d1">使用px值设置宽度高度</div>
		<div id="d2">使用百分比设置宽度高度</div>
	</body>
</html>

9.2 DIV+CSS的应用

标准流(normal fow)也叫常规流，文档流。在使用 div、span、p标签进行布局时，默认就是使用标准流进行布局。
标准流是垂直布局，是由块元素及其行内元素构成的。从上到下、从左到右按顺序摆放好，默认情况下，互相之间不存在层叠现象。

9.2.1 DIV元素的布局技巧

由于用户的计算机显示屏分辨率不同，因此在布局页面时，要充分考虑页面内容的布局宽度情况，并保证页面整体内容在页面居中。一旦内容宽度超过显示宽度，页面将出现水平滚动条。应尽量保证网页只有垂直滚动条，才符合用户的习惯，所以高度不需要考虑，一般都是由页面内容决定网页高度即可。

又因为浏览器的兼容情况，所以在布局页面前，设计者一定要把页面的默认边部传统的表格布局时，可以使用属性“aign:cener;”设置表格居中问题,但是DV是没有属性可以设置的，只能通过CSS样式控制其位置。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.d1{
				width: 300px;
				height: 100px;
				border: #aa00ff solid 3px;
			}
			*{
				/* 定义浏览器的大小范围使d2定义的范围有效 */
				width: 100%;
				height: 100%;
			}
			#d2{
				width: 50%;
				height: 20%;
				border: #AA00FF solid 3

最低0.47元/天解锁文章