[HTML]Web前端开发技术6（HTMLCSSJavaScript ）DIV与SPAN，盒模型，Overflow——喵喵画网页

在HTML5、CSS3和JavaScript的环境中，div和span是两个基本的行内元素和块级元素。它们之间的主要区别在于它们的默认显示行为和用途。

div元素被用来组合一块内容，它是一个块级元素，可以用来创建文档的结构，是一个容器级元素。

span元素被用来组合文档中的小块内容，它是一个行内元素，通常用来组合行内元素。

盒模型是CSS的一个基本概念，它定义了元素如何显示以及如何与其他元素交互。每个元素都可以看作一个盒子，它包括：内容区域（content area）、内边距（padding）、边框（border）和外边距（margin）。

overflow属性是CSS中的一个属性，用来处理当内容溢出元素框时发生的情况。它有几个值：

• visible：默认值，溢出内容会显示在元素框之外。
• hidden：溢出的内容会被裁剪，且不可见。
• scroll：溢出的内容会被裁剪，但会提供滚动条来查看所有内容。
• auto：如果有溢出的内容，会提供滚动条或者根据需要自动产生滚动条。

示例代码：

HTML:

<div class="box">这是一个div元素</div>
<span class="box">这是一个span元素</span>

CSS:

.box {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 5px solid black;
  margin: 10px;
  background-color: lightblue;
  overflow: auto;
}

在这个例子中，我们创建了一个类名为.box的CSS规则，并将其应用于两个元素。这个.box规则定义了盒模型的各个属性，并设置了overflow属性为auto，这意味着如果内容超出了盒子的尺寸，将会显示滚动条。