行内元素和块级元素的相互转换

一，概述

    正 常文档流是从左到右，从上到下，遇块（块级元素）换行

    块级元素的概念：会独占一行的就是块级元素，如：h1-h6,div,p,ul,li ...

    行内元素的概念:  不会独占一行的就是行内元素，如：span，a，img，input ...

 

二，Display 属性

 

Display取值：inline-block，block，inline

Display：inlin-block可以让元素既不独占一行，又可以设置宽高，行高，内外边距

Display:block可以让元素独占一行。而且又可以设置宽高，行高，内外边距

 

 

元素分类	默认display值	举例	定义	特点
块级元素	Display：block	h1-h6,div,p,ul,li	独占一行， 可以通过设置display:inline-block让其不独占一行	能够设置宽，高，行高，外边距，内边距
行内元素	Display：inline	span,a,img,input	不独占一行	行内元素不能够设置宽，高，外边距，行高，内边距，但是可以通过设置display：inline-block设置宽，高，外边距，内边距