首页 > bootstrap的盒子模型好奇怪

bootstrap的盒子模型好奇怪

最近帮朋友解决一个前端的小应用,然后对方指明说他们公司必须要用bootstrap。我之前从未使用过现成库,刚一接触觉得确实还不错,不过在自己写一些不在库包含的前端组建时,发现css不听话了。发仔细研究才发现是盒子模型很妖怪,似乎是内外盒子模型的感觉。

一旦设置了高度或者宽度发现无论你设置margin或者padding或者border之类的,你的总size是不变的,好吧这点用起来却是也算方便,这里我也是能理解的。

问题出现了,发现设置上下padding 的时候,发现第二个下面元素的padding-top和前一个元素的padding-bottom重叠了,额,这样无奈,我padding-bottom设置的数值必须减去下一个元素的padding-top才能得到正确的值,虽然问题可以解决,但是这点让我十分不解

请对前端比较了解的朋友告知,解答我心中的疑惑。


第二问题是css的margin的垂直塌陷,标准就是这样的。就是margin-top和margin-bottom去数字大的那个。


看bootstroop的css文件第一行 *{ box-sizing:border-box}
它改变了盒模型。
想知道为什么。查下 box-sizing:border-box 自然明白原因。


我猜测是不是有些元素设置了 box-sizing属性为border-box,关于这个样式,自行百度,手机打字不方便啊。关于第二个问题,在jsbin上重现一下,方便大家帮你解决。


建议重新添加一个新的class在firebug里面查看一下,提高一下优先级来解决问题。


测试环境是什么?
bootstrap 的box-sizing属性为border-box,所以总的size是不变的
第二个问题建议贴代码


在隔开元素的时候不应该是用margin吗
padding也不存在外边距融合行为
还请重现一下

【热门文章】
【热门文章】