一、课程信息

课程名称：一课全面掌握主流CSS布局

课程章节：第8章 双飞翼布局

主讲老师：KingJ

二、课程内容

• 双飞翼布局概念
• 双飞翼布局示例

三、课程收获

通过学习掌握了CSS双飞翼布局的概念，通过代码演示，更加深刻认识到了CSS双飞翼布局的使用情景。

1 什么是双飞翼布局

概念

双飞翼布局最早是淘宝团队提出，是针对圣杯局部的优化解决方案。主要是优化了圣杯布局中开启定位的问题。

2 双飞翼布局的解决方案

示例

<div class="parent">  
    <div class="center">  
    	<div class="inner"></div> 
    </div>  
	<div class="left"></div>  
	<div class="right"></div>  
</div> 

css

.parent{
    height: 300px;
}
.left,.center,.right{
    height: 300px;
    float: left;
}
.left,.right{
    width:300px;
}
.left{
    background-color: #c9394a;
    /* 将当前元素从当前行，移动到上一行同一位置 */
    margin-left: -100%;
}
.center{
    /* 为父级元素宽度的100% */
    width: 100%;
    background-color: #123456;
}
.right{
    background-color: #cccccc;
    margin-left: -300px;

}
.inner{
    height:300px;
    background: pink;
    /* 对应的是left元素的宽度*/
    margin-left:300px;
    /* 对应的是right元素的宽度*/
    margin-right:300px;
}

经典布局

四、学习截图