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