css一个盒子放四个盒子

CSS中盒模型是一个重要的概念，它描述了HTML元素如何被渲染为矩形盒子，并且可以对这个盒子进行样式设置。在接下来的文章中，我们将学习如何使用CSS把一个盒子分成四个小盒子。

<!-- HTML代码 -->
<div class="box"></div> 

首先，我们需要创建一个大盒子，也就是HTML中的一个div元素。可以给这个大盒子一个类名为"box"：

/* CSS代码 */
.box {
  width: 200px;
  height: 200px;
  background-color: yellow;
} 

接下来，我们需要把这个大盒子分成四个小盒子。我们可以使用CSS中的position和float属性来实现。在.box中添加四个子元素，并设置它们的宽高、背景色和border属性：

/* CSS代码 */
.box {
  width: 200px;
  height: 200px;
  background-color: yellow;
}

.box div {
  width: 50%;
  height: 50%;
  border: 1px solid black;
}

#box-1 {
  float: left;
  background-color: red;
}

#box-2 {
  float: right;
  background-color: blue;
}

#box-3 {
  float: left;
  clear: both;
  background-color: green;
}

#box-4 {
  float: right;
  background-color: purple;
} 

在.box中添加四个子元素，并设置它们的宽高、背景色和border属性。然后，使用ID选择器来设置四个小盒子的位置和背景颜色。#box-1和#box-2分别使用浮动left和right的方式使它们横向排列，#box-3和#box-4也使用浮动left和right，并使用clear:both来使它们另起一行。

现在，我们就成功把一个大盒子分成了四个小盒子。这个技巧可以运用在各种情况下，例如分割页面布局、制作网格布局等。