一、div的基础知识
1、div是什么？
<div>是HTML中用来划分网页区域的标签，常用于布局。它是一个无语义的容器，可以包含任何其他元素，如文本、图片、表格等等。
2、如何设置div的宽度和高度？
<div>标签本身不具备宽度和高度属性。一般使用CSS设置宽度和高度。如:
div {
width: 300px;
height: 200px;
}
3、如何让div居中显示？
margin: 0 auto;可以使
元素在父容器中水平居中。
二、div高度的几种情况
1、div内容没有超出高度
在没有设置高度的情况下，
元素的高度根据内部内容自适应扩展。如下例：
顶部
<div>这是一段文本</div>
这个
元素的高度为文本所占的高度。
2、div内容超出高度，没有设置overflow属性
当
元素的内容超出高度限制时，会自动扩展高度，会影响整个布局。如下例：
<div style="height: 100px;">
这是一段很长的文本，它将会扩展div的高度。
</div>
这个
元素的高度会被文本撑起到一定的高度，但高度限制仍会影响布局。
3、div内容超出高度，设置overflow: hidden
当
元素的内容超出高度限制时，可以使用
overflow: hidden来截断内容，不会影响整个布局。如下例：
<div style="height: 100px; overflow: hidden;">
这是一段很长的文本，它将会被截断。
</div>
这个
元素的高度会被限制在100px，并且超出部分会被隐藏掉。
4、div内容超出高度，设置overflow: scroll
当
元素的内容超出高度限制时，也可以使用
overflow: scroll来添加滚动条，不会影响整个布局。如下例：
<div style="height: 100px; overflow: scroll;">
这是一段很长的文本，它将会添加滚动条。
</div>
这个
元素的高度会被限制在100px，超出部分会被隐藏掉，但是可以通过滚动条查看全部内容。
三、总结
<div>是一个无语义的容器，常用于布局。设置div的宽度和高度可以使用CSS，而div的居中显示可以使用margin: 0 auto;实现。
div高度的表现形式有以下几种：
- 内容没有超出高度
- 内容超出高度但没有设置overflow属性
- 内容超出高度并设置
overflow: hidden - 内容超出高度并设置
overflow: scroll
- 文章目录
