文章目录1、块级元素Block-level Elements1.1、特点1.2、常见块级元素2、 行内元素Inline Elements2.1、特点2.2、常见行内元素3、特殊情况行内块元素Inline-block在HTML中元素根据其默认的显示方式可以分为块级元素Block-level Elements和行内元素Inline Elements。它们的主要区别在于布局行为、默认样式以及能否包含其他元素。1、块级元素Block-level Elements1.1、特点独占一行默认情况下块级元素会占据其父容器的整个宽度前后会自动换行。可设置宽高可以通过CSS设置width、height、margin、padding等属性。可包含其他块级或行内元素通常作为容器使用如、等。默认对齐方式垂直方向堆叠从上到下。1.2、常见块级元素div、p、h1-h6、ul/ol/li、section、article、header、footer、form、table、hr、blockquote示例divstylebackground: lightblue; width: 200px; height: 100px;这是一个块级元素div/divp这是另一个块级元素p会显示在新的一行。/p2、 行内元素Inline Elements2.1、特点不换行默认与其他行内元素在同一行显示直到行宽不足时才换行。不可直接设置宽高width和height无效大小由内容决定但可通过padding或line-height间接调整。只能包含文本或其他行内元素不能包含块级元素如a中不能直接放div。默认对齐方式水平方向排列从左到右。2.2、常见行内元素span、a、strong、em、img、input、button、label、code、sub、sup、br示例spanstylebackground: yellow; padding: 5px;行内元素1/spanspanstylebackground: pink; padding: 5px;行内元素2同一行显示/span3、特殊情况行内块元素Inline-block混合特性兼具行内元素不换行和块级元素可设宽高的特点。常见元素img、input、button默认是inline-block。通过CSS设置任何元素可通过display: inline-block;转换为行内块。示例spanstyledisplay: inline-block; width: 50px; height: 50px; background: gray;/spanspan行内块元素可以设宽高且不换行。/span