HTML 块级元素、行内元素和行内块级元素

HTML元素可以大致分为三类：块级元素、行内元素和行内块级元素。这些分类主要基于元素在页面上的表现和行为。

块级元素（Block-level elements）:

• 块级元素总是在新的一行开始，并占据其父元素的整个宽度。
• 块级元素可以包含行内元素和其他块级元素。
• 块级元素常常用于构建页面的布局。

常见的块级元素：< h1 >~< h6 >、< p >、< div >、< ul >、< ol >、< li >、< dd >、< dt >、< dl >

行内元素（Inline elements）:

• 行内元素不会开始新的一行，它会和其他元素并排。
• 行内元素只能包含文本或者其他行内元素。
• 行内元素常常用于文本内容的显示。

常见的行内元素： < a >、< span >、< img />、< input />、< strong >、< b >、< em >、< i >、< del >、< s >、< ins >、< u >、< select >、< textarea >、< br />

行内块级元素（Inline-block elements）:

• 行内块级元素是块级元素和行内元素的混合体。它们像行内元素一样并排显示，但它们又可以像块级元素一样设置宽度和高度。
• 行内块级元素可以包含其他行内块级元素和行内元素。

 常见的行内块元素：< img />、< input />、、< td >

 元素之间的转换

转换为块元素：display:block;
转换为行内元素：display:inline;
转换为行内块元素：display: inline-block;

特殊的可替代元素

img同时具有行内元素，行内块，和块级元素的特性

img不指定宽width高height，就按图片被保存时候的宽度和高度

img、input属于行内替换元素。height/width/padding/margin均可用。效果等于块元素

小结

元素模式	元素排列	设置样式		级别
块级元素	一行只能放一个块级元素	可以设置宽度高度	容器的100%	容器级可以包含的任何标签
行内元素	一行可以放多个行内元素	不可以设置宽度高度	它本身内容的宽度	容纳文本或其他行内元素
行内块元素	一行可以放多个行内块元素	可以设置宽度高度	它本身内容的宽度