这篇文章主要介绍CSS中的一些经典布局,其中包括垂直居中布局、两列布局、三列布局、圣杯布局和双飞翼布局、Sticky footer布局。垂直居中布局垂直居中布局: 元素在容器的中间显示。 // 公用的CSS和HTML /* CSS */ .wrap { width: 300px; height: 300px; border: 1px solid lightblue; } .item { width: 100px; height: 100px; background-color: yellowgreen; } <!-- HTML --> <div class="wrap"> <div class="item"></div> </div>1) 使用flex .wrap { display: flex; justify-content: center; align-items: center; }2) 使用定位和margin .wrap { position: relative; } .item { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; }3) 利用定位和移动子元素的位置实现 .wrap { position: relative; } .item { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* 另一种 */ .item { position: absolute; top: 100px; left: 100px; } /* 另一种 */ .item { position: absolute; top: 50%; left: 50%; margin-top: -50px; margin-left: -50px; }4) 利用display和vertical-align进行垂直居中 .wrap { display: table-cell; vertical-align: middle; } .item { margin: 0 auto; }5) 利用padding来使其居中 .wrap { padding: 99px; box-sizing: border-box; }两列布局两列布局: 左侧固定，右侧自适应。 /* CSS */ body { margin: 0; } .left { width: 100px; height: 500px; background-color: lightskyblue; } .right { height: 600px; background-color: yellowgreen; } <!-- HTML 外面一层wrap只是为了一些方法使用，没有设置wrap样式的就说明不需要这一层--> <div class="wrap"> <div class="left"></div> <div class="right"></div> </div>1) 利用浮动和margin .left { float: left; } .right { margin-left: 100px; }2) 利用浮动和BFC .left { float: left; } .right { /* overflow: scroll; */ /* overflow: auto; */ overflow: hidden; }3) 利用浮动和calc .left { float: left; } .right { float: left; width: calc(100% - 100px); }4) 利用定位 .wrap { position: relative; } .left { position: absolute; top: 0; } .right { margin-left: 100px; }5) 利用弹性盒 .wrap { display: flex; } .right { flex: 1; }6) 利用网格 .wrap { display: grid; grid-template-columns: 100px auto; }三列布局三列布局: 左右元素宽度固定，中间自适应。 /* CSS */ .left, .right { width: 100px; height: 500px; background-color: lightskyblue; } .center { height: 600px; background-color: yellowgreen; } <!-- HTML --> <div class="wrap"> <div class="left"></div> <div class="right"></div> <div class="center"></div> </div>1) 利用浮动和margin .left { float: left; } .right { float: right; } .center { margin: 0 100px; }2) 利用定位和margin .wrap { position: relative; } .left { position: absolute; } .right { position: absolute; right: 0; } .center { margin: 0 100px; }3) 利用弹性盒 .wrap { display: flex; } .right { order: 1; } .center { flex: 1; }4) 利用网格 .wrap { display: grid; grid-template-columns: 100px auto 100px; grid-template-areas: 'a b c'; } .right { grid-area: c; }5) 圣杯布局和双飞翼布局圣杯布局和双飞翼布局一、特点圣杯布局和双飞翼布局: 都是为了实现两侧宽度固定，中间部分宽度自适应。中间部分在DOM结构上优先，以便于先行渲染。二、圣杯布局圣杯布局: 利用margin和定位来实现布局，需要设置页面的最小宽度，不然当页面宽度过小时，页面布局就会乱。这个宽度为 左元素宽度 * 2 + 右元素宽度。因为左元素使用了 position:relative，所以中间区域一直存在一个左元素的宽度。 /* CSS */ body { margin: 0; min-width: 600px; /*这里为 left * 2 + right*/ } .fl { float: left; } .clearfix { zoom: 1; } .clearfix::after { display: block; height: 0; content: ""; visibility: hidden; clear: both; } .header, .footer { line-height: 40px; background-color: lightgray; text-align: center; } .container { padding: 0 200px; } .center { width: 100%; height: 500px; background-color: yellowgreen; } .left { position: relative; left: -200px; width: 200px; height: 300px; background-color: lightblue; margin-left: -100%; } .right { margin-right: -100%; width: 200px; height: 300px; background-color: lightcoral; } <!-- HTML布局 --> <div class="header">header</div> <div class="container clearfix"> <div class="center fl"></div> <div class="left fl"></div> <div class="right fl"></div> </div> <div class="footer">footer</div>三、双飞翼布局双飞翼布局: 和圣杯布局相比，它在center外加了一层，主要利用margin和float来实现，也需要设置页面最小宽度，以避免页面错乱。 /* CSS */ body { margin: 0; min-width: 400px; } .fl { float: left; } .clearfix { zoom: 1; } .clearfix::after { display: block; height: 0; content: ""; visibility: hidden; clear: both; } .header, .footer { line-height: 40px; background-color: lightgray; text-align: center; } .left { margin-left: -100%; width: 200px; height: 500px; background-color: lightblue; } .container { width: 100%; } .center { margin: 0 200px; height: 500px; background-color: lightcoral; } .right { margin-left: -200px; width: 200px; height: 500px; background-color: yellowgreen; } <!-- HTML --> <div class="header">header</div> <div class="clearfix"> <div class="container fl"> <div class="center"></div> </div> <div class="left fl"></div> <div class="right fl"></div> </div> <div class="footer">footer</div>参考来源: 圣杯布局和双飞翼布局的理解与思考Sticky footer布局Sticky footer: 如果页面内容不够长的时候，页脚块粘贴在视窗底部；如果内容足够长时，页脚块会被内容向下推送。 /* 公共样式 */ * { margin: 0; padding: 0; } .footer { text-align: center; } .main { background-color: #ddd; } .footer { background-color: lightblue; }1) 利用flex /* CSS */ body { display: flex; flex-direction: column; min-height: 100vh; } .main { flex: 1; } .footer { font-size: 1rem; } <!-- HTML --> <div class="main"></div> <div class="footer">有意思公司©2019-2030</div>2) 利用负margin-bottom + 占位div(高度和负margin-bottom一样) + 固定高度的footer(和margin-bottom一样) /* CSS */ html, body { height: 100%; } .main { min-height: 100%; margin-bottom: -40px; } .footer { height: 40px; } .placeholder { height: 40px; } <!-- HTML --> <div class="main"> <div class="placeholder"></div> </div> <div class="footer">有意思公司©2019-2030</div>3) 利用占位div(高度和footer一样) + 固定高度的footer(margin-top的值为负height) /* */ .main { min-height: 100%; } .placeholder { padding-bottom: 40px; } .footer { margin-top: -40px; height: 40px; }4) 最外层relative + padding-bottom预留底部空间 + 底部absolute来定位在底部 /* CSS */ .wrap { position: relative; min-height: 100%; padding-bottom: 40px; box-sizing: border-box; } .main { min-height: 100%; } .footer { position: absolute; left: 0; right: 0; bottom: 0; height: 40px; } <!-- HTML --> <div class="wrap"> <div class="main"></div> <div class="footer">有意思公司©2019-2030</div> </div>5) 利用calc()属性 /* CSS */ .main { min-height: calc(100% - 40px); } .footer { height: 40px; } <!-- HTML --> <div class="main"></div> <div class="footer">有意思公司©2019-2030</div>6) 利用table属性使得页面以表格的形态呈现 /* CSS */ .wrapper { display: table; width: 100%; min-height: 100%; } .main { display: table-row; height: 100%; } <!-- HTML --> <div class="wrapper"> <div class="main"></div> <div class="footer">有意思公司©2019-2030</div> </div>7) 使用Grid网格布局 /* CSS */ .wrapper { display: grid; min-height: 100%; grid-template-rows: 1fr auto; } .footer { grid-row-start: 2; grid-row-end: 3; } <!-- HTML --> <div class="wrapper"> <div class="main"></div> <div class="footer">有意思公司©2019-2030</div> </div>参考链接: 各种CSS实现Sticky Footer这篇文章就是CSS系列的最后一篇了。以上内容如有不对,希望大家指出,谢谢。
