在CSS中，盒子是一个重要的概念，它是用来表示页面中的一些元素，比如文本、图像等内容的。而为了表示这些盒子，我们需要使用一些特定的符号。下面介绍一下CSS中盒子的表示方法。
/**
* 用CSS表示盒子
* general layout:
*
+-margin--+
|
|
| +-border-+
| |
padding
|
| |
|
| +-----------------+ |
|
content
|
+------------------+
*
*/
/**
* 定义一个盒子，它的大小是100px * 100px
* 居中显示，背景颜色为红色，边框为2px的实线边框
*/
div {
width: 100px;
height: 100px;
margin: auto;
background-color: red;
border: 2px solid #000000;
padding: 10px;
}
在上面的代码中，我们定义了一个宽和高都是100px的盒子，并让它居中显示。同时，我们还为这个盒子添加了红色的背景和2px的黑色实线边框，并设置了10px的padding。这个盒子的整体布局可以用下面这张图来表示。
+---------------------------+ | | | +---------------------+ | | | | | | | content | | | | | | | +---------------------+ | | | +---------------------------+
需要注意的是，盒子的外部还包含了margin。在上面的示例中，我们没有给margin指定具体的值，因此它会默认为0。如果需要设置盒子的margin，可以使用以下代码。
div {
margin: 10px;
}
上面的代码表示给这个盒子的外部设置一个距离为10px的margin。同样，我们可以使用border和padding属性分别设置盒子的边框和内边距。
综上，CSS中盒子的表示方法可以通过margin、border、padding等属性来设置。而这些属性的组合，就可以构成一个具有固定宽度和高度的盒子。如果要掌握CSS布局，盒子的表示方法就必须熟练掌握。
