HTML中块级元素与行内元素的区别和转换

在写网页代码的时候，我们经常会给我们要设计的网页分块来写，这样我们才好设计网页的整体布局，一个完整的网页写下来，我们给它分了好几个部分，也使用了好多的标签，每个标签代表了一个元素。这也更方便我们后期的修改。我们经常用的好多标签被分为两种形式：块级元素和行内元素。这两种类型之间是如何区分和转换的？今天我们就一起来了解一下。

1.块级元素

块级元素：black element，默认状态下每次都占据一整行，宽度会扩展到与父元素同宽，后面内容必须重起一行显示，所以块级元素总是在新行上开始；

块级元素可以有效设置其width、height、margin等值；

块级元素一般作为容器出现，用来组织结构，宽度缺省是它的容器的100%，除非设定一个宽度。但并不全是如此，有些块级元素，如<form>只能包含块级元素。其他的块级元素则可以包含 行级元素如<P>.也有一些则既可以包含块级，也可以包含行级元素。

常用的块级元素有：<p> <div> <h1>......<h6> <ul>/<ol><li> <table> <from>

2.行内元素

行内元素：Inline element （又叫内联元素），默认状态下，其内容在一行内显示，所及行内元素一般和其他元素都在一行上；

设置其高度和宽度无效， 不能定义自己的宽和高。如果需要设置高度，可以通过行高line-height撑起来。宽度就是它的文字或图片的宽度，不可改变， 左右margin可以改变，padding可以改变。(ie6上下不能padding) ；

行内元素不会单独的占有一行，而是挨着显示的；

行内元素只能容纳文本或者其他行内元素。

常见的行内元素有：<span> <a> <img> <imput>

3.浏览器支持

IE6/7及IE8混杂模式中，text- align:center可以使块级元素也居中对齐。其他浏览器中，text-align:center仅作用于行内内容上。

解决方法：为所有需要相对父容器居中对齐的块级元素设置“margin：0 auto”。但这个方式 IE6/IE7/IE8的混杂模式中不支持，所以还要设置父容器的 “text-align:center;”。若居中对齐的子元素内的行内内容不需要居中对齐，则还需要为其设置“text-align:left”：

4.块级元素和行内元素的转换

disaplay： block 将行内元素转换为块级元素。

disaplay：inline 将块级元素转换为行内元素。

display:inline-block; ，即行内的块级元素，它拥有块级元素的特点，可以设置宽高，padding，margin，但是它却又符合行内元素的特征：不独占一行，宽度不会沾满父元素，在不设置宽高的情况下，宽高随内容变换；而且和行内元素一样可以排列于一行。

disaplay：none 元素不可见。

注：通过display:block;与display:inline;可以很容易的实现两类元素变现形式之间的转换。但是，有很多时候，我们需要使用display:inline-block；来转换行内元素，或者是块级元素。但是这个元素是css2新增的属性，对于IE7以下的版本不支持这个属性

float当把行内元素设置完float：left/right后，该行内元素的display属性会被赋予block值，且拥有浮动特性。行内元素去除了之间的莫名空白，

position当为行内元素进行定位时，position：absolute与position：relative。都会使原先的行内元素变为块级元素。

下面的代码是块级元素和行内元素转换的简单例子，希望能帮助你们：

转换前：

<style type="text/css">
   p{ background:red;}
   div{background:yellow;}
   span{ background:blue;color:white;}
   strong{background:green;color:white;}
   </style>
  <p>块级元素 p </p><div>块级元素 div </div><span>行内元素 span </span><strong>行内元素 strong </strong>

转换后：

   <style type="text/css">

   p{ background:red;display:inline;}

   div{background:yellow;display:inline;}

   span{ background:blue;display:block; color:white;}

   strong{background:green;display:block; color:white;}

   </style>

   <p>块级元素 p </p><div>块级元素 div </div><span>行内元素 span </span><strong>行内元素 strong </strong>