素材牛VIP会员
bootstrap的盒子模型好奇怪
 gu***yu  分类:Html5  人气:827  回帖:6  发布于6年前 收藏

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

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

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

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

讨论这个帖子(6)垃圾回帖将一律封号处理……

Lv4 码徒
13***64 软件测试工程师 6年前#1

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

Lv6 码匠
问***m Linux系统工程师 6年前#2

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

Lv6 码匠
坐***来 技术总监 6年前#3

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

Lv5 码农
隔***王 学生 6年前#4

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

Lv1 新人
袜***了 PHP开发工程师 6年前#5

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

Lv5 码农
疯***斯 职业无 6年前#6

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

 文明上网,理性发言!   😉 阿里云幸运券,戳我领取