【 HTML&CSS 课程】03 块级标签和行内标签

站长建议：视频只是作为知识点补充，不要一开始就直接看视频，最好是在阅读之后，带着疑问去看视频。

点击此处，在线观看视频

1.jpg

第三讲备课.zip

请先下载源代码，确认成功运行后，再学习做了哪些步骤以达到这样的效果。？

运行方式：浏览器打开即可

运行效果：

image.png

步骤1：问候一下div标签

首先，让我们一起认识一下div标签，这是一个极为常用的块级标签。所谓的块级标签，就是高度为0，宽度100%的标签，也就是说，它是独占一行的！比如有下面的代码

效果是，一片空白？？哈哈，表面上看是的。但是如果你按一下F12，浏览器就会进入调试界面，我们在调试界面查看这个div，会怎么样呢？

image.png

image.png

我们可以清楚地看到，div的宽度是1021，高度为0。现在，让我们移动一下调试工具的宽。像这样：

image.png

image.png

咦？宽度变成576了，这说明，div的宽度是100%，永远占满页面的宽度！好的，现在，我们给div里面加点料！

请问怎样才能停止散发魅力？帮朋友问的。 

在看div的情况：

image.png

哦，当div里面有东西的时候，会根据div里面内容的高度撑起来。

步骤2：问候一下span标签

span是行内标签，啥叫行内标签呢？行内标签就是一种皮包骨的标签！（哈哈，够精辟了）

首先，我们在页面中加一个空的span标签。

用刚才的方法去调试看看，span是啥？

image.png

image.png

我靠，真TM惨，宽度和高度都是0，这个标签是HTML捡来的么？别急，我们给span标签里面加一点料。

听说双拾壹什么都便宜，那你能不能跟我在一起，就当便宜我。

效果：

image.png

原来如此，span标签里面有什么，宽度和高度会根据里面的内容自己撑起来，还真是皮包骨呢。还有，跟div标签不同的是，span标签不会独占一行。

步骤3：图片img是什么标签

网页中是可以引入图片的，在html中，我们用img标签来引入图片。 标签有两个必需的属性：src 和 alt。src用来指定图片的地址，alt规定图像的替代文本。我们就记住src属性便可，一般用的最多的，也就是src属性啦。

根据上面的步骤，我们知道div是独占一行的，而span的宽度完全根据内容来决定，这个就是区分块级元素和行内元素的试金石。现在我们引入一张图片：

image.png

我们要引入1.jpg，只需要在html中加入这一行代码。

效果：

image.png

如果你觉得图片太大，可以给img添加行内样式（在标签里面加上style属性），设置宽度。

image.png

我们看到，图片跟在了span的右边，这说明img和span一样，都是行内标签。如果你希望span和img换行，请看步骤四。

步骤4：行内标签与块级标签的转换

首先，继续上一个问题，怎样让行内标签换行，最简单的办法：div不是块级标签吗？那直接在外面套一层div不就好了？

    


    
请问怎样才能停止散发魅力？帮朋友问的。
    

        听说双拾壹什么都便宜，那你能不能跟我在一起，就当便宜我。
    
    

        
    

效果：

image.png

简单粗暴，但是实用！当然，还有一种方法，就是给标签设置display的css样式，这个我不打算单独拆成知识点来讲，以后在我们学着做项目的时候，会一一讲到的。