块级元素 Vs 内联元素_html/css_WEB-ITnose

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（上标）