HTML 进阶-第三篇:基于盒模型的布局与 CSS 选择器基础
一、块级元素与内联元素布局差异
在 HTML 布局中,块级元素和内联元素具有显著不同的布局特点,了解这些差异是实现多样化页面布局的关键。
(一)块级元素的布局特点
块级元素,像 <div>
和 <p>
,在页面布局中就像是一个个“大块头”。它们的显著特点是独占一行,无论其内容多少,都会自动换行,为后续元素让出空间。这使得块级元素成为构建页面基本结构的重要组成部分。
此外,块级元素可以自由设置宽度、高度、内外边距等盒模型属性。例如,我们可以通过 CSS 为一个 <div>
元素设置固定的宽度和高度,以精确控制其在页面上占据的空间大小。同时,通过调整内外边距,可以控制元素内部内容与边框的距离,以及与其他元素之间的间距。
以下是一个简单示例,展示 <div>
块级元素的布局效果:
<!DOCTYPE html>