CSS布局总结

目录

• 单列布局
  • 统一宽度
  • 主体窄
• 两列自适应
  • Float + overflow:hidden
  • Flex
  • grid
• 三列布局
  • 绝对定位
  • 圣杯布局
  • 双飞翼布局
  • 浮动布局
• 等高布局
• 粘连布局

单列布局

统一宽度

<div class="box">
    <header></header>
    <div class="content"></div>
    <footer></footer>
</div>

.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

左边固定，右边自适应：

<div class="box">
    <div class="side">
        <div class="menu"></div>
    </div>
    <div class="content"></div>
</div>

.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;  /* 移到右边 */
}

<div class="box">
    <!-- 先加载中间 -->
    <div class="content">
        <p>content</p>
        <p>content</p>
        <p>content</p>
    </div>
    <div class="left"></div>
    <div class="right"></div>
</div>

双飞翼布局

.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;
}

浮动布局

<div class="left">Left</div>
<div class="right">Right</div>
<div class="main">Main</div>

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

等高布局

待补充

粘连布局

待补充