【CSS】盒子模型

盒子模型的本质

• 将CSS作用的选择符对象都当做一个"平面矩形"盒子来看待

盒子模型

盒子的构成

• 盒子中装载的内容(content)
• 盒子边框(border)
• 盒子内边距(padding)
• 盒子外边距(margin)

标准盒子模型

盒子的基本属性

1. 内容区域

• width：内容宽度
• height：内容高度
• 宽度和高度的设定可以是具体的数值，也可以是百分比

2. 内边距(padding)

• 盒子的内边距分为上右下左四个方向
• 内边距的设定用来控制盒子中装载的内容到盒子边框之间的距离
• 盒子的内边距占据盒子里面的空间，最小为0，不允许出现负值

3. 外边距(margin)

• 盒子的外边距分为上右下左四个方向
• 外边距的设定用来控制盒子外围四周的距离，不属于盒子本身范畴
• 外边距的主要用途是控制盒子的位置，所以可以出现负值

4. 边框(border)

• 大部位的元素对象在默认情况下是没有边框的
• 要设定边框，必须同时设定3个要素：宽度、样式和色彩。border-width、border-style和border-color

5. 方向性复合属性值的缩写

• 具有方向性的复合属性可以在一个声明中设置所有方向属性的值，该属性可以具有1-4个值

复合属性设置规则

盒子模型的计算

• 标准盒子尺寸计算
  遵循计算公式，盒子自身的整体尺寸：内容宽/高 + 内边距 + 边框

盒子自身的尺寸：内容的宽度 + 两侧内边距 + 两侧边框
size_w = width + padding-left + padding_right + border-left + border-right
size_h = height + padding-top + padding_bottom + border-top + border-bottom

盒子在页面中占位的尺寸：内容的宽度 + 两侧内边距 + 两侧边框 + 两侧外边距
placeholder_size_w = width + padding-left + padding_right + border-left + border-right + margin-left + margin-right
placeholder_h = height + padding-top + padding_bottom + border-top + border-bottom + margin-top + margin-bottom

• 框架盒子
  直接将宽/高属性设定为盒子自身的整体尺寸，如果带有内边距或边框，则通过缩小内容区域来实现

实现盒子类型的互换
box-sizing：盒子类型设置

box-sizing类型值

div {
      /* 边框 */
      border-width: 1px;
      border-style: solid;
      border-color: red;
                
      /* 内容 */
      width: 50%;
      height: 200px;
    
      /* 内边距 */
     padding-top: 20px;
     padding-right: 20px;
     padding-bottom: 20px;
     padding-left: 20px;

      /* 外边距 */
     margin-top: 20px;
     margin-right: 20px;
     margin-bottom: 20px;
     margin-left: 20px;
}