html 容器 div简介
https://www.xiaobuteach.com/html/markup-simple/div.html?from=bili
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://www.xiaobuteach.com</p>
</p>
</body>
</html>
F12看浏览器如何解析的，将外层的p标签解析成了两个p标签，开始一个，结尾一个。
简言之，上述代码不符合HTML规范，p标签里不能继续嵌套p标签。
可以通过div标签实现容器。
正确代码
<div style="border: 1px solid #CCC;">
<p>段落1：小步教程</p>
<p>段落2：https://www.xiaobuteach.com</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;">
小步教程 www.xiaobuteach.com
</div>
</body>
</html>
