javascript - bootstrap的盒子模型好奇怪
ringa_lee
ringa_lee 2017-04-10 16:08:22
[JavaScript讨论组]

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

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

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

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

ringa_lee
ringa_lee

ringa_lee

全部回复(6)
高洛峰

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

怪我咯

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

伊谢尔伦

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

ringa_lee

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

PHP中文网

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

ringa_lee

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号