css实现等高布局

等高布局是指在同一个父容器里，子元素的高度相等的布局方式，等高布局的实现有伪等高和真等高，伪等高只是在视觉上给人感觉是等高而已，真等高是实实在在的等高。

伪等高的方式

其原理是：将元素padding-bottom设置一个很大的值与margin-bottom设置一个负很大的值，两者之间互相抵消

HTML部分

<div class="outer">
        <div class="left">
            left <br>
            left <br>
            left <br>
            left <br>
            left <br>
            left <br>
            left <br>
        </div>
        <div class="right">
            right <br>
        </div>
        <div class="center">
            center <br>
            center <br>
            center <br>
        </div>
    </div>

CSS部分

.outer{
      /*父级元素得设置超出隐藏*/
       overflow: hidden;
}
.left{
      width: 100px;
       background-color: red;
       float: left;
       /*关键代码，两者之间的值互相抵消*/
        padding-bottom: 10000px;
        margin-bottom: -10000px;
}
.right{
      width: 100px;
       background-color: pink;
       float: right;
       /*关键代码，两者之间的值互相抵消*/
       padding-bottom: 10000px;
       margin-bottom: -10000px;
}
.center{
       background-color: #009ff2;
       margin: 0 100px;
       /*关键代码，两者之间的值互相抵消*/
       padding-bottom: 10000px;
       margin-bottom: -10000px;
}

Flex布局的方式

绝对定位的方式

后记

今天没有认真的学习，后期再补充后面两个内容