【前端老赵的CSS简明教程】2-1 CSS盒模型的概念和作用

 

 大家好，欢迎来到本节的CSS教程。我是前端老赵！今天我们将会介绍CSS盒模型的概念和作用。CSS盒模型是我们在页面布局中非常重要的一个概念，它可以帮助我们更好地控制元素的尺寸和位置。在本节课中，我们将学习什么是CSS盒模型、它的组成部分、以及如何利用它来实现布局。

在开始之前，我们先来回顾一下HTML和CSS的基本概念。HTML负责描述页面的结构和内容，而CSS则用来控制页面的样式和布局。在进行页面布局时，我们通常需要考虑元素的尺寸、位置以及相互之间的关系。而CSS盒模型则是帮助我们完成这些任务的一个非常重要的概念。

现在让我们来看一下CSS盒模型的示例代码。

首先，我们在HTML中定义一个div元素，并设置其类名为box。接着，在CSS中，我们给.box设置了一个宽度和一个高度。这个宽度和高度，其实就是盒模型的基本属性。

Markup

<div class="box"></div>

CSS

 .box { width: 200px; height: 100px; }

盒模型实际上是由四个部分组成的：内容区、内边距、边框和外边距。这四个部分围绕着元素形成了一个盒子，我们可以利用CSS对这四个部分进行单独的控制。