非行内元素与行内元素转换的几种方法

文章缘起于在编写代码时看到别人在将行内元素转换为块级元素时的一个简便方法：

为元素加定位position：absolute；

或者position：fixed；

之前没遇到过的情况，今天就来一块说说几种行内元素转化为块级元素的方法~

在这之前先回顾下何为块级元素何为行内元素:

简单来说块级元素和行内元素的区别：

大家都知道块级元素可以设置width，height，并且有独占一行的特征

而行内元素不能设置宽高，即使设置了也不起作用，并且行内元素是在一行文档流中排列开来。

常见块级元素：div , p , ul , li ,  o l, dl,  address,  fieldset,  hr, caption , table

        行内元素：span,   strong,   em,  br,  img ,  input,  label,  select,  textarea,  cite, 

说到行内元素又不得不扯两句替换与非替换元素：

行内替换元素：浏览器根据标签元素属性去判断相应的显示内容，例如：input

行内替换元素的width,height,margin的四个方向都正常显示

行内非替换元素：浏览器直接根据标签元素显示，例如：a，span

行内非替换元素的width,height不起作用，但可以利用line-height来控制高度

所以他们之间的转换终于来了~

方法一：as we all know妙用display

块级元素默认display:block；

行内非替换元素默认display:inline;

行内替换元素默认：display:inline-block;（行内块级元素）

因此通过display:block；与display:inline;轻松实现两类元素的转换~~~

方法二：浮动之float

当为行内元素设置float:left;  or  float:right;行内元素就会变为块级元素

反之，如果为有3个div同时为其设置浮动也可以将其以行内元素一行显示的形式表现出来

方法三：定位之position

最近遇到的为行内元素设置定位position:absolute就可以让其拥有块级元素的性质设置宽高等等

经过补充发现position:frixed也可以实现同样的效果