关于BootStrap的container类的三个宽度设定问题

[明月镇魂]

在学习bootstrap时，学习了页面布局container类，这个类用于固定宽度并支持响应式布局，查看源码时是这么写的

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

对于其中的width: 1170px;不理解，在学习CSS时如果是

#divdemo {
				width: 1170px;
			}

这个应该是设置的内容的宽度，而div的实际宽度还要加上padding，但是bootstrap中设置的width按照效果来看，直接将div的宽度设置上了1170px，和CSS有悖，不知道这一块如何解释？

[明月镇魂]

引用 1 楼 流浪的狗和一坨屎 的回复:

CSS有一个补丁叫box-sizing:border-box | content-box, 专门用来设定元素的边距是否算入宽高,
应该是这个属性导致的不一致
PS:
如果我说的有误, 应该是记忆不清了,, 现在都用框架, 很久没手写css了, CSS本身也有很多的bug, 如果实在不懂不用太纠结

您说的对，CSS还分为标准盒子模型和IE盒子模型两种，这两个的width完全不一样。我一直都是使用标准模型，没有接触过IE模型。另外想问下，是不是IE在前端来说，大家都不喜欢这个浏览器？

[xosg]

引用 2 楼 明月镇魂 的回复:

[quote=引用 1 楼 流浪的狗和一坨屎 的回复:] CSS有一个补丁叫box-sizing:border-box | content-box, 专门用来设定元素的边距是否算入宽高, 应该是这个属性导致的不一致 PS: 如果我说的有误, 应该是记忆不清了,, 现在都用框架, 很久没手写css了, CSS本身也有很多的bug, 如果实在不懂不用太纠结

您说的对，CSS还分为标准盒子模型和IE盒子模型两种，这两个的width完全不一样。我一直都是使用标准模型，没有接触过IE模型。另外想问下，是不是IE在前端来说，大家都不喜欢这个浏览器？[/quote]....IE2015年被微软放弃, 被edge取代, 2019年edge内核也被放弃, 转向chromium....

[xosg]

CSS有一个补丁叫box-sizing:border-box | content-box, 专门用来设定元素的边距是否算入宽高, 应该是这个属性导致的不一致 PS: 如果我说的有误, 应该是记忆不清了,, 现在都用框架, 很久没手写css了, CSS本身也有很多的bug, 如果实在不懂不用太纠结