前端——css块级元素和行内元素的区别详细解析

BIU~biu~biu~biu~

块级元素和行内元素是布局中常见的两种基本元素，但是未必有很多人深入的研究它们的细微差别。

• 　　常见块级元素：div  p  form ul ol li 等；
• 　　常见的行内元素：span strong em;

它们的区别主要有以下几点：

1.块级元素独自占一行且宽度会占满父元素宽度，行内元素不会独占一行，相邻行内元素可以排在同一行。

这一点在进行页面布局的时候需要非常注意，因为如果忽略了这些特性，就很容易达不到自己预想的效果，且还不容易找到原因。

下面来看一个栗子：

    
    
    


        
块级元素一
        
块级元素二
        行内元素一
        行内元素二
    

上面的代码定义了两个块级元素和两个行内元素，按照我们上面说的，块级元素要独占一行，而行内元素可以排列一行，代码运行应该会有三行元素，运行一下看看是不是这样。

可以看到，块级元素要是没有设置float，那就是独占一行。行内元素则没有那么霸道，可以一行排列。

2.块级元素可以设置weith和height，行内元素设置width和height无效，而且块级元素即使设置宽度也还是独占一行。

直接上代码。

    
    
    


        
块级元素一
        
块级元素二
        行内元素一
        行内元素二
    

我们在style中给p和span都设置了width和height，按照上文的说法，两个p元素将会拥有相应宽高，而span元素则无动于衷。我们来看看是不是这样。

呀~果然是这样。

3.块级元素可以设置margin和padding属性，行内元素水平方向的margin和padding如margin-left、padding-right可以产生边距效果，但是竖直方向的如padding-top和margin-bottom不会产生边距效果。

还是上代码。

 

    
    
    


        
块级元素一
        
块级元素二
        行内元素一
        行内元素二
    

上面的程序给p设置了margin-left和margin-top、以及padding，而span元素和Strong元素也设置了margin-left和margin-top，为了好分辨，将span 的paddind-left和padding-top设置了50px。我们来看看效果是什么样的。

果然，p元素设置的属性都生效了，而span元素和Strong元素设置的margin-top失效了。

哎？好像有什么不对哎~

上文不是说对竖直方向什么的也无效吗？为什么span和Strong的padding在竖直方向起作用啦？难道上面说错啦？

其实不是。

我们再看看效果图，这时候可以发现，这两个行内元素覆盖了块级元素二部分区域。照规矩，它们应该没有重合区域的，现在这样子着实不符合规矩呀。

其实，如果我们把行内元素的颜色去掉，我们会发现，这两个行内元素还在原来的位置。

现在大家应该就明白了。对于margin的竖直效果，行内元素是一概不会搭理的。而对于padding-top和padding-bottom，则会显示出效果，但是却又不会对别的元素造成影响。说白了，它就是一个纸老虎，看着出了bug，其实啥事没有。

4.块级元素和行内元素的相关属性：display

下图是display 的相关值

display关于块级元素和行内元素常用的有以下三种值：

• inline:
  1. 使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行. 
  2. 不能更改元素的height，width的值，大小由内容撑开. 
  3. 可以使用padding，margin的left和right产生边距效果，但是top和bottom就不行.
• block:
  1. 使元素变成块级元素，独占一行，在不设置自己的宽度的情况下，块级元素会默认填满父级元素的宽度. 
  2. 能够改变元素的height，width的值. 
  3. 可以设置padding，margin的各个属性值，top，left，bottom，right都能够产生边距效果.
•  inline-block:
  1. 结合了inline与block的一些特点，结合了上述inline的第1个特点和block的第2,3个特点.
  2. 用通俗的话讲，就是不独占一行的块级元素。

我们可以通过修改元素的display属性来切换行内元素和块级元素。其中块级元素对应display：block，行内元素对应display：inline。

试一下把p元素的display改成inline。

如图：

而display：inline-block则可以让元素具有块级元素和行内元素的特性：既可以设置长宽，可以让padding和margin生效，又可以和其他行内元素并排。

再来试一试display：inline-block。

我们把span和Strong设置为inline-block。

这样，行内元素也可以设置宽高以及其它块级元素有的属性啦~~显然是一个很实用的属性。大家在布局的时候可以经常用哟~

好啦，以上就是块级元素和行内元素的一些差别，如果大家有别的发现，欢迎留言评论，我们一起学习呀~~

biu~~