CSS基础(盒子模型、浮动、定位)

CSS盒子模型：

.box {
  width: 300px; /* 内容区域的宽度 */
  padding: 20px; /* 内边距 */
  border: 5px solid blue; /* 边框 */
  margin: 10px; /* 外边距 */
  box-sizing: border-box; /* 宽度和高度包含内边距和边框 */
}

CSS浮动：

.float-left {
  float: left; /* 元素向左浮动 */
  clear: left; /* 清除左侧浮动影响 */
}
 
.float-right {
  float: right; /* 元素向右浮动 */
  clear: right; /* 清除右侧浮动影响 */
}

CSS定位：

.relative {
  position: relative; /* 相对定位 */
  top: 10px; /* 相对于原位置向下移动10px */
  left: 20px; /* 相对于原位置向右移动20px */
}
 
.absolute {
  position: absolute; /* 绝对定位 */
  top: 50px; /* 相对于最近的已定位父元素向下移动50px */
  right: 30px; /* 相对于最近的已定位父元素向右移动30px */
}
 
.fixed {
  position: fixed; /* 固定定位 */
  bottom: 0; /* 相对于视口向上移动0px，即固定在底部 */
  left: 0; /* 相对于视口向左移动0px */
}
 
.static {
  position: static; /* 静态定位，这是默认值 */
}

这些是CSS盒子模型、浮动和定位的基本概念和用法示例。在实际开发中，还会涉及更复杂的布局技巧，如flexbox和grid布局系统，但这些是基础，是必须掌握的。