第九章DIV+CSS布局_div+css网页布局-优快云博客

本文链接：https://blog.youkuaiyun.com/2302_80974792/article/details/143728879

9.1 DIV+CSS概述

DIV+CSS 是一种网页布局技术，它主要通过使用 HTML 中的 <div> 标签来定义网页上的各个区块，并利用 CSS（层叠样式表）来设置这些区块的样式和布局。这种技术与传统的表格布局相比，具有更多的优势，比如更好的可维护性、更灵活的布局方式以及对搜索引擎更加友好等。

主要特点
结构与表现分离：HTML 负责页面的内容结构，而 CSS 负责页面的表现形式（如颜色、字体、间距等）。这样的分离使得网站更容易维护，也便于更改设计风格。
提高加载速度：相比于使用表格布局，DIV+CSS 可以减少代码量，从而加快页面的加载速度。
增强可访问性和SEO：良好的语义化标记可以提升网页的可访问性，同时也更有利于搜索引擎抓取网页信息，提高搜索引擎优化的效果。
响应式设计：通过媒体查询等技术，DIV+CSS 布局能够轻松实现响应式网页设计，即根据设备屏幕大小自动调整布局，确保在不同设备上都能获得良好的用户体验。
易于修改和扩展：当需要对整个站点的外观进行调整时，只需要修改 CSS 文件即可，无需逐一修改每个页面的 HTML 代码。

9.1.1 认识DIV

<div> 标签是 HTML 中非常常见且用途广泛的一个标签。它是一个块级元素，主要用于将文档分割成独立的、逻辑的部分，以便于通过 CSS 对其进行样式设计和布局控制。<div> 标签本身没有特定的含义，它的主要作用是作为样式和脚本的钩子，也就是说，它通常用来包含其他 HTML 元素，并通过类（class）、ID 或者直接选择 <div> 元素来应用 CSS 样式或 JavaScript 脚本。

9.1.2 DIV的宽高设置

在 HTML 中，<div> 元素的宽度和高度可以通过 CSS 来设置。设置 <div> 的宽高有多种方法，具体取决于你的需求和布局策略。下面是一些常用的方法：

1. 固定宽度和高度
如果你希望 <div> 的宽度和高度保持不变，可以使用 width 和 height 属性来设置固定的像素值。

在 HTML 中，<div> 元素的宽度和高度可以通过 CSS 来设置。设置 <div> 的宽高有多种方法，具体取决于你的需求和布局策略。下面是一些常用的方法：

2.百分比宽度和高度
如果希望 <div> 的宽度和高度相对于其父元素的比例来设置，可以使用百分比值。百分比值是相对于父元素宽度和高度计算的。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.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.1 宽高属性

在 CSS 中，设置元素的宽度和高度是非常常见的需求。CSS 提供了多种属性来控制元素的尺寸，包括 width、height、min-width、max-width、min-height 和 max-height。下面是对这些属性的详细介绍：

1. width 和 height
width：设置元素的宽度。
height：设置元素的高度

9.1.2.2 div标签内直接设置宽高

在 HTML 中，可以直接在 <div> 标签内使用内联样式来设置宽度和高度。内联样式通过 style 属性来应用，这种方式适合快速设置单个元素的样式，但不推荐大量使用，因为这会使 HTML 代码变得臃肿且难以维护。

9.1.2.3 div使用选择器设置宽高

在 CSS 中，使用选择器来设置 <div> 元素的宽度和高度是一种常见且推荐的做法。这样可以使你的样式更加模块化和易于维护。下面是一些常用的 CSS 选择器及其示例，展示如何设置 <div> 的宽度和高度。

1. 类选择器
类选择器使用点 (.) 前缀来选择具有特定类名的元素。

2. ID 选择器
ID 选择器使用井号 (#) 前缀来选择具有特定 ID 的元素。ID 选择器的优先级高于类选择器

3. 标签选择器
标签选择器直接使用元素名称来选择所有该类型的元素。这种方法适用于全局样式设置。

4. 属性选择器
属性选择器用于选择具有特定属性的元素。你可以使用方括号 [ ] 来定义属性选择器。

5. 伪类和伪元素选择器
伪类和伪元素选择器用于选择元素的特定状态或部分。

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

在 CSS 中，设置 <div> 的高度为百分比时，需要注意一些关键点，特别是父元素的高度设置。百分比高度是相对于父元素的高度计算的，如果父元素的高度没有明确设置，那么子元素的百分比高度可能不会按预期工作。

关键点
父元素的高度必须明确：如果父元素的高度是自动的（即没有显式设置），那么子元素的百分比高度将无法计算。
视口单位：如果父元素的高度不确定，可以考虑使用视口单位（如 vh）来设置高度。
示例
父元素高度明确
假设你有一个父元素，其高度已经明确设置，子元素可以使用百分比高度。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type