前端布局方式

「这是我参与11月更文挑战的第23天，活动详情查看：2021最后一次更文挑战」。

前端几种布局方式

1. 圣杯布局

   圣杯布局是一种三列布局，两边定宽，中间宽度自适应
   

   代码：

       <div class="header"></div>
       <div class="container">
         <div class="middle">middleggggggggggggggggggggggggggggggggggggggggggggggggggg</div> //middle先渲染，所以他在最前面
         <div class="left">left</div>
         <div class="right">right</div>
       </div>
       <div class="footer"></div>
   

   添加样式：

   • 先给父盒子container设置一个高度{height: 200px;}，给子盒子设置宽高并浮动

     .middle {  float: left; width: 100%;  height: 200px;  background-color: palegoldenrod; }
     .left { float: left; width: 200px;height: 100%; background-color: palegreen;}
     .right { float: left; width: 200px; height: 100%; background-color: pink;  }
     

   运行可以看到，left盒子和right盒子被挤了下来，另开了一行，这时候就要用到负外边距了。

   • 分别给left盒子添加{margin-left: -100%},给right盒子添加{margin-left：-200px}; -200px的值为盒子的宽度
   • 这时候你就可以看到，三个盒子在一排了，且中间的盒子是自适应的

   这就完了吗？不不不，还有一个bug

   当中间的内容很多时，你可以发现，两边的盒子挡住了middle的内容显示，这不是我们想要的。那该怎么办呢？

   • 先给父盒子container设置一个左右的内边距{padding: 0 200px;}

   • 再给左右盒子添加相对定位

     .left {position: relative;left: -200px;}
     .right {position: relative;right: -200px;}
     

   这样就大功告成了！

2. 双飞翼布局

   和圣杯布局差不多，只是将middle中的内容用box包含起来，给box设置{padding：0 200px;}样式，container的padding不需要加了，左盒子和右盒子也需要相对定位就可以了

3. 栅格布局

   栅格(grid)是一种自适应布局，能根据不同终端自动伸缩容器的宽高。flex根据轴线(axis)布局，看起来像是一维布局；而grid针对网格线(grid line)布局，看起来更像是二维布局。

4. Flex布局、弹性布局

   Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

   设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

5. 绝对定位布局

   可以通过上下左右四个方位完成自身布局的布局方式