「这是我参与11月更文挑战的第六天，活动详情查看：2021最后一次更文挑战」。

前言

最近，被UI折磨一番之后，觉得自己修改样式的时候，发现很多重复的代码，尤其是在布局方面，重复的代码尤为的多，故决定，在此多复习一些布局，特此记录。

布局

全屏布局

全屏布局可以说是一种很经典的布局了，在各大UI框架中都可以看到他的身影。
由顶部、主体内容和底部三部分构成，左右两边满屏拉伸，顶部和底部固定高度，主体内容采用自适应的形式。使用 <header>、<content>和<footer>标签排版，还可以根据自己的需要与否添加侧边栏。
接下来我们来让我们一起来实现它。

<div class="layout"> 
    <header></header> 
    <centent></centent> 
    <footer></footer> 
</div>

实现

记住全屏的布局的特点，可以通过left: 0 和 right: 0来实现内容拉满的效果，顶部和底部可以通过 top: 0 和 bottom: 0来分别实现，并按照自己的需要，设置相应的顶部和底部高度；然后在通过top和bottom来设置主体内容的高度。

.layout { 
    position: relative; 
    width: 1920px; 
    height: 1080px; 
    header, footer, content { 
        position: absolute; 
        left: 0; 
        right: 0; 
    } 
    header { 
        top: 0; 
        height: 150px; 
        background-color: crimson; 
    } 
    footer { 
        bottom: 0; 
        height: 150px; 
        background-color: blue; 
    } 
    content { 
        top: 150px; 
        bottom: 150px; 
        background-color: gray; 
    } 
}

当然，这时肯定有小聪明想到了display：flex，没错，使用它也是完全可以的，并能使代码变得更简洁。首先要是用flex-direction：column来改变子节点的排列方式为纵向；并设置顶部和底部的高度，并给主体内容设置为flex：1来使其自适应。


.layout { 
    display: flex; 
    flex-direction: column; 
    width: 1920px; 
    height: 1080px; 
    header { 
        height: 150px; 
        background-color: crimson; 
    } 
    footer { 
        height: 50px; 
        background-color: blue; 
    } 
    content { 
        flex: 1; 
        background-color: gray; 
    } 
}

好，今天就到这里了，今天努力的你依然是最棒的。加油，加油，你最棒！加油，加油，你最强！哦豁，Bye Bye！！！

css布局之全屏布局

前言

布局

全屏布局

实现