CSS 常用布局

2021-09-14 10:32:44

总结文章：https://mp.weixin.qq.com/s/S008EYuPxLqKFBnss5mZyw

两栏布局（边栏定宽主栏自适应）

方法一：float + overflow（BFC 原理）

方法二：float + margin

方法三：flex

方法四：grid

三栏布局（两侧栏定宽主栏自适应）

方法一：圣杯布局

方法二：双飞翼布局

方法三：float + overflow（BFC 原理）

方法四：flex

方法五：grid

三行布局（头尾定高主栏自适应）

<div class="layout">
    <header></header>
    <main>
        <div class="inner"></div>
    </main>
    <footer></footer>
</div>

html,
body,
.layout {
    height: 100%;
}
body {
    margin: 0;
}
header, 
footer {
    height: 50px;
}
main {
    overflow-y: auto;
}

方法一：calc

方法二：absolute

方法三：flex

方法四：grid

注：日常整理，仅做参考，欢迎评论，虚心接受。

CSS 常用布局