html5块级元素、内联元素、内联块状元素介绍及嵌套规则

HTML中标签元素分为三种:
块状元素(block),行内元素(inline),行内块状元素(inline-block)。

一、块级元素:

1.每一个块级元素独占一行,下一个块级元素要另起一行。
2.元素的高度、宽度、行高以及顶和底边距都可设置。
3.元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致)。
4.可以容纳内联元素和其他块级元素。

常见块级元素:
在这里插入图片描述

二、内联元素(行内元素):

1.和其他元素都在一行上。
2.元素的高度、宽度、行高及顶部和底部边距不可设置(即设置width、height无效,但可以通过line-height设置行高)。
3.元素的宽度就是它所包含的文字或图片的宽度,不可改变。
4.设置margin和padding只有左右生效,上下无效(元素范围是增大了,但是对元素周围的内容是没影响的)。
5.只能容纳文本或者其他内联元素。
常见内联元素:
在这里插入图片描述

三、内联块状元素:

1.同时具备内联元素、块状元素的特点。
2.和其他元素都在一行上。
3.元素的高度、宽度、行高以及顶和底边距都可以设置。

常见内联块级元素:

<img><input>

块级元素与内联元素的嵌套规则:

1.块级元素可以包含内联元素或某些块级元素;但内联元素却不能包含块级元素,它只能包含其他的内联元素。
2.块级元素不能放在p标签里。
3.有几个特殊的块级元素只能包含内联元素而不能再包含块级元素:
h1~h6、p、dt。
4.li内可以包含div标签。
5.块级元素与块级元素并列、内联元素与内联元素并列。

发布了100 篇原创文章 · 获赞 240 · 访问量 2万+

猜你喜欢

转载自blog.csdn.net/zag666/article/details/103142163