`div` 是 HTML 中的一个块级元素,通常用于网页布局,可以包含其他 HTML 元素,并通过 CSS 进行样式设置。以下是 `div` 的一些基本用法:
基本结构
```html
这里是容器内的内容
常用属性
ID 和 Class:用于为 `div` 定义唯一标识,以便通过 CSS 进行样式控制。
Height 和 Width:设置 `div` 的高度和宽度。
Margin:设置 `div` 与其他元素的外边距。
Padding:设置 `div` 内部内容与边框之间的内边距。
Border:设置 `div` 的边框样式、宽度和颜色。
Display:设置 `div` 的显示方式,如 `block`、`inline`、`inline-block` 等。
定位方式
普通流定位:块级元素从上到下一个一个排列,行内元素从左到右排列。
浮动定位:`div` 可以设置为 `float: left` 或 `float: right`,使其脱离文档流,向左或向右浮动。
布局应用
导航栏:使用 `div`、`ul`、`li` 结合浮动创建导航栏。
内容排列:使用 `div` 和浮动实现同行内容排列。
网页结构:网页通常由 `div` 组成,包括导航栏、内容区域和页脚。
清除浮动
当父元素包含浮动 `div` 时,可能需要清除浮动以避免高度塌陷。可以通过在父元素中添加一个空 `div` 并设置 `clear: both` 来实现。
示例代码
```html
这里是内容区域