第九章 DIV+CSS布局

Tuscany。

已于 2024-11-16 12:21:42 修改

阅读量1.3k

点赞数 44

文章标签： html

于 2024-11-14 14:40:31 首次发布

本文链接：https://blog.youkuaiyun.com/2402_83184791/article/details/143732213

版权

9.1 DIV+CSS概述

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

9.1.1 认识DIV

div标签在Web标准的网页中使用非常频繁，属于块状元素。div标签是双标签，即以<div>/div>的形式存在，中间可以放置任何内容，包括其他的div标签。

但是在没有CSS的影响下，每个div标签只占据一行，即一行只能容纳一个div标签。

9.1.2 DIV的宽高设置

对div设置宽高样式，即div宽度和高度同时设置

1.宽高属性

宽度:width

width:250px--设置宽值为250像素。 width:50%--设置宽值为父元素的百分之五十。高度:height

height:250px--设置高值为250像素。 height:50%--设置高值为父元素的百分之五十。

2.div标签内直接设置宽高

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div style="width: 250px;height: 100px;border: 2px solid red;">
			此div宽度250px，高100px
		</div>
		<div style="width: 150px;height: 50px;border: 2px dashed green;">
			此div宽度150px，高度50px
		</div>
	</body>
</html>

3.div使用选择器设置宽高

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.na{
				width: 250px;
				height: 100px;
				border: 2px solid red;
			}
			#na{
				width: 150px;
				height: 50px;
				border: 2px dashed green;
			}
		</style>
	</head>
	<body>
		<div class="na">
			此div宽度250px，高100px
		</div>
		<div id="na">
			此div宽度150px，高度50px
		</div>
	</body>
</html>

4.div高度的百分比设置问题

如果div的宽度设置了百分之，则相对于其父元素相应改变宽度。但是div的高度则无法根据百分比相应改变

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div style="width: 50%;height: 25%;border: 2px solid red;">
			此div宽度50%，高25%
		</div>
		<div style="width: 70%;height: 50%;border: 2px dashed green;">
			此div宽度70%,高度50%
		</div>
	</body>
</html>

9.2 DIV+CSS的应用

标准流(normal flow)也叫常规流，文档流。在使用div、span、p标签进行布局时，默认就是使用标准流进行布局。

标准流是垂直布局，是由块元素及其行内元素构成的。从上到下、从左到右按顺序摆放好，默认情况下，互相之间不存在层叠现象。

9.2.1 DIV元素的布局技巧

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

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			#center{
				width: 50%;
				height: 100px;
				border: 2px dashed red;
				margin-left:auto;
				margin-right: auto;
			}
		</style>
	</head>
	<body>
		<div id="center">div页面布局水平居中，div内容不受影响。</div>
	</body>
</html>

9.2

最低0.47元/天解锁文章