在<p></p> 标签里面嵌套 div 等 原生块级元素 会在渲染页面时候出错,div 标签会出现在p标签的下方并且和p标签同级。

没有达到 div 是 p 标签的子元素的预期。

这是因为p标签里面不能嵌套原生块级元素。

只需要把 原生块级元素 换为 span 等行内元素就可以实现效果了。并且加上 display : block; 样式也不会出错。

display:block的作用是让其他标签如:a、span等行内元素获得div的特性,比较常用于这两个标签——因为这两个标签非块元素,如果不用display:block定义一下,那么定义width、height等和长宽相关的css属性时会发现完全不生效。

CSS块级元素和行内元素

块级元素:

独占一行;元素的宽高、以及内外边距都可设置;元素宽度在不设置的情况下,是它本身父容器的100%。

行内元素:

不会自动进行换行;元素的宽高不可设置;内边距可以设置、外边距水平方向有效,竖直方向无效;元素宽度在不设置的情况下,随内部元素的内容变化。

我们知道display:inline 和display:block的用发了,他们的作用是将块级元素转化为内联元素或者是内联元素转化为块级元素。

现在的这个貌似是两个的结合体:inline-block 为什么在我加载的这个场景能发挥奇效? 说不清

inline-block是元素具备了两种(块级和内联)元素的功能,inline最重要的一点就是:元素能够在一行展示,block 元素让它能设置宽高(有宽高能显示)。