一. 三栏布局是什么？

主要内容优先加载：
- 确保页面结构和内容的顺序是正确的，主要内容应该首先加载，这有助于提升用户体验和SEO。
左右固定，中间自适应：
- 使用CSS实现固定左右栏和自适应中间栏的布局。可以通过Flexbox或者Grid布局来实现这种结构。
响应式设计：
- 使用媒体查询（Media Queries）确保布局在不同设备上都能良好地呈现。例如，在小屏幕设备上，可以将左右栏堆叠在主要内容之上或之下，以确保内容的可读性和用户友好性。
语义化HTML：
- 使用语义化的HTML标签（如<header>, <nav>, <aside>, <main>, <footer>等）有助于提高页面的可访问性和SEO。
样式和结构分离：
- 使用外部样式表（External Stylesheets）或内部样式表（Internal Stylesheets），避免在HTML中直接添加样式，以提高代码的可维护性和灵活性。
栏目内容的合理安排：
- 左栏通常用于导航链接、相关信息等；右栏可以放置广告、相关链接等；中栏放置主要内容。确保每个栏目的内容具有逻辑性和连贯性。
考虑用户体验和可访问性：
- 确保布局不仅在视觉上吸引人，而且在键盘和屏幕阅读器上也能正确导航和理解。
性能优化：
- 减少不必要的CSS和JavaScript文件，确保页面加载速度快，尽量避免过多的DOM元素和层级。
跨浏览器兼容性：
- 测试布局在各种主流浏览器（如Chrome、Firefox、Safari、Edge等）的表现，确保在不同浏览器下保持一致的外观和功能。

二. 三栏布局的三种实现?

弹性布局:
- 弹性布局（Flexible Box Layout，简称Flexbox）是一种用于设计网页布局的CSS模块，旨在提供更加灵活的方式来排列、对齐和分布容器中的元素，特别是当容器的大小和内容的大小不确定或者动态改变时。Flexbox引入了一套新的布局模型，与传统的基于块级和内联块级元素的布局方式有所不同。
- 具体实现：

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹性布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .page {
            padding: 0 200px;
        }
        .left,
        .right {
            height: 200px;
            width: 200px;
            background: rgb(100, 40, 160);
        }

        .content {
            height: 200px;
            background: rgb(221, 236, 7);
        }
        .page{
            display: flex;
        }
        .content{
            flex: 1;
            order: 1;
        }
        .right{
            order: 2;
        }
    </style>
</head>

<body>
    <div class="page">
        <div class="content">主要内容</div>
        <div class="left">广告内容</div>
        <div class="right">广告内容</div>
    </div>
</body>

</html>

圣杯布局:
- 圣杯布局（Holy Grail Layout）是一种经典的三栏布局，通常包括一个固定宽度的中间列和两个等宽的侧边栏。这种布局适合于需要在页面上显示主内容、左侧栏（如导航）和右侧栏（如广告或其他相关内容）的情况。
- 具体实现：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圣杯布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .page {
            padding: 0 200px;
            /* height: 200px; */
            /* font-size: 0; */
        }

        .left,
        .right {
            height: 200px;
            width: 200px;
            background: rgb(194, 179, 231);
        }

        .content {
            height: 200px;
           /*  width: calc(100% - 400px); */
            background: rgb(152, 57, 73);
            width: 100%;

        }

        /* .page div {
             display: inline-block; 
            font-size: 20px;
        } */
        .page div{
            float: left;
        }
        .left{
            margin-left: -200px;
            position: relative;
            left: -100%;
        }
        .right{
            margin-left: -200px;
            position: relative;
            left: 200px;
        }
    </style>
</head>

<body>
    <div class="page">
        <div class="content">主要内容</div>
        <div class="left">广告位</div>
        <!-- <div class="content">主要内容</div> -->
        <div class="right">广告位</div>
    </div>
</body>

</html>

双飞翼布局:
- 双飞翼布局（Double Wings Layout）是在圣杯布局的基础上进行优化，旨在解决圣杯布局中的一个问题：当左右栏内容较少时，中间主体内容区域过于挤压的情况。它通过使用CSS的负边距技术来实现更灵活的布局，同时保持语义化和结构清晰。
- 具体实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>双飞翼</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .page{
            height: 200px;
        }
        .right,.left{
            width: 200px;
            height: 200px;
            background: #27af72;
        }
        .content{
            height: 200px;
            background: #31c0dc;
            width: 100%;
        }
        .inner{
            margin: 0 200px;
            height: 100%
        }
        .page>div{
            float: left;
        }
        .left{
            margin-left: -100%;
        }
        .right{
            margin-left: -200px;
        }
    </style>
</head>
<body>
    <div class="page">
        <div class="content">
            <div class="inner">主要内容</div>
        </div>
        <div class="left">广告位</div>
        <div class="right">广告位</div>
    </div>
</body>
</html>

每天一学:三栏布局

一. 三栏布局是什么？

二. 三栏布局的三种实现?