css盒子里面添加内容

CSS盒子作为网页布局中必不可少的元素，在页面设计中扮演了至关重要的角色。除了基本的定位和样式设置之外，我们还可以在CSS盒子中添加各种内容来丰富页面效果。

.box {
  
 width: 300px;
  
 height: 200px;
  
 background: #eee;
  
 padding: 20px;
}
 

在上述代码中，我们创建了一个CSS盒子，并添加了一些基本的属性。其中宽度和高度设置了盒子的大小，背景色设置为灰色，内边距为20px，使得盒子内的内容有一定的间距。

.box h1 {
  font-size: 24px;
  color: #333;
}
 

在CSS盒子中添加标题是非常常见的做法，通过设置标题的样式，可以使页面更加美观清晰。在上述代码中，我们使用了标题选择器h1，设置了标题的字号和颜色。

.box p {
  font-size: 18px;
  line-height: 1.5;
  color: #666;
}
 

正文内容是CSS盒子中最基础也是最重要的部分，通过设置正文内容的样式，可以使页面更加易读。在上述代码中，我们使用了段落选择器p，设置了正文字号、行高和颜色。

.box img {
  width: 100%;
  height: auto;
  display: block;
}
 

在CSS盒子中添加图片是页面设计中非常重要的一个环节，在上述代码中，我们使用了图片选择器img，设置了图片的宽度为100%（与盒子宽度相同），高度自适应，并使用display:block将图片垂直居中。

总之，在CSS盒子中添加内容是一项很有启发性的任务，通过了解常用的内容添加方式，可以使页面效果更加丰富和专业。