CSS（盒子模型，定位，浮动，扩展）

CSS盒子模型、定位和浮动是前端开发中的重要概念，以下是对应的简要解释和示例代码：

1. 盒子模型(Box Model)：

   定义了元素的边框、内边距（padding）、外边距（margin）和内容区域。

.box {
  width: 300px; /* 内容宽度 */
  padding: 20px; /* 内边距 */
  border: 5px solid blue; /* 边框 */
  margin: 10px; /* 外边距 */
}

2. 定位(Positioning)：

   CSS提供了相对定位、绝对定位和固定定位三种方式。

/* 相对定位 */
.relative {
  position: relative;
  top: 10px;
  left: 20px;
}
 
/* 绝对定位 */
.absolute {
  position: absolute;
  top: 50px;
  right: 30px;
}
 
/* 固定定位 */
.fixed {
  position: fixed;
  bottom: 0;
  left: 0;
}

3. 浮动(Floating)：

   可以使元素向左或向右浮动，影响周围元素的布局。

/* 向左浮动 */
.float-left {
  float: left;
  margin-right: 10px;
}
 
/* 向右浮动 */
.float-right {
  float: right;
  margin-left: 10px;
}
 
/* 清除浮动 */
.clearfix {
  clear: both;
}

以上代码展示了如何使用CSS进行盒子模型的设置、元素的定位以及元素的浮动操作，是前端开发中的基础知识。