css盒子模型练习

CSS盒子模型是前端开发中必备的知识点之一。具体而言，盒子模型指的是一个HTML元素在浏览器中呈现的样式。盒子模型可分为以下四个部分：

1.内容区域：指的是元素内的文字、图片以及其他嵌套元素。

.example {
  width: 200px;
  
   
   
   /*盒子宽度*/
  height: 100px;
  
   
   
  /*盒子高度*/
  border: 1px solid #000;
 /*盒子边框*/
  padding: 10px;
  
   
   
  /*内容区域内边距*/
}
 

2.内边距（padding）：指的是内容区域到盒子边缘之间的距离。

3.边框（border）：指的是盒子的边框。在CSS中，我们可以通过border属性设置盒子边框。

4.外边距（margin）：指的是盒子边缘到周围元素之间的距离。在CSS中，我们可以通过margin属性设置盒子的外边距。

下面是一个盒子模型的实例：

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

以上代码定义了一个宽200像素、高100像素的盒子，边框为1像素粗的黑色边框，内容区域四周有10像素的内边距和20像素的外边距。

通过熟悉CSS盒子模型，我们可以更好地控制元素的呈现效果，从而实现更美观、合理的前端设计。