圣杯布局&双飞翼布局

• 两边定宽,中间自适应
• 要求先渲染中间主题部分(所以中间的节点是需要写在左右节点之前的)

//HTML代码



    
    
    
    


header

    
我在中间,但要首先渲染
    
我在左边
    
我在右边

footer

//css代码
#content {
    padding: 0 100px 0 100px;//左右留出空白
    overflow: hidden;//闭合浮动
    border:2px solid black;}

#middle {
    width: 100%;
    background-color: pink;
    float: left;
}

#left {
    width: 100px;
    background-color: red;
    float: left;
    margin-left: -100%;//移到上一行开头
    position: relative;//相对定位
    left: -100px;//左移到父级设置的padding值所留出的空白区
}

#right {
    background-color: blue;
    float: left;
    width: 100px;
    margin-left: -100px;//移到上一行末尾
    position: relative; //相对定位
    right:-100px;  //右移到父级设置的padding值所留出的空白区
}

#head{
    background-color: aqua;
}

#foot{
    background-color: blueviolet;
    clear: both; //防止因为浮动导致上移,但其实我试了一下也可不用,因为含有浮动元素的父级元素设置了`overflow:hidden`,触发bfc,闭合了浮动
}

效果如下:

圣杯布局

和她是同胞兄弟的还有一个双飞翼布局,他们所实现的效果是相同的,但是在处理中间区域被遮挡的问题上做法稍有不同

• 圣杯布局:为了中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后，将左右两个div用相对布局position: relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div。
• 双飞翼布局:为了中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该子div里用margin-left和margin-right为左右两栏div留出位置

个人觉得双飞翼布局更简单一些,不会涉及到相对定位