HTML 进阶-第三篇：基于盒模型的布局与 CSS 选择器基础

HTML 进阶-第三篇：基于盒模型的布局与 CSS 选择器基础

一、块级元素与内联元素布局差异

在 HTML 布局中，块级元素和内联元素具有显著不同的布局特点，了解这些差异是实现多样化页面布局的关键。

（一）块级元素的布局特点

块级元素，像 <div> 和 <p>，在页面布局中就像是一个个“大块头”。它们的显著特点是独占一行，无论其内容多少，都会自动换行，为后续元素让出空间。这使得块级元素成为构建页面基本结构的重要组成部分。

此外，块级元素可以自由设置宽度、高度、内外边距等盒模型属性。例如，我们可以通过 CSS 为一个 <div> 元素设置固定的宽度和高度，以精确控制其在页面上占据的空间大小。同时，通过调整内外边距，可以控制元素内部内容与边框的距离，以及与其他元素之间的间距。

以下是一个简单示例，展示 <div> 块级元素的布局效果：

<!