块级元素与行内元素
本课属于 Coddy HTML 学习旅程的“使用 CSS 添加样式”单元。第 54 课，共 76 课。
在 HTML 中，元素根据它们在页面上的显示方式分为块级元素或行内元素。理解这两类元素的区别，对于创建结构良好且视觉效果出色的布局至关重要。让我们来了解块级元素和行内元素的特点与行为。
块级元素
块级元素总是在新的一行开始，并占据所有可用宽度，尽可能向左右延伸。它会创建一个内容“块”。
块级元素的示例包括：
<div><h1>-<h6><p><ul>、<ol>、<li><form><table><header>、<footer>、<section>、<article>、<nav>
行内元素
行内元素不会另起一行，只占用足以容纳其内容的宽度。它允许行内元素在文本行中或块级元素内排列。
行内元素的示例包括：
<span><a><img><strong>,<em><input>,<button>,<label><textarea>
挑战
简单给定一个包含各种元素的 HTML 文档。你的任务是判断哪些元素是块级元素，哪些是行内元素，然后应用一些基本的 CSS 来突出它们之间的区别。按照以下步骤操作：
- 编写一条 CSS 规则，选中所有块级元素（
div、p、h1）。将它们的background-color设置为lightgray，并添加border，值为1px solid blue。 - 编写一条 CSS 规则，选中所有行内元素（
span、a、img）。将它们的background-color设置为lightyellow，并添加border，值为1px solid red。
观察块级元素如何占据可用的全部宽度并另起一行，而行内元素只占据所需的空间，并在行内排列。
亲手试试
<html>
<head>
<title>Block vs Inline Elements</title>
<style>
/* Write CSS rules here */
</style>
</head>
<body>
<div>This is a div element.</div>
<p>This is a paragraph with a <span>span element</span> inside.</p>
<h1>This is a heading element.</h1>
<a href="#">This is a link</a>
<img src="https://img.freepik.com/free-photo/abstract-luxury-gradient-blue-background-smooth-dark-blue-with-black-vignette-studio-banner_1258-54865.jpg" alt="Image" width="100">
</body>
</html>
自我测试这节课包含一个小测验。开始学习即可作答，并记录你的进度。
使用 CSS 添加样式中的所有课
自己练习： Web 在线编辑器