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

19 篇文章 0 订阅

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。

如图:

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

再来试一试display:inline-block。

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

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

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

biu~~

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值