Pro Css Box Model : Margin & Padding
Jun 13, 2015
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
回顾基本概念 ： 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 容易掉进的“坑”
☆ margin 失效问题：
边距重叠 (collapsing margin)
规则 ：
A. In-flow 中 2+ 的毗邻块级元素，垂直方向外边距会叠加B. 0 height 的元素自身的 margin-top 、 bottom 会重叠C. 水平边距不会重叠D. 块级格式化内容的元素之间不会重叠E. 块级格式化内容的元素，不会和其子元素重叠
解决 ： 基于意识清醒的重构，我们说视外边距重叠为“ BUG” 的视角是不正确的
元素设置为块级格式化内容的元素 用 padding 替换 margin
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
垂直居中
描述 ： 对于已知高度的块元素，可使用负边距 + 定位的技术实现该元素垂直居中
技巧 ： 采用负边距的 margin 值 + 绝对定位。
文档 ： .wapper { position:relative; } .inner { height:100px; position:absolute; top:50%; margin:-50px; }
演示 ： 猛击我去 demo 页
高级进阶技巧 ： Margin
IMG Sprite
描述 ： 适用于高对比度模式的 IMG Sprite 是 CSS Sprite 的一个子类，作用同 Background Sprite ，但在一些情况下会更富优越性。
技巧 ： 采用负边距的 margin 值 + overflow:hidden 。
文档 ：《 IMG Sprite：针对高对比度模式的优化技巧》 演示 ： 猛击我去 demo 页
高级进阶技巧 ： Padding
首字下沉
描述 ： 段落首字突出显示。
技巧 ： 采用 padding 及 text-indent 配合使用
文档 ： p { padding:1em; text-indent:-1em;
} 演示 ： 猛击我去 demo 页
说明 ： 不建议使用，可控性、兼容性不佳；同类渐进增强效果更建议使用“ :first-letter” 伪类实现。
高级进阶技巧 ： Padding
流体布局
描述 ： 适用于小区域内的多栏流体布局。定宽的边栏，弹性的夹心 mainer
技巧 ： 采用 padding 及 绝对定位技术
文档 ： .contain { padding-left:200px; position:relative; } .bar { width:200px; position:absolute; top:0; left:0; } .mainer {}
演示 ： 猛击我去 demo 页
高级进阶技巧 ： Padding
响应式视频
描述 ： 使视频和图片一样，可以根据当前窗口尺寸的变换自动缩放以适应浏览体验。
技巧 ： padding-bottom:80% ； 会产生一个 5:4 ( 100 % 80) 比例的容器
关键字 ： 0 height 、 0 width 、 padding-bottom
文档 ：《为视频创建固定比例》
演示 ： 猛击我去 demo 页
高级进阶技巧 ： Margin + Padding
多栏等高布局
描述 ： 未知高度多栏，实现等高。其高度以最高的栏为基准。
技巧 ： overflow : hidden + padding + -margin
文档 ：《真正的CSS等高布局》
演示 ： 猛击我去 demo 页
说明 ： 支持套嵌、 N 栏、完美兼容性
高级进阶技巧 ： Margin + Padding
圣杯布局
描述 ：
一个自适应的中心和固定宽度的侧边栏 允许中间的内容先于其他出现在代码中 允许任何一栏都是最高的高度 只需要额外的一个 DIV标签 非常的简单的 CSS 代码 + 尽可能不使用 hack
技巧 ： 前述各种技巧的混搭
文档 ：《 In Search of the Holy Grail 》
演示 ： 猛击我去 demo 页 纯洁版
说明 ：曾经，圣杯是对一个前端 er 在布局层面能力的不二考评手段。“寻找圣杯”甚至还曾经引起过业内一阵技术讨论热潮。
Related Documents
