Upload
-
View
2.127
Download
4
Tags:
Embed Size (px)
Citation preview
回顾基本概念 : 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 在布局层面能力的不二考评手段。“寻找圣杯”甚至还曾经引起过业内一阵技术讨论热潮。