html 容器 div简介

div：动词divide，名词division；中文意思：划分。

div标签用作容器，其中可以包含其它的html标签，div标签同时可以继续嵌套div标签。

1 语法

<div>内容</div>

div标签里的内容既可以是文本，也可以嵌套其它标签，图片、视频、段落、标题、等。

2 示例

需求场景：需要通过一个容器包含多个段落<p>，然后容器加上灰色边框。

分析：段落p里无法继续嵌套段落p，外部需要使用div作为容器。

错误代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title> html div 例1 | 关关教程</title>
</head>

<body>
    <p style="border: 1px solid #CCC;">
        <p>段落1：关关教程</p>
        <p>段落2：https://tuto.dushare.cn</p>
    </p>
</body>

</html>

F12看浏览器如何解析的，将外层的p标签解析成了两个p标签，开始一个，结尾一个。

简言之，上述代码不符合HTML规范，p标签里不能继续嵌套p标签。

可以通过div标签实现容器。

正确代码

    <div style="border: 1px solid #CCC;">
        <p>段落1：关关教程</p>
        <p>段落2：https://tuto.dushare.cn</p>
    </div>

成功。

3 默认样式

div默认会自动换行。

4 逻辑意义

容器，可包含其它标签。

5 实现页面两边留白

div结合盒子模型实现页面两边留白。

原理：首先设置div的宽度width，然后设置margin:0 auto，表示上下方向的外边距为0，左右方向的外边距自动大小，从而实现两边留白相同，整体居中。

方法关键点：一定要设置width。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title> html div 例2 | 关关教程</title>
</head>

<body>

    <div style="border: 1px solid #CCC;width:400px;margin:0 auto;">
        关关教程 tuto.dushare.cn
    </div>

</body>

</html>

❮上一节 html 视频 video 下一章第03章盒子模型❯