分类
美股期权交易基础

外汇交易策略的“圣杯”

Zhoubo 发表于 外汇交易策略的“圣杯” 2020/07/05 15:31:28 2020/07/05

关于圣杯布局的实现原理剖析

Zhoubo 发表于 2020/07/05 15:31:28 2020/07/05

参加了 [ 全栈开发者 ] 【 WEB 前端全栈成长计划】,听了课程中老师讲布局案例时提到过圣杯布局,事后百度了一下,可能很多同学们和我一样刚第一次接触到“拥有姓名”的经典布局。仔细研究了一下各两种布局最终都是实现一个左中右的布局,左和右固定宽度,中间宽度 100% 自适应(如图 1 )。剖析一下圣杯布局的实现原理巩固学习效果。

第 1 步:定义主体 ” main-body ” > ,设定主体 div 的 padding 左右边距,这里的边距是为左侧和右侧两个 DIV 预留的宽度(如图 2 )。

第 2 步:主体 DIV 内分别定义中间、左侧、右侧三个 DIV (如图 1 )。

1 、定义左侧 < div >” main-body-padding-left ”> 的 margin-left:-100% 使其与主体 同一行,然后设定 left:-300px 与主体 左侧宽度重叠(如图 3 )。

2 、定义右侧 < div >” main-body-padding- right ”> 的 margin-left:- 300 使其与主体 同一行,然后 right:- 300px 使其与主体 右侧宽度重叠(如图 4 )。

圣杯布局是利用负 margin 属性, margin-left: -100% ,这里说的 -100% 是相对于父元素宽度而言,子元素 margin-left: -100 % 就像向父元素移动,可以理解为两行,第一行宽度 100% ,第二行 margin-left: -100 % 后即和第一行完全重叠,通过 z-index 的设置可以将第一行显示。

通过浏览器调试可以发现,当左侧 div 设定 z-index:1 时,主体 定义的 padding-left 宽度就被显示出来了(如图 5 ),当左侧取消 z-index 属性,布局恢复正常(如图 6 )。