块级元素 Vs 内联元素

HTML的元素可以分为两种：

• 块级元素（block level element ）
• 内联元素（inline element ）

二者的区别如下：

1. 块级元素独占一行（除非显示修改元素的display属性），内联元素在一行内显示；

2. 块级元素可以设置width、height属性，而内联元素设置这些属性无效；

3. 块级元素的默认width为100%，而内联元素的的width是根据其内容或子元素确定的。

二者的相互转化：

块级元素——>内联元素：display:inline;    内联元素——>块级元素：display:block;

介于二者之间的状态：

设置display:inline-block;属性，使元素对外表现为行内元素，在一行内显示；对内表现为块级元素，能设置width、height属性。

常见的块级元素和行内元素

块级元素：div p h1 h2 h3 h4 h5 h6 dl ul ol li table hr（水平分割线）

内联元素：a img span input（输入框） select（项目选择） textarea（多行文本输入框） sub（下标） sup（上标）