3-7 请描述下css盒模型基本概念

盒子模型的概念：

在html中，把每一个元素都当做成一个盒子，拥有盒子的平面外形和空间
盒模型由内容（content）+内边距（padding）+边框（border）+外边距（margin）4部分构成

内容区域：你书写的内容或者子元素能够显示的区域
内边距：撑开内容与边框的距离
边框：元素的边框
外边距：撑开元素和其他元素之间的距离

1. 盒子模型-内容区域（在标准盒子模型下）：

   • 标准盒子模型下设置的width和height都是content（内容）区域的宽高

   • width：

     • 默认是auto。auto分为4种情况：

     • fill-available：充分利用可使用空间（块标签）

     • fit-content:收缩到合适（浮动，定位）

     • min-content:收缩到最小（表格中常见）

     • max-content:超出容器限制（英文单词较长，或者设置了不换行，就会超出容器限制

   • height

   • auto：其高度由内部元素堆叠而成，也就是内部元素撑起来的

2. 默认情况下基本都是标准盒模型

3. 怪异盒模型：ie6 或者是 没有正确书写版本声明 或者是设置了box-sizing

4. 将一个元素设置盒模型显示

   • box-sizing属性：
     • content-box:标准盒模型
     • border-box:怪异盒模型

标准盒模型：元素占用的空间大小为：内容区域(content) + 内边距(padding) +边框(border) + 外边距(margin)

怪异盒模型： 元素所占用的空间大小为：内容(content + padding + border) 整体的宽度