为什么 Bootstrap 3 引入了 Box-Sizing:所有元素的 Border-Box?
从 Bootstrap 2.3.2 到 3.0 的过渡.0 中,一个显着的变化是采用 border-box 作为所有元素的默认框大小。这种根本性的转变值得探索,以了解 Bootstrap 为何做出这一决定。
官方发行说明表明,这一变化旨在“增强网格系统并简化大小调整选项”。通过包含所有元素,border-box 属性可确保更轻松地计算大小,特别是在网格系统内。
Bootstrap 网格系统完全流畅,列定义为总宽度的百分比。但是,装订线保持固定的像素宽度,每侧填充 15 像素。传统上,由于使用的单位不同,这种组合可能会导致复杂的计算。
但是,border-box 通过在声明的元素宽度内包含边框和填充来简化此过程。这有效地扩大了元素占用的区域,从而更容易对齐列并确定整体网格布局。
此外,边框框的采用符合行业最佳实践。 Paul Irish 等专家主张广泛采用它,并指出其在精确布局控制、响应能力和整体 CSS 可维护性方面的优势。
以上是为什么 Bootstrap 3 选择 `box-sizing: border-box` 作为默认值?的详细内容。更多信息请关注PHP中文网其他相关文章!