CSS盒子模型

盒子模型介绍

盒模型（box model），在浏览器页面中每一个元素都或多或少的占有一块矩形区域，这块区域就叫做盒模型。
如下图所示的盒模型：

盒模型由内到外由以下部分组成：

• 内容区（content） - 决定了盒子实际能放的内容大小。
• 内边距（padding）- 决定了内容区与边框之间的距离
• 边框（border）- 指定边框大小
• 外边距（margin）- 距离其他元素(盒子)之间的距离

内容区、内边距、边框和外边距之间的关系

• 默认情况下，width和height只是元素的内容区的大小。
• 盒子实际可见的大小还要加上内边距和边框的大小。
• 盒子与其他盒子之间的距离由外边距所决定。

box-sizing属性

可以通过box-sizing属性修改盒子width和height属性的计算方式
可选值：

• content-box - 默认值，默认计算的是内容区的
• border-box - 计算的是整个盒子的实际可见大小（从边框开始计算）

盒子边框

默认情况，边框影响盒子的实际大小
边框相关常用三个样式：

• border-color - 边框颜色
• border-style - 边框样式
  • solid - 实线
  • dotted - 点状虚线
  • dashed - 虚线
  • double - 双虚线
• border-width - 边框宽度

可以通过简写方式同时设置四个方向的边框大小、颜色，样式；
简写格式：border：width color style

如需单独设置某个方向的边框样式：

• border-top - 设置上边框样式
• border-left - 设置左边框样式
• border-right - 设置右边框样式
• border-bottom - 设置下边框样式

盒子内边距

默认情况下，内边距会影响盒子的实际大小
设置盒子某一方向的内边距：

• padding-top - 设置上内边距大小
• padding-left - 设置左内边距大小
• padding-right - 设置右内边距大小
• padding-bottom - 设置下内边距大小

四种简写形式设置四个方向的内边距：

• padding: 10px; - 同时设置四个方向的内边距为10像素
• padding: 10px 20px; - 设置上下内边距10像素，左右内边距20像素
• padding: 100px 10px 50px; - 上内边距100像素，左右内边距10像素，下内边距50像素
• padding:10px 20px 30px 40px - 分别设置上右下左内边距分别为 10、20、30，40像素

盒子外边距

设置盒子的外边距不会影响盒子的实际大小，会实际影响着盒子所在的位置。
设置盒子某一方向的外边距：

• margin-top - 设置上外边距大小
• margin-left - 设置左外边距大小
• margin-right - 设置右外边距大小
• margin-bottom - 设置下外边距大小

外边距可以设置为负数，如设置元素会往相反方向移动。

也可以像内边距的四种简写形式一样设置盒子外边距。