主流布局–双飞翼布局

什么是双飞翼布局？
双飞翼布局最早是淘宝团队提出的，是针对圣杯局部优化的解决方案。主要是优化了圣杯布局中开启定位的问题。
HTML

<div class="parent"><div class="center"><div class="inner"></div></div><div class="left"></div><div class="right"></div>
</div>

CSS

   .parent{height: 300px;}.left,.right,.center{height: 300px;float: left;}.left,.right{width: 300px;}.left{background-color: brown;margin-left: -100%;}.center{width: 100%;background-color: darkgoldenrod;}.right{background-color:purple;margin-left: -300px;}.inner{height: 300px;background-color: skyblue;margin-left: 300px;margin-right: 300px;}

在这里插入图片描述
圣杯布局相比于双飞翼布局，只是在center元素里面添加了一个inner子级元素，解决了，center元素被left和right元素覆盖的内容。
因此，给inner元素添加一个margin-left和margin-right就可以将内容显示在中间，而不会被左右元素覆盖部分内容。

等分布局

什么是等分布局？
等分布局就是指一行被分为若干列，每一列宽度是相同的值。
1、使用float属性来实现等分布局的效果
2、display属性的值有关table实现等分布局效果

第一种解决方案

在这里插入图片描述
HTML

<div class="parent"><div class="column1"></div><div class="column2"></div><div class="column3"></div><div class="column4"></div>
</div>

CSS

 .column1,.column2,.column3,.column4{width: 25%;height: 300px;float: left;}.column1{background-color: blue;}.column2{background-color: yellow;}.column3{background-color: yellowgreen;}.column4{background-color: lightsalmon;}

在这里插入图片描述

第二种解决方案

CSS

  .parent{width: 100%;display: table;}.column1,.column2,.column3,.column4{height: 300px;display: table-cell;}.column1{background-color: blue;}.column2{background-color: yellow;}.column3{background-color: yellowgreen;}.column4{background-color: lightsalmon;}

这里我们使用的是parent元素display属性设置为table，如果不设置高度，将默认由子级元素撑起来，那么高度为300px，此时的宽度没有设置，为0px。当设置父级元素宽度为100%的时候就可以正常显示了。在这里插入图片描述

等分布局存在间距的情况

在这里插入图片描述

HTML代码变化

空白间距的实现用margin或者padding
HTML

<div class="parent-fix"><div class="parent"><div class="column1"></div><div class="column2"></div><div class="column3"></div><div class="column4"></div></div>
</div>

CSS

  .column1,.column2,.column3,.column4{width: 25%;height: 300px;float: left;padding-left: 10px;}.column1{background-color: blue;}.column2{background-color: yellow;}.column3{background-color: yellowgreen;}.column4{background-color: lightsalmon;}

如果这时候加padding的话，由于宽度为100%加上10px就会导致元素换行。在这里插入图片描述
此时我们需要用到一个属性，box-sizing 最主要的用法是规定容器元素的最终尺寸计算方式。 也就是说，每一行的宽度不变还是25%,但是padding-left被定义到里面去了
CSS

 .parent-fix{margin-left: -10px;}.column1,.column2,.column3,.column4{width: 25%;height: 300px;float: left;box-sizing: border-box;padding-left: 10px;}.inner{height: 300px;}.column1 .inner{background-color: blue;}.column2 .inner{background-color: yellow;}.column3 .inner{background-color: yellowgreen;}.column4 .inner{background-color: lightsalmon;}

HTML

<div class="parent-fix"><div class="parent"><div class="column1"><div class="inner"></div></div><div class="column2"><div class="inner"></div></div><div class="column3"><div class="inner"></div></div><div class="column4"><div class="inner"></div></div></div>
</div>

在这里插入图片描述

等分布局的第二种解决方案修改

CSS

 .parent-fix{overflow: hidden;}.parent{width: 1529px;display: table;margin-left: -10px;}.column1,.column2,.column3,.column4{display: table-cell;box-sizing: border-box;padding-left: 10px;}.inner{height: 300px;}.column1 .inner{background-color: blue;}.column2 .inner{background-color: yellow;}.column3 .inner{background-color: yellowgreen;}.column4 .inner{background-color: lightsalmon;}

在添加边框的时候可能会出现两边会多出10px,以上代码是通过设置空白间距后进行调试处理的。（可能只有自己看的懂，视频老师是这样讲解的，实际过程中还是需要自己去分析调试）
在这里插入图片描述

等高布局

什么是等高布局？
等高布局就是一行被划分成为若干的列，每一列的高度值都是相等的。

等高布局的实现方式

dispaly属性的有关table实现等高布局效果
padding+margin属性实现等高布局的效果

第一种解决方案

在这里插入图片描述
HTML

<div class="parent"><div class="left">dd</div><div class="right">vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv</div>
</div>

CSS

 .parent{height: 100%;display: table;}.left,.right{width: 300px;display: table-cell;}.left{background-color: yellowgreen ;}.right{background-color: lightsalmon;}