CSS布局总结

单列布局

统一宽度

.box{
    max-width: 960px;
    margin: 0 auto;
}
header{
    height: 100px;
    background-color: #0000FF;
}
.box .content{
    height: 600px;
    background-color: #008000;
}
footer{
    height: 100px;
    background-color: #333333;
}

主体窄

差不多

两列自适应

Float + overflow:hidden

左边固定，右边自适应：

.box{
    background-color: #333333;
    overflow: hidden;
    zoom:1;
}
.box .side .menu{
    width: 200px;
    height: 500px;
    float: left;/* 左边浮动 */
    background-color: #0000FF;
    margin-right: 10px;
}
.box .content{
    height: 600px;
    background-color: #008000;
    overflow: hidden;/* 右边hidden就可以了 */
    zoom:1;   /* 兼容IE6 */
}

Flex

.box{
display: flex;
}
.box .content{
flex: 1;
}

grid

.box{
    background-color: #333333;
    display: grid;
    grid-template-columns: auto 1fr;    /* auto是左侧的宽，side类中自己定义 */
    grid-gap: 10px;
}

三列布局

绝对定位

分别定位左和右，中间用margin给出左右的宽度。

.box .left{
    width: 100px;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #0000FF;
    height: 100%;
}
.box .right{
    width: 200px;
    position: absolute;
    top: 0;
    right: 0;
    background-color: #008000;
    height: 100%;
}
.box .content{
    margin: 0 200px 0 100px;
    /* height: 100%; */
    background-color: #D2691E;
}

圣杯布局

全部浮动，左右加上position:relative

.box{
    /* 为左右留出空间 */
    padding-left: 110px;
    padding-right: 210px;
}
.left{
    float: left;
    background-color: #0000FF;
    width: 100px;
    height: 400px;
    margin-left: -100%;/* 移到上一行 */
    position: relative;
    left: -110px;   /* 移到左边 */
}
.content{
    float: left;
    width: 100%;
    height: 500px;
    background-color: #333333;
}
.right{
    float: left;
    width: 200px;
    height: 400px;
    background-color: #008000;
    margin-left: -200px; /* 移到上一行 */
    position: relative;
    right: -210px;  /* 移到右边 */
}

    
    

        
content
        
content
        
content
    
    

    

双飞翼布局

.left{
    float: left;
    background-color: #0000FF;
    width: 100px;
    height: 400px;
    margin-left: -100%;
}
.content{
    float: left;
    width: 100%;
    height: 500px;
    background-color: #333333;
}
.content .inner{
    margin: 0 210px 0 110px;
}
.right{
    float: left;
    width: 200px;
    height: 400px;
    background-color: #008000;
    margin-left: -200px;
}

浮动布局

Left
Right
Main

.left{
    width: 100px;
    height: 500px;
    float: left;
    background-color: #0000FF;
}
.right{
    width: 200px;
    height: 500px;
    float: right;
    background-color: #008000;
}

等高布局

待补充

粘连布局

待补充