网站页面布局（css）

上篇系统介绍了flex的语法及基本知识，如果您还不熟悉flex知识，点击这里先看看《 前端入门——弹性布局（Flex）》。本篇将结合flex基本知识去实现常见的网页布局效果，常见的经典网页布局有：上下结构，头部高度固定，下部区域高度自适应。上下结构html：<main> <header>header</header> <section>content</section></main>css：main{ width:100%; height:100vh; display:flex; flex-direction: column;}main > header{ height: 100px; background: #cdf0fd;}main > section{ flex-grow:1;}左右结构，左边宽度固定，右边区域宽度自适应。左右结构html：<main> <nav>left nav</nav> <section>content</section></main>css：main{ width:100%; height:100vh; display:flex;}main > nav{ width:150px; background: #cdf0fd;}main > section{ flex-grow:1;}上中下结构，头部和底部高度固定，中间区域高度自适应。上中下结构html：<main><header>header</header><section>content</section><footer>footer</footer></main>css：main{ width:100%; height:100vh; display:flex; flex-direction: column;}main > header,main > footer{ height: 100px; background: #cdf0fd; }main > section{ flex-grow:1;}左中右结构，左边和右边宽度固定，中间区域宽度自适应。左中右结构html：<main><nav>left nav</nav><section>content</section><aside>right aside</aside></main>css：main{ width:100%; height:100vh; display:flex;}main > nav,main > aside{ width:150px; background: #cdf0fd; }main > section{ flex-grow:1;}圣杯布局，就是中间区域再嵌套其它结构。1、上中下结构里，中间区域嵌套左中右结构圣杯布局1html：<main> <header>header</header><section> <!–嵌套左中右结构–> <nav>left nav</nav> <section>content</section> <aside>right aside</aside></section><footer>footer</footer></main>css：main{ width:100%; height:100vh; display:flex; flex-direction: column;}main > header, main > footer{ height: 100px; background: #cdf0fd; }main > section{ flex-grow:1; display:flex;}/*嵌套的左中右结构*/main > section > nav,main > section > aside{ width:150px; background: #fdcdcd; }main > section > section{ width:100%; flex-grow:1;}2、左中右结构里，中间区域嵌套上中下结构圣杯布局2html：<main> <nav>left nav</nav> <section> <!–嵌套上中下结构–> <header>header</header> <section>content</section> <footer>footer</footer> </section><aside>right aside</aside></main>css： main{ width:100%; height:100vh; display:flex; }main > nav,main > aside{ width:150px; background: #cdf0fd; }main > section{ flex-grow:1; width:100%; display:flex; flex-direction: column;}/*嵌套的上中下结构*/main > section > header,main > section > footer{ height: 100px; background: #fdcdcd; }main > section > section{ flex-grow:1;}9宫格布局9宫格html：<main> <section>content 1 </section> <section>content 2 </section> <section>content 3 </section> <section>content 4 </section> <section>content 5 </section> <section>content 6 </section> <section>content 7 </section> <section>content 8 </section> <section>content 9 </section> </main>css： main{ width:100%; height:100vh; display:flex; flex-wrap: wrap; }main > section{ width: 30%; background:#55ff00; margin: 1.5%;}总结以上是常见的经典布局，在这些布局的基础上可以组合、拆分制作各种各样的布局，如果结合position:fixed定位还可以实现头部或侧边栏固定的布局效果。以上布局使用传统的float、position也可以实现，只是相对来说比较麻烦一些，已不建议使用，所以了解下就可以了。虽然flex可以满足大部分布局，但是flex并不擅长栅格布局，后面会介绍display:grid（网格布局），网格是一组相交的水平线和垂直线，它定义了网格的列和行。所以使用网格布局能够构建更加复杂的网页设计。感谢关注，希望能够给你有所帮助，欢迎提出错误，补充。上篇：前端入门——弹性布局（Flex）下篇：前端入门 —— 网格布局（Grid）源码链接: https://pan.baidu.com/s/1bdZM8ZcdU3FdSCp2u0sx8A?pwd=9ub2 提取码: 9ub2