这篇文章主要介绍CSS中的一些经典布局,其中包括垂直居中布局、两列布局、三列布局、圣杯布局和双飞翼布局、Sticky footer布局。
垂直居中布局
垂直居中布局: 元素在容器的中间显示。
// 公用的CSS和HTML
/* CSS */
.wrap {
width: 300px;
height: 300px;
border: 1px solid lightblue;
}
.item {
width: 100px;
height: 100px;
background-color: yellowgreen;
}
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;
}
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;
}
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;
}
header
三、双飞翼布局
双飞翼布局: 和圣杯布局相比，它在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;
}
header
参考来源: 圣杯布局和双飞翼布局的理解与思考
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;
}
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;
}
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;
}
5) 利用calc()属性
/* CSS */
.main {
min-height: calc(100% - 40px);
}
.footer {
height: 40px;
}
6) 利用table属性使得页面以表格的形态呈现
/* CSS */
.wrapper {
display: table;
width: 100%;
min-height: 100%;
}
.main {
display: table-row;
height: 100%;
}
7) 使用Grid网格布局
/* CSS */
.wrapper {
display: grid;
min-height: 100%;
grid-template-rows: 1fr auto;
}
.footer {
grid-row-start: 2;
grid-row-end: 3;
}
参考链接: 各种CSS实现Sticky Footer
这篇文章就是CSS系列的最后一篇了。以上内容如有不对,希望大家指出,谢谢。