HTML元素定位

一切皆为框

div、h1 或 p 元素常常被称为块级元素（block element)。这意味着这些元素显示为一块内容，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”(inline element)，这是因为它们的内容显示在行中，即“行内框”。

块元素的盒子模型（box model of block element)

块级元素：块状元素排斥其他元素与其位于同一行，可以设定元素的宽（width），高（height）和边距（margin,
padding)，块级元素一般是其他元素的容器，可容纳块级元素和行内元素。常见的块级元素有div, p ,h1~h6等。

行内元素：行内元素不可以设置宽（width）和高（height），但可以与其他行内元素位于同一行，行内元素内一般不可以包含块级元素。行内元素的高度一般由元素内部的字体大小决定，宽度由内容的长度控制。常见的行内元素有a,
em ,strong等。

行的块元素：如果我们即想让一个元素可以设置宽度高度，又想让它以行内形式显示，这时我们可以设置display的值为inline-block.

块级元素转行内元素

display:inline;

行内元素转块级元素

display:block;

元素转行内块元素（inline-block)

display:inline-block;

参考：