前端之css第三天

第一天：CSS的介绍和基本语法

第二天：CSS的选择器和样式规则

第三天：CSS的盒模型和布局

这是CSS的第三天，我们将介绍CSS的盒模型和布局。

盒模型：

CSS盒模型(Box Model)是用来布局和处理HTML中的盒子的。每个元素都可以看作一个盒子，它包括：边距(margin)、边框(border)、填充(padding)和内容(content)。

CSS布局：

CSS提供了多种布局方式，包括浮动布局(float)、绝对定位布局(position: absolute)、相对定位布局(position: relative)等。

实例代码：

/* 设置元素的边框 */
.box {
  border: 1px solid black;
}
 
/* 设置元素的内边距 */
.box {
  padding: 20px;
}
 
/* 设置元素的外边距 */
.box {
  margin: 10px;
}
 
/* 使用浮动布局 */
.box {
  float: left;
}
 
/* 使用绝对定位布局 */
.box {
  position: absolute;
  top: 10px;
  left: 10px;
}
 
/* 使用相对定位布局 */
.box {
  position: relative;
  top: 5px;
  left: 5px;
}

在这个例子中，我们创建了一个.box类，它可以应用于任何想要创建或定位的元素。我们展示了如何设置边框、内边距、外边距，以及如何使用不同的定位方式来控制元素在页面中的位置。