HTML中的标签分为:块级标签、行内标签、行内块级标签。

块级元素

标签:h1-h6、 p、ul、ol、dl、li、dt、dd、table、from、div

特点:

1、独占一行,默认情况下,其宽度填满父级标签的宽度;

2、可以设置宽高,即使设置了宽度仍然独占一行;

3、可以设置margin与padding;

4、可以嵌套块级元素以及行内元素或者行内块级元素;

5、可以转换成行内元素或者行内块级元素

行内元素

标签:span、strong、b、em、i、br、a

特点:

1、不会独占一行,相邻行内元素会排成一排直到一排排不下,才会换行,其宽度随内容变化;

2、不可以设置宽高,设置了宽高不起作用;

3、设置margin之后,上下margin不起作用,左右margin其作用,相邻元素的左右margin叠加;

4、设置pading之后,上下左右padding都起作用;

5、可以转换成块级元素。display:block;

6、不可以嵌套块级元素;

 

行内块级元素

标签:img  input

特点:

1、不会独占一行;

2、可以设置宽高,设置了宽高还是不会独占一行;

3、可以设置margin与padding,上下margin不起作用;

4、不可以嵌套其他元素。

5、可以转换成块级元素。

总结:行内块级元素是既有块级元素的特点(margin,padding上下左右都起作用,可以设置宽高)也有行内元素的特点(不会独占一行)。也有自己的特点(都是单标签,无法嵌套元素)。

 

标签的嵌套规则

1、不能交叉嵌套;

2、块级元素可以嵌套块级元素与行内元素或者行内块级元素;

3、行内元素不可以嵌套块级元素;

4、有几个特殊的块级元素只能嵌套行内元素不能嵌套块级元素。h1-h6  p  dt