狠狠撸

Pro CSS Box Model : Margin & Padding

SNS前端组堂主
csser@vip.
www.osmn00.com

盒模型中的 margin 和 padding

回顾基本概念：Margin
取值范围： N

语法：margin : top right bottom left

效用：

? block : top right bottom left
? inline : top right bottom left

简写：

? margin : 10px;

? margin : 10px 15px;

? margin : 10px 0 15px;

? margin : 10px auto 15px;

Margin 容易掉进的“坑”

☆ 兼容性BUG ：

? IE6 双倍边距BUG

情景：IE6中，块级父元素内最左侧的浮动块级子元素，其左外边距
的值会呈现为设置值的双倍。

公式： IE6 + float + block + margin-left = left-most block error

解决：

? self { display : inline } -- rubbish !

? parent { padding-left : value; }
self { margin-right : value; }


☆ margin 失效问题：

? 边距重叠 (collapsing margin)

规则：

A. In-flow 中 2+ 的毗邻块级元素，垂直方向外边距会叠加
B. 0 height 的元素自身的margin-top、bottom会重叠
C. 水平边距不会重叠
D. 块级格式化内容的元素之间不会重叠
E. 块级格式化内容的元素，不会和其子元素重叠

解决：基于意识清醒的重构，我们说视外边距重叠为“BUG”的视角是
不正确的

? 元素设置为块级格式化内容的元素
? 用 padding 替换 margin


☆ margin 失效问题：

? clear 重置 (clear reset)

规则：毗邻浮动元素的非浮动元素，设置了 clear 属性，其 margin-
top 属性会失效。

说明：浏览器通过重置 clear 元素的 margin-top 值来实现清除浮动

解决：元素设置为块级格式化内容的元素

回顾基本概念：Padding
取值范围： N+

语法：padding : top right bottom left

效用：

? block : top right bottom left
? inline : top right bottom left

简写：

? padding : 10px;

? padding : 10px 15px;

? padding : 10px 0 15px;

? padding : 10px 0 15px 5px;

Padding 容易掉进的“坑”

☆ padding 与 margin 重叠的问题：

情景： IE6、IE7、IE8 (兼容模式) 中，触发了 haslayout 的块级元素，其
padding 会与其子元素的 margin 相重叠。

公式： haslayout parent padding block + child margin block

OR

parent padding block + haslayout child margin block

= Padding and Margin overlap

解决：

? 转换实现思路，padding 替代 margin
? 通过中转层干掉相关 box 的haslayout

高级进阶技巧：Margin

? 流体布局

描述： 1 个或 2 个定宽的边栏，一个柔软的夹心 main 区域，自适应浏览器
的分辨率宽度。

技巧：采用负边距的 margin 值。

文档：《使用负边距创建自适应宽度的流体布局》

演示：猛击我去 demo 页


? 垂直居中

描述：对于已知高度的块元素，可使用负边距 + 定位的技术实现该元素垂
直居中

技巧：采用负边距的 margin 值 + 绝对定位。

文档： .wapper { position:relative; }
.inner {
height:100px;
position:absolute;
top:50%;
margin:-50px;
}



? IMG Sprite

描述：适用于高对比度模式的 IMG Sprite 是 CSS Sprite 的一个子类，作用
同 Background Sprite，但在一些情况下会更富优越性。

技巧：采用负边距的 margin 值 + overflow:hidden。

文档：《IMG Sprite：针对高对比度模式的优化技巧》


高级进阶技巧：Padding

? 首字下沉

描述：段落首字突出显示。

技巧：采用 padding 及 text-indent 配合使用

文档： p {
padding:1em;
text-indent:-1em;
}


说明：不建议使用，可控性、兼容性不佳；同类渐进增强效果更建议使用
“:first-letter”伪类实现。


? 流体布局

描述：适用于小区域内的多栏流体布局。定宽的边栏，弹性的夹心 mainer

技巧：采用 padding 及绝对定位技术

文档： .contain {
padding-left:200px;
position:relative;
}
.bar {
width:200px;
position:absolute;
top:0;
left:0;
}
.mainer {}



? 响应式视频

描述：使视频和图片一样，可以根据当前窗口尺寸的变换自动缩放以适应
浏览体验。

技巧：padding-bottom:80%；会产生一个 5:4 ( 100 % 80) 比例的容器

关键字： 0 height、0 width、padding-bottom

文档：《为视频创建固定比例》


高级进阶技巧：Margin + Padding

? 多栏等高布局

描述：未知高度多栏，实现等高。其高度以最高的栏为基准。

技巧： overflow : hidden + padding + -margin

文档：《真正的CSS等高布局》


说明：支持套嵌、N栏、完美兼容性

高级进阶技巧：Margin + Padding
? 圣杯布局

描述：

? 一个自适应的中心和固定宽度的侧边栏
? 允许中间的内容先于其他出现在代码中
? 允许任何一栏都是最高的高度
? 只需要额外的一个DIV标签
? 非常的简单的CSS代码 + 尽可能不使用 hack

技巧：前述各种技巧的混搭

文档：《 In Search of the Holy Grail 》

演示：猛击我去 demo 页纯洁版

说明：曾经，圣杯是对一个前端er在布局层面能力的不二考评手段。“寻找
圣杯”甚至还曾经引起过业内一阵技术讨论热潮。

NEXT : CSS Layout 101
www.osmn00.com

狠狠撸

Pro Css Box Model : Margin & Padding

Recommended

More Related Content

Similar to Pro Css Box Model : Margin & Padding (15)

Recently uploaded (6)

Pro Css Box Model : Margin & Padding