第九章DIV+CSS布局_cssdiv布局-CSDN博客

本文链接：https://blog.csdn.net/jinjin77/article/details/144205282

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标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.d1{
				width: 100px;
				height: 80px;
				border: 2px solid red;
			}
			#d2{
				width: 150px;
				height: 100px;
				border: 2px solid black;
			}
		</style>
	</head>
	<body>
		<div class="d1">设置宽高</div>
		<div id="d2">利用百分比来设置宽高</div>
	</body>
</html>

9.1.2.DIV的宽高设置

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

宽高属性（width和height）

div标签内直接设置宽高

div使用选择器设置宽高（把css样式改成选择器样式）

div高度的百分比设置问题

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			*{
				width: 100%;
				height: 100%;
			}
			.d1{
				width: 100px;
				height: 80px;
				border: 2px solid red;
			}
			#d2{
				width: 50%;
				height: 40%;
				border: 2px solid black;
			}
		</style>
	</head>
	<body>
		<div class="d1">设置宽高</div>
		<div id="d2">利用百分比来设置宽高</div>
	</body>
</html>

9.2 DIV+CSS的应用

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

9.2.1.DIV元素的布局技巧

由于用户的计算机显示屏分辨率不同，因此在布局页面时，要充分考虑页面内容的布局宽度情况，并保证页面整体内容在页面居中。一旦内容宽度超过显示宽度，页面将出现水平滚动条。应尽量保证网页只有垂直滚动条，才符合用户的习惯，所以高度不需要考虑，一般都是由页面内容决定网页高度即可。又因为浏览器的兼容情况，所以在布局页面前，设计者一定要把页面的默认边距清除。传统的表格布局时，可以使用属性“align：center；”设置表格居中问题，但是DIV的居中是没有属性可以设置的，只能通过CSS样式控制其位置。
使div 元素水平居中的方法有多种，常用的方法是用CSS设置div的左右边距。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			*{
				width: 100%;
				height: 100%;
			}
			.d1{
				width: 100px;
				height: 80px;
				border: 2px solid red;
			}
			#d2{
				width: 50%;
				height: 40%;
				border: 2px solid black;
			}
			#d3{
				width: 50%;
				height: 40%;
				border: 2px solid black;
				margin-left: auto;
				margin-right: auto;
			}
		</style>
	</head>
	<body>
		<div class="d1">设置宽高</div>
		<div id="d2">利用百分比来设置宽高</div>
		<div id="d3&#