HTML中块级元素与行内元素的区别和转换
在写网页代码的时候,我们经常会给我们要设计的网页分块来写,这样我们才好设计网页的整体布局,一个完整的网页写下来,我们给它分了好几个部分,也使用了好多的标签,每个标签代表了一个元素。这也更方便我们后期的修改。我们经常用的好多标签被分为两种形式:块级元素和行内元素。这两种类型之间是如何区分和转换的?今天我们就一起来了解一下。
1.块级元素
块级元素:black element,默认状态下每次都占据一整行,宽度会扩展到与父元素同宽,后面内容必须重起一行显示,所以块级元素总是在新行上开始;
块级元素可以有效设置其width、height、margin等值;
块级元素一般作为容器出现,用来组织结构,宽度缺省是它的容器的100%,除非设定一个宽度。但并不全是如此,有些块级元素,如
只能包含块级元素。其他的块级元素则可以包含 行级元素如.也有一些则既可以包含块级,也可以包含行级元素。
常用的块级元素有:
......
- /
-
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