块级元素,行内元素以及行内块元素的区别

在学习css的过程中，我们会发现每一个网页元素都有一个display属性，用于确定该元素的类型，每一个元素都有默认的display属性值，比如div元素，它的默认display属性值为“block”，成为“块级”元素(block-level)；而span元素的默认display属性值为“inline”，称为“行内”元素。今天，就来说一说block和inline的区别。

常用的块级元素（block）：div， p，ul，ol，li，form，dl，pre，h1，h2 等........

常用的行内元素（inline）：span，a，label，u，textarea 等........

块级元素的特征：(display:block;)

 a)没有宽度时，默认宽度100%，

 b)可以设置宽高，

 c)单独占据一行，无论它的宽度是多少，下一个元素都会被排到下一行

下面是实例的代码部分             看实例请戳这里——>点击打开链接

    
    
    
    


        
块元素的性质
		
没有宽度时，默认宽度100%    height:50px;
		
可以设置宽高  height:50px;width:400px;  
		上面两个元素都是块元素，不管宽度是多少，它们都单独占据一行
        

行内元素的特征：(display:inline;)

a)无法设置宽高，宽度和高度自适应内容的大小。

b)可以和其他行内元素在同一行排列。如果标签之间有空格，也会被浏览器解析。

c)不支持margin:auto;居中。可以通过在它的父元素上设置  textalign:center;  来让他居中显示。

d)不支持垂直方向的margin设置。

e)它的上下内边距(padding)只对自己有效。

下面是行内元素的实例代码：          看实例请戳这里——>点击打开链接

    
    
    
    


        
块元素的性质
		无法设置宽高，宽度和高度自适应内容的大小。   height:200px;height:200px;   设置宽高没用

		可以和其他行内元素在同一行排列。 如果标签之间有空格，也会被浏览器解析。

		不支持margin:auto;居中。 margin:auto; 设置margin:auto;没用

		不支持垂直方向的margin设置。  margin-top:20px;margin-bottom:20px; 设置垂直方向margin没用
		
下面用两个块级元素包裹行内元素来看一下行内元素的pading值
		

		它的上下内边距(padding)只对自己有效。 padding-top:20px;padding-bottom:10px; 垂直方向的padding值不会影响到其他元素的布局。 
		

		
下面用两个块级元素包裹块元素来看一下块元素的pading值
		

		
它的上下内边距(padding)会影响其他元素的布局。块元素： padding-top:20px;padding-bottom:10px; 
		

在块级元素和行内与元素中，我们也发现块级元素的缺点是会自动换行，而行内元素的缺点是无法设置宽高，不支持垂直方向的外边距合内边距，那么有没有同时支持宽高，又不会自动换行，并且可以设置上下边距的样式呢？inline-block就是这样的一个属性。下面，我们来看看什么inline-block有哪些特性。

行内块元素的特征：(display:inline-block;)

a) 可以和其他元素在同一行显示，但是标签之间的空格会被解析
b) 可以设置宽高。
c) 可以支持垂直方向的margin设置。
d) 不支持margin:auto;居中。
e) ie6 ie7 不支持这个属性。

下面是行内块元素的示例代码             看实例请戳这里——>点击打开链接

    
    
    
    


        
块元素的性质
		
可以和其他元素在同一行显示
 
但是标签之间的空格会被解析。

        
可以设置宽高。  width:800px;height:50px;

		
可以支持垂直方向的margin设置。margin-top:10px;

		
不支持margin:auto;居中。 margin:auto;