经典三栏布局前端入口布局

html,body,.container{height:100%;宽度：100%；保证金：0；padding:0;}/*leftfloatleft*/.left{float:left;高度：100%；宽度：200px；background:#e056fd;}/*rightfloatright*/.right{float:right;高度：100%；宽度：200px；背景：#e056fd;}/*middle*/.main{height:100%;边距：0200px；background:#686de0;}1.float+margin（浮动布局）html,body,.container{height:100%;宽度：100%；保证金：0；padding:0;}/*leftfloatleft*/.left{float:left;高度：100%；宽度：200px；background:#e056fd;}/*rightfloatright*/.right{float:right;高度：100%；宽度：200px；背景：#e056fd;}/*middle*/.main{height:100%;边距：0200px；background:#686de0;}注意两点，在DOM中，main的内容要写在最后，写main的时候cssmargin的左右两边要相等。html,body,.容器{高度：100%；宽度：100%；保证金：0；padding:0;}.left,.right{position:absolute;高度：100%；顶部：0；背景：#e056fd;}.left{left:0;宽度：200px;}.right{right:0;width:200px;}/*middle*//*.main{height:100%;边距：0200px；background:#686de0;}*//*或者使用绝对定位*/.main{position:absolute;高度：100%；右：200px；左：200px；background:#686de0;}优点：简单缺点：文档流的未知高度会导致问题3、flex（弹框布局）html,body,.container{高度：100%；宽度：100%；保证金：0；padding:0;}.container{display:flex;}.left,.right{width:200px;背景：#e056fd;}.main{/*flex:1;*/弹性:100;background:#4834d4;}优点：移动方便缺点首选终端：支持ie10或4以上，网格（布局）html,body,.container{height:100%;宽度：100%；保证金：0；填充：0；溢出：隐藏；}.container{显示：网格；网格模板行：100%；/*设置行高*/grid-template-columns:200pxauto200px;/*设置列属性*/}.left,.right{background:#e056fd;}.main{background:#4834d4;}优点：简单，下一代CSS布局缺点：支持ie10及以上