文章目录

  • 多列布局
  • 一列自适应
  • 二列自适应
  • 三列自适应
  • 圣杯布局 ：利用最外侧大盒子的内边距将内容居中
  • 双飞翼布局：利用最内容盒子的外边距将内容居中
  • 写给看到最后的你


多列布局

一列自适应

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

二列自适应

原理： 左列固定宽度，右列自适应（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>
  1. 左列负外边距margin-left:-100%,右列负外边距margin-left:-自身宽度—》放上去了，但是内容被盖住了
  2. 给外侧最大盒子设置左右两侧内边距，值为左列右列的宽度
  3. 左列就利用相对定位向左以自身宽度left:-自身的宽度,右列就利用相对定位向右移自身宽度right:-自身的宽度,
双飞翼布局：利用最内容盒子的外边距将内容居中

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.给中间列套一个内容盒子 设置这个内容盒子的左右外边距为左列右列的宽度

.center-content {
            margin:0px 180px 0px 200px;
        }

 <div class="max clearfix">

        <!-- 1.中间列100% -->
        <div class="center">
            <!-- 内容盒子 -->

            <div class="center-content">
                asfesfew

            </div>
            

        </div>
        <div class="left">left</div>
        <div class="right">right</div>

    </div>

写给看到最后的你

朋友，感谢你看到了最后，新手报道，技术不成熟的地方请多多指点，感谢！


期待和你再次相遇 
愿你学的愉快