大白话行内和块级元素,差异在哪?
什么是行内元素和块级元素
在网页开发里,HTML 元素可以分成行内元素和块级元素,这两种元素在页面里的显示方式和特性是不一样的。
行内元素
行内元素就像是排队的人,它们会一个挨着一个地排列在同一行上,不会强制换行。只有在这一行空间不够的时候,才会换到下一行接着排。而且行内元素的宽度和高度是由它里面的内容决定的,你没办法直接去设置它的宽度和高度。常见的行内元素有 <a>
(超链接)、<img>
(图片)、<input>
(输入框)、<span>
等等。
块级元素
块级元素就像是一个个独立的房间,它们会自己独占一行,不管宽度够不够,下一个块级元素都会跑到新的一行去。你可以给块级元素设置宽度和高度,要是不设置宽度,它默认会占满父元素的整个宽度。常见的块级元素有 <div>
、<p>
(段落)、<h1>
- <h6>
(标题)、<ul>
(无序列表)、<ol>
(有序列表)等等。
差异总结
- 显示方式:行内元素在一行里依次排列,块级元素独自占一行。
- 宽度和高度:行内元素的宽高由内容决定,不能直接设置;块级元素可以设置宽高,不设置宽度时默认占满父元素宽度。
- 内外边距:行内元素的上下外边距设置无效,块级元素可以正常设置内外边距。
代码示例
<!DOCTYPE html>
<html lang="en"><head><!-- 设置文档的字符编码为 UTF-8 --><meta charset="UTF-8"><!-- 设置页面在移动设备上的初始缩放比例 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 设置网页的标题 --><title>行内元素和块级元素示例</title><style>/* 给所有块级元素添加一个灰色边框和内边距,方便观察 */div, p, h1 {border: 1px solid gray;padding: 10px;}/* 给所有行内元素添加一个红色边框和内边距,方便观察 */a, span {border: 1px solid red;padding: 5px;}</style>
</head><body><!-- 块级元素示例 --><!-- h1 是块级元素,会独占一行 --><h1>这是一个块级标题</h1><!-- p 是块级元素,会独占一行 --><p>这是一个块级段落,它会独自占一行,不管宽度够不够,下一个元素都会跑到新的一行。</p><!-- div 是块级元素,会独占一行 --><div>这是一个块级 div 元素,也会独自占一行。</div><!-- 行内元素示例 --><!-- a 是行内元素,会和其他行内元素排在同一行 --><a href="#">这是一个行内超链接</a><!-- span 是行内元素,会和其他行内元素排在同一行 --><span>这是一个行内 span 元素。</span>
</body></html>
代码解释
- 在 HTML 部分,我们用了
<h1>
、<p>
、<div>
这些块级元素,它们每个都会独自占一行。 - 同时也用了
<a>
和<span>
这两个行内元素,它们会在同一行依次排列。 - 在 CSS 部分,我们给块级元素添加了灰色边框和内边距,给行内元素添加了红色边框和内边距,这样就能更清楚地看到它们的显示效果。