CSS盒模型简介

盒模型是使用CSS设计、布局的基石所在，CSS盒模型的本质是将HTML元素看做盒子。
一个标准的盒模型由content（内容）、padding（内填充）、border（边框）
margin（外边距）四部分组成，在CSS中，所有的HTML元素都可以被看做一个盒子。
对于初学者而言，深入理解盒模型这一重要概念，更有利于页面的布局、排版。

一、盒模型的概念

CSS(Cascading Style sheet)定义了如何显示HTML元素，用于控制Web页面的外观。
CSS假定所有的HTML元素在页面中都生成了一个占据空间的矩形元素框，可以形象
地将其看作是一个盒子，是一种思维模型。CSS 围绕这些盒子产生了一种“盒子模型”
概念，通过定义一系列与盒子相关的属性达到控制页面布局结构和表现效果。

二、盒模型的组成

• 内容区（content）

  内容区用于呈现盒子中的主要信息内容，可以是文字、图片等形式。

  content属性	用法
  width	指定内容区的宽度
  height	指定内容区的高度
  overflow	决定内容部分溢出表格的表现形式

• 填充区（padding）

  填充区是内容和边框之间的空间,通常用于控制子元素在父元素中的位置关系。设置盒子背景色或者背景图片属性时，可以延伸至padding区域，padding区域属于盒模型内部

  padding属性	用法
  padding	用于设置盒子内上下左右四个方向的填充距离
  padding-left	用于设置盒子左边的填充距离
  padding-right	用于设置盒子右边的填充距离
  padding-top	用于设置盒子上边的填充距离
  padding-bottom	用于设置盒子下边的填充距离

• 边框（border）

  边框是环绕内容区和填充区的边界

  border属性	用法
  border	用于设置盒子上下左右四个方向的边框效果
  border-left	用于设置盒子左边框效果
  border-right	用于设置盒子右边框效果
  border-top	用于设置盒子上边框效果
  border-bottom	用于设置盒子下边框效果

• 外边距（margin）

  外边距是盒子和盒子之间的空间,通常用于控制同级元素之间的位置关系。设置盒子背景色或者背景图片属性时，不可以延伸至margin区域，margin区域属于盒模型外部。

三、盒模型大小的计算

一个盒模型和宽度组成有：
​内容区宽度（width）
​盒子内部左右填充距离（padding-left；padding-right）
​盒子左右边框的宽度（border-left；border-right）
​盒子左右外边距的宽度（margin-left；margin-right）

一个盒模型和高度组成有：
​内容区高度（height）
​盒子内部上下填充距离（padding-top；padding-bottom）
​盒子上下边框的宽度（border-top；border-bottom）
​盒子上下外边距的宽度（margin-top；margin-bottom）