html怎么把字转换为行内元素,HTML中块级元素与行内元素的区别和转换

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

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

1.块级元素

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

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

块级元素一般作为容器出现，用来组织结构，宽度缺省是它的容器的100%，除非设定一个宽度。但并不全是如此，有些块级元素，如

只能包含块级元素。其他的块级元素则可以包含 行级元素如

.也有一些则既可以包含块级，也可以包含行级元素。

常用的块级元素有：

......

• /

1. 2.行内元素

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

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

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

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

   常见的行内元素有：

   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。都会使原先的行内元素变为块级元素。

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

   转换前：

   p{ background:red;}

   div{background:yellow;}

   span{ background:blue;color:white;}

   strong{background:green;color:white;}

   块级元素 p

   块级元素 div
   行内元素 span 行内元素 strong

   转换后：

   p{ background:red;display:inline;}

   div{background:yellow;display:inline;}

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

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

   块级元素 p

   块级元素 div
   行内元素 span 行内元素 strong