html圣杯布局

小总结
一个大盒子包了上中下三个盒 给三个盒子设置宽高 中间盒子包裹中左右三个盒子给三个盒子一个相同高度 左右两边一个固定的宽度、中间自适应宽度同时给三个盒子都左浮，这时候左右两个盒子会被中间盒子挤掉，需要用负的margin-left的100%来拽左盒子（这个100%是父级的宽度）负的margin-left右盒子的自身宽度 进入文档流 ，再用相对定位再设置不同方向的的负边距

/* 头部 */
<div class="header">
</div>
/* box 包裹着三个需要浮动的小盒子 （center left right） */
<div class="box">
/* center 要写在其他两个盒子之前 *需要自适应宽度 */
<div class="center">
</div>
<div class="left">
</div>
<div class="right">
</div>
</div>
/* 尾部 */
<div class="footer">
</div>

/* min-width  设置浏览器最小宽度 center+left+right三个盒子宽度相加 */
body{
    min-width: 300px;
}
/* 头部代码*/
.header{
    width: 100%;
    height: 100px;
    background: rgb(68, 209, 12);
}
/* 尾部代码 */
.footer{
    width: 100%;
    height: 100px;
    background: rgb(68, 209, 12);
    /* 清除浮动 */
    clear: both;
}
/* 宽自适应 */
.center{
    width: 100%;
    height: 100px;
    background: rgb(243, 13, 13);
}
.left{
    width: 100px;
    height: 100px;
    background: rgb(10, 59, 219);
    /* 使用margin将left盒子拽回文档流 */
    margin-left: -100%;
    /* 使用相对定位将left放回box最左边 */
    position: relative;
    left: -100px;
}
.right{
    width: 100px;
    height: 100px;
    background: rgb(238, 32, 204);
    /* 使用margin将right盒子拽回文档流 */
    margin-left: -100px;
    /* 使用相对定位将right放回box最右边 */
    position: relative;
    left: 100px;
}
.box{
    height: 100px;
    /* 把box盒子内容向内挤 left、fight多宽 使用padding向内各挤多宽 */
    padding-right: 100px;
    padding-left: 100px;
    background: rgb(243, 161, 8);
}

小总结 一个大盒子包了上中下三个盒 给三个盒子设置宽高 中间盒子包裹中左右三个盒子给三个盒子一个相同高度 左右两边一个固定的宽度、中间自适应宽度同时给三个盒子都左浮，这时候左右两个盒子会被中间盒子挤掉，需要用负的margin-left的100%来拽左盒子（这个100%是父级的宽度）负的margin-left右盒子的自身宽度 进入文档流 ，再用相对定位再设置不同方向的的负边距