圣杯布局/双飞翼布局学习

页面布局需求：

三列布局，左右两端固定，中间部分自适应。

中间栏DOM元素排在首位，在浏览器优先渲染。

布局要求.png

圣杯布局

中间元素占满宽度100%

三元素分别float:left，左右元素分别负的maigin-left，使得三元素中左右一行排列展示

三元素进行相对定位：position:relative，左元素：left,右元素：right，显示中间元素的内容区

最外层容器去掉多余的padding：padding:0 right(width) 0 left(width)

<div class="container">
    <div class="main">main</div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.main,
.left,
.right {
    min-height: 300px;
    float: left;  //三元素一行排列
    position: relative; //相对定位
}
.container {
    padding: 0 300px 0 200px;
}
.main {
    width: 100%;
    background-color: bisque;
}
.left {
    width: 200px;
    background-color: aqua;
    margin-left: -100%;
    left: -200px;  //相对定位：解决中间元素内容被遮挡问题
}
.right {
    width: 300px;
    background-color: darkorange;
    margin-left: -300px;
    right: -300px;
}

双飞翼布局

双飞翼布局区别于圣杯布局：

内部块多了一个元素

在解决内部元素文本被遮挡问题：没有采用相对定位，而是采用margin：0 right(width) 0 left(width)去解决，更简洁易懂。

<div class="container">
    <div class="main">
        <div class="content">content</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.main,
.left,
.right {
    min-height: 300px;
    float: left;
} 
.main {
    width: 100%;
    background-color: bisque;
    padding: 0 300px 0 200px;  // 第一种：外层元素增加内padding显出内部文本
}
.content {  
    margin: 0 300px 0 200px;  //第二种：内部元素增加外margin以此来显示文本
} 
.left {
    width: 200px;
    background-color: aqua;
    margin-left: -100%;
}
.right {
    width: 300px;
    background-color: darkorange;
    margin-left: -300px;
}

flex弹性布局

<div class="container">
    <div class="main">main</div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>

.container {
    display: flex;
    flex-direction: row;
}
.main,
.left,
.right {
    min-height: 300px;
}
.main {
    background-color: bisque;
    /* 第一种：flex-grow 放大中间元素的比例，使其占满剩余全部空间，默认为0，对剩余空间不做处理  */
    flex-grow: 1;  
    flex: 1;  //第二种方法：flex:1;  使元素独占剩余的全部
}
.left {
    width: 200px;
    background-color: aqua;
    /* order 属性定义元素的排列顺序，越小越靠前，默认值为0 */
    order: -1;
}
.right {
    width: 300px;
    background-color: darkorange;
}

绝对定位布局

绝对定位：会使得元素脱离文档流，不占据空间，所以绝对定位的元素会覆盖页面上的其他元素，可以通过z-index去控制文档的堆叠层次。

<div class="container">
    <div class="main">main</div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.main,
.left,
.right {
    min-height: 300px;
    top: 0;  // 还需要设置 `top:0` ！
}
.container {
    position: relative;  // 绝对定位必须设置父级别元素`position:relative`参照物
}
.main {
    margin: 0 300px 0 200px;
    background-color: bisque;
}
.left {
    width: 200px;
    background-color: aqua;
    //左右元素分别进行left:0,right:0的决定定位，脱离文档流，占据以一排元素的左右两端。
    position: absolute;  
    left: 0;
}
.right {
    width: 300px;
    background-color: darkorange;
    position: absolute;
    right: 0;
}

最后编辑于：2018.12.30 19:40:30