布局：主要分框架布局 和 内容布局

示例1-1：框架/上下结构 （必须要在body之下）

<body>
    <header></header>
    <main></main>
</body>

示例1-2：框架/左右两列（必须要在body之下）

<body>
    <main>
        <left></left>
        <right></right>
    </main>
</body>

示例1-3：框架/上下结构 + 左中右三列（必须要在body之下）

<body>
    <header></header>
    <main>
        <left></left>
        <middle></middle>
        <right></right>
    </main>
</body>

示例2：内容/弹性布局 （flex + .col-x ；max(x)=12；x可以理解为是比例）*** 重要的内容布局，可以取代上面所有的内容布局

    <flex> //可替代：示例*-1,*-2
        <div class='col-6 mar10' ></div> //子标签是什么无所谓
        <div class='col-6 mar10' ></div>
    </flex>

    <flex>
        <left class='col-6 mar10' ></left> //子标签是什么无所谓 //所以可以语义化
        <right class='col-6 mar10' ></right>
    </flex>

    <flex> //可替代：示例*-3
        <main class='col-9 mar10' ></main>
        <aside class='col-3 mar10' ></aside> //子级内容会居中
    </flex>
col-6
col-6
col-9





--------------以下为旧样式，不再推荐使用--------------

示例*-1：内容/左右布局 （main 不在 body 之下，即为普通的内容布局）

    <main>
        <left></left>
        <right></right>
    </main>
left right

示例*-2：内容/左中右布局 （main 不在 body 之下，即为普通的内容布局）

    <main>
        <left></left>
        <middle></middle>
        <right></right>
    </main>
left left right

示例*-3：内容/主体 + 侧边布局

    <main>
        <article></article>
        <aside></aside>
    </main>
article
article