为什么我们必须使用div？

1、那么，为什么我们必须使用div？

如果您查看Mozilla的html5元素列表，则每个元素都有语义，然后我们进入<div>并显示：

“表示没有特殊含义的通用容器。

元素等级：

https://blog.csdn.net/sinat_22480443/article/details/111032878

在标准流中，常见的加载等级：

块级元素
独占一行，不能与其他任何标签并列。
可以设置宽、高。如果不设置宽度，那么宽度将默认变为父亲的100%。如果不设置高度，会被内容自动撑开。
行内元素
不能正常加载宽度和高度属性，其他的盒模型属性虽然能设置，但是容易出现加载问题。
能与其他的行内和行内块元素并排一行显示。
不论是否设置宽高，其宽度和高度只能被内容自动撑开。
在HTML中，将标签分为了：文本级、容器级。
行内块元素
可以设置宽、高。如果不设置宽高，要么以原始尺寸加载，要么被内容自动撑开。
能与其他的行内和行内块元素并排一行显示。
常见的块状元素有：div、p、h1…h6、ol、ul、dl、table、address、blockquote、form等。大部分是容器级标签。
常见的行内元素有：a、span、i、em、strong、label等。大部分是文本级标签。
常见的行内块级元素有:img、input等。

从HTML的角度来讲，标签分为：
— 文本级：标签内部只能存放文字或类似文字的内容，比如存放图片、表单元素等。比如p、span、a、b、i、u、em等。
— 容器级：标签内部可以存放任意内容，包含容器级标签。比如div、h1…h6、li、dt、dd等。
　　注意：p里面只能放文字、图片、表单元素，p里面不能放h和ul，p里面也不能放p。

显示模式display
标准流中的元素有自己默认的浏览器加载模式，但是加载模式不是一成不变的，可以通过display属性更改一个标签的显示模式。

属性值 作用
block 表示元素以块级元素模式加载，具有块级特点
inline 表示元素以行内元素模式加载，具有行内特点
inline-block 表示元素以行内块元素模式加载，具有行内块特点
none 表示标签及内部内容直接隐藏，让出原有标准流的位置
通过display 就可以将 实现块级元素与行内元素、行内块元素之间的相互转换了。

脱离标准流
display 属性更改的显示模式并没有改变标准流本质性质，页面还是只能从上往下 加载，存在空白折叠现象等微观性质。要想实现更多的界面布局效果需要脱离标准流的限制。

标签元素脱离标准文档流的方法：

浮动
绝对定位
固定定位

行变块  --> display:inline-block

块变行  --> display:inline-block

行变块,块变行

 

h2 { position:absolute; left:100px; top:150px; }

相对于原来的位置进行偏移