前端——css块级元素和行内元素的区别详细解析_css块元素和行内元素的区别-CSDN博客

本文链接：https://blog.csdn.net/Searchin_R/article/details/83036820

BIU~biu~biu~biu~

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

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

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

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

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

下面来看一个栗子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <style>
        p{
           
            background-color:#222;
            color:#FFF;
        }        

        span{
            
            background-color:#777;
        }

    </style>
</head>
<body>
        <p>块级元素一</p>
        <p>块级元素二</p>
        <span>行内元素一</span>
        <span>行内元素二</span>
    
</body>
</html>

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

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

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

直接上代码。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <style>
        p{
            width:200px;
            height:100px;
            background-color:#222;
            color:#FFF;
        }        

        span{
            width:200px;
            height:100px;
            background-color:#777;
        }

    </style>
</head>
<body>
        <p>块级元素一</p>
        <p>块级元素二</p>
        <span>行内元素一</span>
        <span>行内元素二</span>
    
</body>
</html>

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

呀~果然是这样。

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

还是上代码。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <style>
        p{
            width:200px;
            height:100px;
            background-color:#222;
            color:#FFF;
            margin-left:20px;
            margin-top:50px;
            padding:5px;
			
        }        

        span{
            width:200px;
            height:100px;
            background-color:#777;
            margin-left:20px;
            margin-top:50px;
            padding-left:5px;
            padding-top:50px;
			padding-bottom:50px;
			
        }
		Strong{
            width:200px;
            height:100px;
            background-color:#777;
            margin-left:20px;
            margin-top:50px;
            padding-left:5px;
            padding-top:50px;
			padding-bottom:50px;
			color:#666;
        }

    </style>
</head>
<body>
        <p>块级元素一</p>
        <p>块级元素二</p>
        <span>行内元素一</span>
        <Strong>行内元素二</Strong>
    
</body>
</html>
</html>

上面的程序给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。

如图：