[分享]css中 盒子模型包括

CSS中的盒子模型是指我们在网页中所使用的每一个HTML元素都可以看作是一个矩形的盒子，这个盒子包含了元素的内容、内边距、边框和外边距。 为了更好的理解盒子模型，让我们来看一下下面这张图： ＋———...

CSS中的盒子模型是指我们在网页中所使用的每一个HTML元素都可以看作是一个矩形的盒子，这个盒子包含了元素的内容、内边距、边框和外边距。

为了更好的理解盒子模型，让我们来看一下下面这张图：

 ＋——————————＋
      |   内    |      Margin
    Padding |  容    |  上右下左
      |    区   |      区
      ＋——————————＋ (Border) 

在上面这幅图中，最外层的矩形就是盒子模型最外层的外边距。在外边距里面，是盒子模型的边框(Border)。边框里面是盒子模型的内边距(Padding)，再往里面就是盒子模型实际的内容区域。总的来说，盒子模型由外向内分别包括了外边距(Margin)、边框(Border)、内边距(Padding)和内容区域（也可以叫做"元素"）。

在CSS中，我们可以通过设置元素的宽度和高度来影响盒子模型的内容区域的大小。比如以下的CSS样式：

 div {
         width: 250px;
         height: 150px;
         padding: 10px;
         border: 2px solid red;
         margin: 20px;
      } 

这个样式描述了一个div元素。这个div元素的总宽度应该是：250 + （2 x 2）+（2 x 10）+（2 x 20）=334px；总高度应该是：150 + （2 x 2）+（2 x 10）+（2 x 20）=234px。其中2代表边框的宽度，10代表内边距的宽度，20代表外边距的宽度。

理解盒子模型在CSS中的应用和设置，可以让我们更好的设计网页的布局，实现更好的用户体验。