8、HTML:行内元素（内联元素）与块元素

1、概念对比

• 块元素：所谓的块元素就是独占一行的元素，即使它再窄（占用的范围），内容再少，也会独占一行。
• 行内元素（内联元素）：只占用本身大小的元素，不会占用一行。内容越多，占用的范围越宽。如果有三个行内元素的占用的宽度加在一起不到一行的宽度，那么他们是可以排列在一行内，不用换行。

2、行内元素举例

<!--行内元素-->
<em>床</em>&nbsp;<strong>前</strong>&nbsp;<a href="#">明月</a><em>光</em>

效果如下：

可以看见这一行文字里面用到了两个 em标签，一个strong标签，一个a标签。由于他们都是行内元素，所以是可以在一行内排列的。

3、块级元素举例

<!--块级元素-->
<p>块级元素演示</p><a href="#">这是一个行内元素a标签</a>

效果如下：

可以看见p标签是一个块级元素，本身所包含的内容并没有达到一行的宽度，但是它后面的 a标签 就是不能排在它的后面。只能乖乖的排在它的下面一行去了。这就是块元素。

4、常见的行内元素与块元素

• 行内元素：a 、em、strong、img、font、iframe、span
• 块元素：p、div、（h1 ~ h6）、br（换行）、hr（水平线）

5、注意事项

注意：
1、 div是一个纯粹的块元素，没有任何的语义，也就是说，它不像 h1 标签，h1标签是一级标题，h1有默认的样式，比如 h1 的字体大小，颜色，字体加粗了等等。但是div 就没有这些默认的样式。

2、span标签也是一样的，也是没有任何的语义，span标签是专门用来选中文字，为文字设置样式的。

注意：
1、a元素（也就是 a 标签）可以包含任意元素，除了它本身。
2、p元素中不能包含任何的块元素。
3、块元素主要用于做页面的布局，而内联元素主要用来为文本设置样式，一般会用块元素去包含内联元素，而不会用内联元素去包含块元素。

• 点赞
• 收藏
• 分享
• 文章举报