对HTML元素按照block和inline进行分类，并绘制一个DIV、试图改变它的显示属性，观察它在block、inline、inline-block、flex、grid下的表现，并深入了解这一元素在不同显示模式下的外部影响和内部影响。代码

HTML元素可以大致分为两类：块级元素(block elements)和行内元素(inline elements)。

1. **块级元素**：像`<div>`, `<p>`, `<h1>`等，它们占据整个行的高度，可以设置宽度和高度，其内容会在新的一行开始。当尝试改变它们的样式如宽度、高度时，会直接影响到元素的位置和大小布局。

<div id="block" style="width: 200px; height: 100px; background-color: red;">这是块级元素</div>

2. **行内元素**：如`<span>`, `<a>`, 文本通常为行内元素。它们只占据一行空间，宽度由内容自动确定，不能设置独立的宽高。更改显示属性比如浮动(floating)或定位(positioning)会影响其他行内元素。

<span id="inline" style="float: left; background-color: blue;">行内元素</span>

3. **行内块元素** (`inline-block`)：这种元素同时拥有行内和块级元素的特点，它可以设定宽高，也能与其他行内元素并排展示。例如：

<div id="inline-block" style="display: inline-block; width: 100px; height: 50px; background-color: green;">行内块元素</div>

4. **弹性盒布局(flex)**：使用`display: flex;`的容器下，元素可以根据父容器的变化动态调整位置。如：

<div id="flex" style="display: flex; justify-content: center;">Flex布局</div>

5. **网格布局(grid)**：`display: grid;`用于创建二维网格布局，元素可以跨列排列。示例：

<div id="grid" style="display: grid; grid-template-columns: repeat(3, 1fr);">Grid布局</div>

这些不同的显示模式会影响到页面的布局灵活性，外部影响包括页面的整体结构，内部影响则涉及到元素的定位、尺寸以及与其他元素的关系。了解并掌握这些概念对于前端开发者来说至关重要。