CSS基础入门——盒模型与布局

文章二：CSS基础入门——盒模型与布局

在 CSS 的世界里，盒模型和布局是网页排版的核心要素。理解并熟练掌握它们，对于打造出美观、合理且响应式的网页布局至关重要。今天，我们就来深入剖析盒模型以及常见的布局方式。

一、盒模型

在 CSS 中，每个 HTML 元素都可以被看作是一个独立的盒子。这个盒子由四个主要部分组成：内容（content）、内边距（padding）、边框（border）和外边距（margin）。

1. 内容（content）：它是盒子的核心部分，用于展示元素的实际内容，比如文本、图片、视频等。内容的大小由元素的 width（宽度）和 height（高度）属性来控制。
2. 内边距（padding）：是内容与边框之间的空白区域，主要用于调整内容与边框之间的距离。内边距可以使用 padding 属性一次性设置四个方向的值，也可以分别设置每个方向的值。