标签：总结 center color 布局 height width background 页面 left

 负边距与浮动布局

#div1{
    height: 200px;
    background-color: lightblue;
    float: left;
    width: 100%;
}
#div2{
    float: left;
    width: 200px;
    height: 100px;
    background-color: lawngreen;
    margin-left: -100%;
}

<div id="div1"></div>
<div id="div2"></div>

 双飞翼布局（圣杯布局/三列布局）

1、三列布局，中间宽度自适应，两边定宽；
2、中间栏要在浏览器中优先展示渲染；
3、允许任意列的高度最高；
4、要求只用一个额外的DIV标签；
5、要求用最简单的CSS、最少的HACK语句；

#header,#footer{
    height: 70px;
    background-color: orangered;
}
#main{
    overflow: hidden;
}
#left,#right,#center{
    float: left;
    height: 400px;
}
#center{
    width: 100%;
    background-color: yellowgreen;
}
#left{
    width: 30%;
    margin-left: -100%;
    background-color: lightblue;
}
#right{
    background-color: #157347;
    width: 30%;
    margin-left: -30%;

}
#center_inner{
    padding: 0 300px 0 200px;
}

<div id="contenter">
    <div id="header"></div>
    <div id="main">
        <div id="center">
            <div id="center_inner">center</div>
        </div>
        <div id="left"></div>
        <div id="right"></div>
    </div>
    <div id="footer"></div>
</div>

标签：总结,center,color,布局,height,width,background,页面,left
来源： https://www.cnblogs.com/zsbb/p/15988891.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。