什么是rem，圣杯，双飞翼布局，对它们的理解？详细介绍

REM布局，圣杯布局，双飞翼布局这三种布局都是基于CSS的经典布局，旨在实现三列等高布局，并且要保证左右两列固定宽度，中间列宽度自适应。

REM布局

REM布局是一种基于根元素字体大小的布局方式，通过设置根元素的字体大小来控制页面元素的大小。通常会将根元素字体大小设置为页面宽度的1/10，这样可以在不同设备上保持相同的尺寸比例。

    <style>
        html {
            font-size: 62.5%; /* 1rem = 10px */
        }
        body {
            font-size: 1.6rem; /* 16px */
        }
        .wrapper {
            width: 100%;
            max-width: 960px;
            margin: 0 auto;
        }
        .column {
            width: 33.33%;
            box-sizing: border-box;
            padding: 0 1rem;
            float: left;
            height: 200px;
            background-color: #f0f0f0;
        }
    </style>
    
    <div class="wrapper">
        <div class="column">左侧列</div>
        <div class="column">中间列</div>
        <div class="column">右侧列</div>
    </div>

原理介绍（面试问你可以这么说，简单明了）：

REM布局是根据根元素如：html 字体大小进行计算的，原理就是通过根元素 上设置一个字体大小例如16px，然后使用rem来表示其他元素的尺寸和间距， 这些尺寸的间距都是根据根元素的字体大小的倍数来决定的。REM的好处就是 可以方便的实现响应式布局。

圣杯布局

圣杯布局是一种通过负边距和相对定位实现的三列等高布局。中间列使用margin-left和margin-right负值来使其向左右两侧扩展，左右两侧的列使用相对定位来占据中间列的空间。圣杯布局的优点是可以在不改变HTML结构的情况下实现等高布局。

<style>
        .wrapper {
            width: 100%;
            max-width: 960px;
            margin: 0 auto;
        }
        .column {
            float: left;
            height: 200px;
            position: relative;
        }
        .center {
            width: 100%;
            height: 200px;
            background-color: #f0f0f0;
        }
        .left {
            width: 200px;
            margin-left: -100%;
            left: -200px;
            background-color: #e0e0e0;
        }
        .right {
            width: 200px;
            margin-left: -200px;
            right: -200px;
            background-color: #d0d0d0;
        }
    </style>
    
     <div class="wrapper">
        <div class="column center">中间列</div>
        <div class="column left">左侧列</div>
        <div class="column right">右侧列</div>
    </div>

原理介绍（面试问你可以这么说，简单明了）：

圣杯布局是一种三栏布局方式，用一个大的盒子里面包三个盒子分别是左中右，其中左右两列固定宽度，并且设置外边距margin的负值，然后利用相对定位将中间列移动到正确位置。

双飞翼布局

双飞翼布局也是一种通过负边距和相对定位实现的三列等高布局。与圣杯布局不同的是，双飞翼布局使用了一个嵌套的div来包含中间列，使其能够自适应宽度。左右两侧的列同样使用相对定位来占据中间列的空间。双飞翼布局的优点是可以更好地适应响应式设计，并且可以减少不必要的HTML代码。

  .container {
            width: 60rem;
            /* 600px */
            margin: 0 auto;
        }

        .column {
            float: left;
        }

        .column-left {
            width: 20rem;
            /* 200px */
            margin-left: -100%;
            background-color: #f7c8c8;
        }

        .column-right {
            width: 20rem;
            /* 200px */
            margin-left: -20rem;
            /* -200px */
            background-color: #c8f7c8;
        }

        .column-center {
            width: 100%;
        }

        .column-center-inner {
            margin: 0 20rem;
            /* 200px */
            background-color: #c8c8f7;
        }
        
        <div class="container">
            <div class="column column-center">
                <div class="column-center-inner">中间列</div>
            </div>
            <div class="column column-left">左侧列</div>
            <div class="column column-right">右侧列</div>
    </div>

原理介绍（面试问你可以这么说，简单明了）：

双飞翼布局也是一种三栏布局方式，其中左右两列固定宽度，中间列自适应宽度。利用浮动元素的特性，将左右两个元素移动到页面左右边缘之外，然后利用相对定位将中间列移动到正确位置，同时为左右元素设置容器元素，使左右元素不会遮挡中间元素，这种布局优点就是代码简洁，方便维护和理解。