css笔记(七)多列布局的自适应

多列布局

一列自适应

自适应：盒子的宽度随着父盒子的宽度进行变化

二列自适应

原理： 左列固定宽度，右列自适应（100%），想办法将左列放到右列身上

三列自适应

原理：左列，右列固定宽度，中间列自适应(100%),想办法将左列放到中间列左侧，右列放到中间列右侧

方法1： 左列左定位left:0 右列右侧定位right:0;（布局不稳定）

方法2： (浮动+负外边距+相对定位)（布局稳定）

圣杯布局 ：利用最外侧大盒子的内边距将内容居中

1. 三列浮动并排，保证中间列在HTML结构的最上面

    <div class="max clearfix">
   
           <!-- 1.中间列100% -->
           <div class="center">asfesfew</div>
           <div class="left">left</div>
           <div class="right">right</div>
   
       </div>
   

2. 左列负外边距margin-left:-100%,右列负外边距margin-left:-自身宽度—》放上去了，但是内容被盖住了

3. 给外侧最大盒子设置左右两侧内边距，值为左列右列的宽度

4. 左列就利用相对定位向左以自身宽度left:-自身的宽度,右列就利用相对定位向右移自身宽度right:-自身的宽度,

双飞翼布局：利用最内容盒子的外边距将内容居中

1.三列浮动并排，保证中间列在HTML结构的最上面

 <div