内联元素和块级元素之间的嵌套关系

首先,我们来回顾一下内联元素和块级元素
内联元素可以嵌套内联元素,块级元素可以嵌套部分块级元素并也能嵌套内联元素,但内联元素不能嵌套块级元素。块级元素为block,内联元素为inline,拥有“inline”特性的同时又拥有“block”的特性称为replace元素。

在做项目的时候,犯了个错,进了坑

image
看不清?

在控制台一看,被解析成了这个样子

image
看不清?

我们会发现,

分别在一行显示,而此时"p元素的开始"与"p元素的结束"也在不同的一行显示

原来,在```

```元素中是不能嵌套```

```元素的,在```

```标签还没结束时,遇到下一个块级元素就会自动结束。 试了一下

元素的开始
这段代码会被浏览器会解析为

元素的开始


那我们就会想如果把div设置为内联样式的话,是不是就不会出现这样的现象啦

这是p元素的开始

div元素1
div元素2
这是p元素的结束

即使我们给

添加样式,将它变成内联元素形式,他的效果还是一样的,

这是p元素的开始

div元素1
div元素2
这是p元素的结束

我们再用JavaScript代码来检索一个页面中的p元素:

   var p = document.querySelectorAll("p"); //查找p元素  
   console.log(p.length); // 2个元素  

我们以为会是1 结果是2

因此得出结论:

在p元素是不能嵌套Div元素的,它会被浏览器解析为页面中p元素的两倍数量,也就是开始标签被解析为一个p元素,结束标签被解析为一个p元素。

元素的三个类别:

那哪些块元素里面不能放哪些块元素呢?我们可以先把所有的块元素再次划分成几个级别的,我们已经知道是在最外层,下一级里面只会有、。而我们已经知道了可视的元素只会出现在里,所以我们把划在第一个级里面,接着,把不可以自由嵌套的元素划在第三个级,其他的就归进第二个级。所谓的不可自由嵌套的元素就是里面只能放内联元素的,它们包括有:标题标记的

;段落标记的

;分隔线


为什么说第二级的元素可以自由嵌套呢?我们可以把它们看成是一些容器(或者说是盒子), 这些容器的大小可以自由变化,例如我们可以把

    嵌在
    里面,也可以把
    嵌在
  • 里面。

    在HTML里有几个元素是比较特别的:

        、,它们的子一层必须是指定元素,
            的子一级必须是
        的子一层必须是等,而再子一层必须是只存在于),之后才是可放内容的
        或者

        有着其它内联元素没有的宽和高。它们在"inline"的情况下又有"black"的特性,W3C称之为replace元素。

        你可能感兴趣的:(内联元素和块级元素之间的嵌套关系)