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

明月镇魂 2018-12-06 11:27:43
在学习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有悖,不知道这一块如何解释?
...全文
729 3 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
3 条回复
切换为时间正序
请发表友善的回复…
发表回复
xosg 2018-12-07
  • 打赏
  • 举报
回复
CSS有一个补丁叫box-sizing:border-box | content-box, 专门用来设定元素的边距是否算入宽高, 应该是这个属性导致的不一致 PS: 如果我说的有误, 应该是记忆不清了,, 现在都用框架, 很久没手写css了, CSS本身也有很多的bug, 如果实在不懂不用太纠结
xosg 2018-12-07
  • 打赏
  • 举报
回复
引用 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....
明月镇魂 2018-12-07
  • 打赏
  • 举报
回复
引用 1 楼 流浪的狗和一坨屎 的回复:
CSS有一个补丁叫box-sizing:border-box | content-box, 专门用来设定元素的边距是否算入宽高,
应该是这个属性导致的不一致
PS:
如果我说的有误, 应该是记忆不清了,, 现在都用框架, 很久没手写css了, CSS本身也有很多的bug, 如果实在不懂不用太纠结


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

39,118

社区成员

发帖
与我相关
我的任务
社区描述
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一。
社区管理员
  • HTML5社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧