html 容器 div簡介
https://www.xiaobuteach.com/html/markup-simple/div.html?from=bili
html 容器 div簡介
div：動詞divide，名詞division；中文意思：劃分。
div標(biāo)簽用作容器，其中可以包含其它的html標(biāo)簽，div標(biāo)簽同時(shí)可以繼續(xù)嵌套div標(biāo)簽。
1 語法
<div>內(nèi)容</div>
div標(biāo)簽里的內(nèi)容既可以是文本，也可以嵌套其它標(biāo)簽，圖片、視頻、段落、標(biāo)題、等。
2 示例
需求場景：需要通過一個(gè)容器包含多個(gè)段落<p>，然后容器加上灰色邊框。
分析：段落p里無法繼續(xù)嵌套段落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標(biāo)簽解析成了兩個(gè)p標(biāo)簽，開始一個(gè)，結(jié)尾一個(gè)。
簡言之，上述代碼不符合HTML規(guī)范，p標(biāo)簽里不能繼續(xù)嵌套p標(biāo)簽。
可以通過div標(biāo)簽實(shí)現(xiàn)容器。
正確代碼
? ?<div style="border: 1px solid #CCC;">
? ? ? ?<p>段落1：小步教程</p>
? ? ? ?<p>段落2：https://www.xiaobuteach.com</p>
? ?</div>
成功。
3 默認(rèn)樣式
div默認(rèn)會自動換行。
4 邏輯意義
容器，可包含其它標(biāo)簽。
5 實(shí)現(xiàn)頁面兩邊留白
div結(jié)合盒子模型實(shí)現(xiàn)頁面兩邊留白。
原理：首先設(shè)置div的寬度width，然后設(shè)置margin:0 auto，表示上下方向的外邊距為0，左右方向的外邊距自動大小，從而實(shí)現(xiàn)兩邊留白相同，整體居中。
方法關(guān)鍵點(diǎn)：一定要設(shè)置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>
