html嵌套规则

210 阅读1分钟

一, html中的三种元素

 

在html中分为有块级,行级,行内块级三种元素它们有着各自的特点

 

1,块级元素可以独占一行,并且可以设置宽高;

 

2,行内块元素不独占一行,可以设置宽高;

 

3,行级元素不独占一行,不可以设置宽高;但也有特例,像img、video、等是可替换元素就他就可以设置宽高;

 

二,嵌套规则

 

1,块级、行级块元素可以嵌套所有标签;但也有特例p标签不能嵌套块级元素。如p标签不能嵌套div;

2,行级只能嵌套行级和文本;但也有特例如a标签可以嵌套块级元素,a标签不能嵌套自己;

总结:我们必须遵守嵌套规则如果在高级浏览器中他依然可以识别我们的html顺序,这还无伤大雅,但是在像ie这种低级浏览器中会变成兄弟节点,严重的话可能会使整个布局乱掉;

<p>
    <div>
    </div>
</p>

image.png

像p标签嵌套div标签由于违反了嵌套规则,将使得div与p标签变成兄弟级别的元素;