<!-- CSS 世界张鑫旭著 -->
CSS 流体布局下的宽度分离原则
所谓 "宽度分离原则", 就是 CSS 中的 width 属性不与影响宽度的 padding/border(有时候包括 margin) 属性共存, 也就是不能出现以下的组合:
.box { width:100px; border: 1px solid; }
或者
.box{ width:100px; padding: 20px; }
而是利用宽度分离原则, width 独立占用一层标签, 而 padding,border,margin 利用流动性在内部自适应呈现.
- .father {
- width: 180px;
- }
- .son {
- margin: 0 20px;
- padding: 20px;
- border: 1px solid;
- }
宽度分离便于维护. 当一件事情的发展可以被多个因素左右的时候, 这个事情最终的结果就会变数很大而不可预期. 宽度在这里也是类似, 由于盒尺寸中的 4 个盒子都能影响宽度, 自然页面元素的最终宽度就很容易发生变化而导致意想不到的布局发生.
width,padding,border 混用的时候, 当我们需要修改 padding 或者 border-width 的时候, 就要重新计算 width, 而使用 width 分离之后, 我们没有任何计算, 浏览器会自动计算, 完全不用担心尺寸的变化, 页面结构更加稳固.
宽度分离多使用了一层标签, 增加了 html 成本.
而既无需计算, 又无需额外嵌套标签的实现, 就是改变 width 作用细节的 box-sizing 属性.
改变 width/height 作用细节的 box-sizing
box-sizing 被直译为 "盒尺寸", 实际上, 更准确的叫法应该是 "盒尺寸的作用细节", 或者说更通俗一点, 叫 "width 作用的细节", 也就是说, box-sizing 属性的作用是改变 width 的作用细节.
box-sizing 的值有 content-box,padding-box,border-box;content-box 是默认值, padding-box 只有 Firefox 曾经支持过, border-box 全线支持.
为何 box-sizing 不支持 margin-box?
没有价值! 如果我们使用 width 或 height 设定好了尺寸, margin 不会影响 offset 尺寸.
并且对于 box-sizing 的 margin-box 效果, 如果是 IE10 及以上版本浏览器, 可以试试 flex 布局; 如果是 IE8 及以上版本可以使用 "宽度分离", 或者特定场景下使用 "格式化宽度" 来实现,??? 也就是并不是强需求.
来源: http://www.bubuko.com/infodetail-2694149.html