css基础-学习css 05box盒模型

前言

首先要搞清楚的是盒模型，具备两种计算规则也就是2种模型，默认声明的块级元素是

 box-sizing: content-box; /* 默认值 */

默认盒模型

他的最终宽度计算规则就是=width+padding+border

.box {
  box-sizing: content-box; /* 默认值 */
  width: 200px;
  padding: 20px;
  border: 5px solid;
}

• 最终宽度 = width(200px) + padding(20px2) + border(5px2) = 250px

border-box 模式

他的最终宽度，一旦在声明border-box的那一刻，就仅仅代表他的width宽度！

.box {
  box-sizing: border-box; 
  width: 200px;
  padding: 20px;
  border: 5px solid;
}

• 最终宽度 = 直接锁定为 width 值 200px
• 内容区域自动压缩：200px - (20px2 + 5px2) = 150px
• 布局尺寸直观可控，无需复杂计算
• 可视化内容比较

  |-------------------------------|
  |           border-box           |
  |   --------------------------   |
  |   |        padding          |   |
  |   |   -------------------   |   |
  |   |   |     content      |   |   |
  |   |   -------------------   |   |
  |   |                        |   |
  |   --------------------------   |
  |                               |
  |-------------------------------|
  

  总结

• 默认盒模型 宽度会在我们设置padding等内容时进行叠加计算而变大！
• border-bos模型 一旦设置就会固定宽度为width实际数值，内布间距会因为padding等信息进行压缩而变小！

补充

1、第三种情况

还具备一种情况，就是继承父级属性

 box-sizing: inherit; /* 继承父级的 border-box 规则 */

2、一般开发情况下会设置如下的属性继承，来控制盒模型主体

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}