css盒子怎么画模型

CSS盒子模型是Web页面布局中极为重要的概念，它定义了HTML元素如何被渲染和布局的方式。在CSS盒子模型中，每个HTML元素都被看作一个矩形盒子，它包含一些可调节的属性，如宽度(width)、高度(height)、边框(border)、外边距(margin)、内边距(padding)等等。

.box {
  width: 200px;
  height: 100px;
  border: 1px solid #ccc;
  margin: 10px;
  padding: 20px;
}
 

如上述代码所示，这是一个CSS盒子模型的基本样式，我们可以根据实际需要调整各个属性来实现我们想要的外观效果。

首先，盒子的宽度和高度可以通过width和height属性来进行定义，如上代码的width: 200px;height: 100px;的设置。

接着，我们可以使用border属性来定义盒子的边框，如上述代码的border: 1px solid #ccc;的设置，表示盒子边框宽度为1像素，边框样式为实线，颜色为#ccc。

然后，我们可以使用margin属性来定义盒子的外边距，如上述代码的margin:10px;的设置，表示盒子四周的外边距为10像素。

最后，我们还可以使用padding属性来定义盒子的内边距，如上述代码的padding:20px;的设置，表示盒子四周的内边距为20像素。

通过这些基本属性的调整，我们就可以实现各种不同的CSS盒子模型效果，以及更复杂的Web页面布局。