两栏布局、三栏布局、水平垂直居中
文章目录
- 1 两栏布局
-
- 1.1 浮动 + margin
- 1.2 浮动 + BFC
- 1.3 flex布局
- 1.4 左绝父相 + margin
- 1.5 右绝父相 + 方向定位
- 2 三栏布局
-
- 2.1 子绝父相 + margin
- 2.2 flex布局
- 2.3 浮动 + margin
- 2.4 圣杯布局
- 2.5 双飞翼布局
- 3 水平垂直居中
-
- 3.1 绝对定位 + translate
- 3.2 绝对定位 + margin
- 3.3 绝对定位 + margin
- 3.4 flex布局
1 两栏布局
一般两栏布局指的是左边一栏宽度固定，右边一栏宽度自适应。
1.1 浮动 + margin
利用浮动，将左边元素宽度设置为200px，并且设置向左浮动，将右边元素的margin-left设置为200px，宽度设置为auto，撑满整个父元素。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>两栏布局1title>
<style>
.left {
float: left;
width: 200px;
height: 100px;
background: tomato;
}
.right {
margin-left: 200px;
width: auto;
height: 100px;
background: gold;
}
style>
head>
<body>
<div class="outer">
<div class="left">div>
<div class="right">div>
div>
body>
html>
1.2 浮动 + BFC
利用浮动，左侧元素设置固定大小，并且设置向左浮动，右侧元素设置overflow: hidden; 这样右边就触发了BFC，BFC的区域不会与浮动元素发生重叠，所以两侧就不会发生重叠。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>两栏布局2title>
<style>
.left {
float: left;
width: 100px;
height: 200px;
background: tomato;
}
.right {
overflow: hidden;
height: 200px;
background: gold;
}
style>
head>
<body>
<div class="outer">
<div class="left">div>
<div class="right">div>
div>
body>
html>
1.3 flex布局
利用flex布局，将左边元素设置为固定宽度200px，将右边的元素设置为flex: 1;。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>两栏布局3title>
<style>
.outer {
display: flex;
height: 100px;
}
.left {
width: 200px;
background: tomato;
}
.right {
flex: 1;
background: gold;
}
style>
head>
<body>
<div class="outer">
<div class="left">div>
<div class="right">div>
div>
body>
html>
1.4 左绝父相 + margin
利用绝对定位，将父级元素设置为相对定位。左边元素设置为绝对定位，并且宽度设置为200px。将右边元素的margin-left的值设置为200px。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>两栏布局4title>
<style>
.outer {
position: relative;
height: 100px;
}
.left {
position: absolute;
width: 200px;
height: 100px;
background: tomato;
}
.right {
margin-left: 200px;
height: 100px;
background: gold;
}
style>
head>
<body>
<div class="outer">
<div class="left">div>
<div class="right">div>
div>
body>
html>
1.5 右绝父相 + 方向定位
利用绝对定位，将父级元素设置为相对定位。左边元素宽度设置为200px，右边元素设置为绝对定位，左边定位为200px，其余方向定位为0。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>两栏布局5title>
<style>
.outer {
position: relative;
height: 100px;
}
.left {
width: 200px;
height: 100px;
background: tomato;
}
.right {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 200px;
background: gold;
}
style>
head>
<body>
<div class="outer">
<div class="left">div>
<div class="right">div>
div>
body>
html>
2 三栏布局
三栏布局一般指的是页面中一共有三栏，左右两栏宽度固定，中间自适应的布局。
2.1 子绝父相 + margin
利用绝对定位，左右两栏设置为绝对定位，中间设置对应方向大小的margin的值。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>三栏布局1title>
<style>
.outer {
position: relative;
height: 100px;
}
.left {
position: absolute;
width: 100px;
height: 100px;
background: tomato;
}
.right {
position: absolute;
top: 0;
right: 0;
width: 200px;
height: 100px;
background: gold;
}
.center {
margin-left: 100px;
margin-right: 200px;
height: 100px;
background: lightgreen;
}
style>
head>
<body>
<div class="outer">
<div class="left">div>
<div class="center">div>
<div class="right">div>
div>
body>
html>
2.2 flex布局
利用flex布局，左右两栏设置固定大小，中间一栏设置为flex: 1;。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>三栏布局2title>
<style>
.outer {
display: flex;
height: 100px;
}
.left {
width: 100px;
background: tomato;
}
.right {
width: 100px;
background: gold;
}
.center {
flex: 1;
background: lightgreen;
}
style>
head>
<body>
<div class="outer">
<div class="left">div>
<div class="center">div>
<div class="right">div>
div>
body>
html>
2.3 浮动 + margin
利用浮动，左右两栏设置固定大小，并设置对应方向的浮动。中间一栏设置左右两个方向的margin值，注意这种方式，中间一栏必须放到最后。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>三栏布局3title>
<style>
.outer {
height: 100px;
}
.left {
float: left;
width: 100px;
height: 100px;
background: tomato;
}
.right {
float: right;
width: 200px;
height: 100px;
background: gold;
}
.center {
height: 100px;
margin-left: 100px;
margin-right: 200px;
background: lightgreen;
}
style>
head>
<body>
<div class="outer">
<div class="left">div>
<div class="right">div>
<div class="center">div>
div>
body>
html>
2.4 圣杯布局
利用浮动和负边距来实现。父级元素设置左右的padding，三列均设置向左浮动，中间一列放在最前面，宽度设置为父级元素的宽度，因此后面两列都被挤到了下一行，通过设置margin负值将其移动到上一行，再利用相对定位，定位到两边。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>三栏布局4--圣杯布局title>
<style>
.outer {
height: 100px;
padding-left: 100px;
padding-right: 200px;
}
.left {
float: left;
margin-left: -100%;
position: relative;
left: -100px;
width: 100px;
height: 100px;
background: tomato;
}
.right {
float: right;
margin-left: -200px;
position: relative;
left: 200px;
width: 200px;
height: 100px;
background: gold;
}
.center {
float: left;
width: 100%;
height: 100px;
background: lightgreen;
}
style>
head>
<body>
<div class="outer">
<div class="center">div>
<div class="left">div>
<div class="right">div>
div>
body>
html>
2.5 双飞翼布局
双飞翼布局相对于圣杯布局来说，左右位置的保留是通过中间列的margin值来实现的，而不是通过父元素的padding来实现的。本质上来说，也是通过浮动和外边距负值来实现的。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>三栏布局5--双飞翼布局title>
<style>
.outer {
height: 100px;
}
.left {
float: left;
margin-left: -100%;
width: 100px;
height: 100px;
background: tomato;
}
.right {
float: left;
margin-left: -200px;
width: 200px;
height: 100px;
background: gold;
}
.wrapper {
float: left;
width: 100%;
height: 100px;
background: lightgreen;
}
.center {
margin-left: 100px;
margin-right: 200px;
height: 100px;
}
style>
head>
<body>
<div class="outer">
<div class="wrapper">
<div class="center">div>
div>
<div class="left">div>
<div class="right">div>
div>
body>
html>
3 水平垂直居中
3.1 绝对定位 + translate
利用绝对定位，先将元素的左上角通过top: 50%;和left: 50%;定位到页面的中心，然后再通过translate来调整元素的中心点到页面的中心。该方法需要考虑浏览器兼容问题。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>水平垂直居中1title>
<style>
.parent {
position: relative;
width: 200px;
height: 200px;
background: gold;
}
.child {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
background: tomato;
}
style>
head>
<body>
<div class="parent">
<div class="child">div>
div>
body>
html>
3.2 绝对定位 + margin
利用绝对定位，设置四个方向的值都为0，并将margin设置为auto，由于宽高固定，因此对应方向实现平分，可以实现水平和垂直方向上的居中。该方法适用于盒子有宽高的情况。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>水平垂直居中2title>
<style>
.parent {
position: relative;
width: 200px;
height: 200px;
background: gold;
}
.child {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 100px;
height: 100px;
background: tomato;
}
style>
head>
<body>
<div class="parent">
<div class="child">div>
div>
body>
html>
3.3 绝对定位 + margin
利用绝对定位，先将元素的左上角通过top: 50%;和left: 50%;定位到页面的中心，然后再通过margin负值来调整元素的中心点到页面的中心。该方法适用于盒子宽高已知的情况。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>水平垂直居中3title>
<style>
.parent {
position: relative;
width: 200px;
height: 200px;
background: gold;
}
.child {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
margin-top: -50px;
margin-left: -50px;
background: tomato;
}
style>
head>
<body>
<div class="parent">
<div class="child">div>
div>
body>
html>
3.4 flex布局
使用flex布局，通过align-items: center;和justify-content: center;设置容器的垂直和水平方向上为居中对齐，然后它的子元素也可以实现垂直和水平的居中。该方法要考虑兼容的问题，该方法在移动端用的较多。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>水平垂直居中4title>
<style>
.parent {
display: flex;
justify-content: center;
align-items: center;
width: 200px;
height: 200px;
background: gold;
}
.child {
width: 50px;
height: 50px;
background: tomato;
}
style>
head>
<body>
<div class="parent">
<div class="child">div>
<div class="child">div>
div>
body>
html>