CSS入门

块级元素与行内元素

此课程是收费课程,请先购买或加入会员后再访问。

这一集,重点来研究一个概念性的问题:行内元素与块级元素。上台来表演的两位主演,就是divspan了。咱们都知道,它们两个都是无意义的标签。那它们的区别,其实就是,div默认是块级元素span行内元素

块级元素与行内元素

区别一

我们还是用实际代码,来看看行内元素块级元素到底是怎么回事?

<html>
<head>
    <meta charset="utf-8">
    <!-- ... -->

    <style>

    </style>
</head>

<body>
<div>小皮皮爱地球</div>
<div>因为到处都是好吃的!</div>

</body>
</html>

大家观察下,这里有两个div,刷新下,会发现它们是分为两行排列的。这个div就叫做块级元素。与div这个块级元素相对的是行内元素span。再来写两个span标签。

两个块级元素

<body>
<!-- ... -->

<hr>

<span>小皮皮爱学CSS</span>
<span>因为学会了就有好吃的了!</span>
</body>

刷新页面,发现这次的两个span标签,是排列到一行的。

通过鼠标右键里面的检查工具,看看一下它们所占的空间。发现div是占一整行的,而span是只占据自己文字大小的空间。div默认就是一个块级元素,span默认则是一个行内元素。这就是块级元素行内元素,最基本的一个区别。

大家其实从名字就能感觉到,块级块级嘛,那就是一大块,当然要占据一整行了。行内元素,这更明显了,它是可以和其他元素,在同一行内的。

两个行内元素

块级元素自己要占满一整行。
行内元素可以与相邻的行内元素在同一行里。

区别二

<html>
<head>
    <meta charset="utf-8">
    <!-- ... -->

    <style>
        div, span {
            width: 100px;
            height: 100px;
        }
   </style>
</head>

<body>
<div>小皮皮爱地球</div>
<div>因为到处都是好吃的!</div>

<hr>

<span>小皮皮爱学CSS</span>
<span>因为学会了就有好吃的了!</span>
</body>
</html>

块级元素可以正常设置widthheight属性
行内元素设置widthheight无效

行内元素,宽和高无效

区别三

div, span {
    margin: 20px;
}

通过检查工具观察,如果是一个块级元素,设置它的marginpadding当然都是没问题的了。但如果是个行内元素,看到左右外边距,是正常生效的。但上下外边距,完全没有生效。

行内元素的margin

再来测试下padding块级元素肯定是没问题的,检查工具里,行内元素感觉也都生效了。左右方向肯定是没问题的,但其实上下方向依然有问题。不信的话,我们给spanpadding-top单独设置一个非常大的值。

行内元素的padding

span {
    padding-top: 200px;
}

行内元素的padding

检查工具里,可以看到确实设置成了200px了,但整个元素根本没有向下移动。哪怕你把它设置成2000px,它依然不会向下移动一点。所以说明,这依然也是有问题的,最后总结就是:

块级元素可以正常设置marginpadding
行内元素,设置marginpadding时,水平方向有效,竖直方向无效。

不同元素之间的转换

其实不同元素之间,是可以互相转换的。方法就是使用display属性,display也就是显示成的意思。

<html>
<head>
    <meta charset="utf-8">
    <!-- ... -->

    <style>
        div {
            display: inline;
        }
    </style>
</head>

<body>
<div>小皮皮爱地球</div>
<div>因为到处都是好吃的!</div>

<hr>

<span>小皮皮爱学CSS</span>
<span>因为学会了就有好吃的了!</span>
</body>
</html>

div本身是一个块级元素,加上display: inline;后,刷新下,变成了一行显示。这也就是显示成行内元素

接着,我们给span加上一个

<style>
/* ... */

span {
    display: block;
}
</style>

行内与块级转换

刷新,发现这样写后,一个span反而变成了块级元素

inline-block

除了行内块级外,还有一种叫做inline-block的。自然界中,有一种动物是驴和马在一起,生出来的,这就是骡子了。这个骡子,它同时拥有驴和马的一些特点,它呢吃苦耐劳,体质又好。咱们inline-block,就是inlineblock它们两个生出来的。我这么说,相信你也猜到了,inline-block就会同时拥有行内块级的双方的一些特性了。

span修改为如下样式

<style>
/* ... */
span {
    display: inline-block;
    width: 200px;
    height: 200px;
    margin: 20px;
    padding: 20px;
}
</style>

display: inline-block后,发现span行内元素一样,依然可以和其他元素并排显示。但设置它的内、外边距这些,又能像块级元素一样正常生效。这个就是所谓的inline-block了。

display: inline;

常见的行内与块级元素

类型 举例
行内元素 span、td、a、img、button
块级元素 div、h1~h6、p、ul、li、table、tr、hr

现在就注册ITFun.tv会员
持续关注IT界最新技术,随时更新相关课程。在线学习IT课程或直接报名参加线下武汉PHP、Web前端培训。

仅仅30秒钟就可以简单注册

会员注册(免费)
×