1. Realization of two-column layout
The two-column layout is actually a layout with fixed width on the left and adaptive layout on the right
1. float+margin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.container {
display: flex;
height: 300px;
}
.left {
width: 100px;
background: red;
}
.right {
flex: 1;
background: green;
}
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
2. flaot+BFC
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.container {
display: flex;
height: 300px;
}
.left {
width: 100px;
background: red;
}
.right {
flex: 1;
background: green;
}
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
Knowledge class
Let's look at two related concepts first:
●Box: Box is the object and basic unit of CSS layout. A page is composed of many Boxes. This Box is what we call the box model.
●Formatting context: block-level context formatting, which is a rendering area in the page, and has a set of rendering rules, which determine how its child elements will be positioned, as well as the relationship and interaction with other elements.
Block Formatting Context (Block Formatting Context, BFC) is part of the visual CSS rendering of a Web page. It is the area where block-level boxes are generated during the layout process, and it is also the limited area for interaction between floating elements and other elements.
In layman's terms: BFC is an independent layout environment, which can be understood as a container, in which items are placed according to certain rules, and will not affect items in other environments. If an element meets the conditions to trigger a BFC, the element layout in the BFC is not affected by external influences.
Conditions for creating a BFC:
● Root element: body;
● Element setting floating: float value other than none;
● Element setting absolute positioning: position (absolute, fixed);
● Display value: inline-block, table-cell, table -caption, flex, etc.;
●overflow value: hidden, auto, scroll;
Features of BFC:
●In the vertical direction, it is arranged from top to bottom, which is consistent with the arrangement of document flow.
●In the BFC, the margins of two adjacent containers will overlap
. When calculating the height of the BFC, the height of the floating element needs to be calculated. The BFC area will not
overlap with the floating container.
Affects external elements The left margin value of each element is in contact with the left border of the container
3. Positioning+margin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.left {
position: absolute;
left: 0;
width: 100px;
height: 300px;
background: red;
}
.right {
margin-left: 100px;
height: 300px;
background: green;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
</body>
</html>
4. Flex layout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.container {
display: flex;
height: 300px;
}
.left {
width: 100px;
background: red;
}
.right {
flex: 1;
background: green;
}
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
5. grid layout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.container {
display: grid;
grid-template-columns: 100px 1fr;
box-sizing: border-box;
height: 300px;
}
.left {
background: red;
}
.right {
background: green;
}
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
Realization of two and three column layouts
Left and right fixed width, middle self-adaptive
1. float + margin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CSS实现三栏布局1</title>
<style type="text/css">
.left {
width: 200px;
height: 300px;
background-color: #dc698a;
float: left;
}
.middle {
height: 300px;
background-color: #8cb08b;
margin: 0 200px;
}
.right {
width: 200px;
height: 300px;
background-color: #3eacdd;
float: right;
}
</style>
</head>
<body>
<div class="left">左栏</div>
<div class="right">右栏</div>
<div class="middle">中间栏</div>
</body>
</html>
2. float + BFC
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CSS实现三栏布局1</title>
<style type="text/css">
.left {
width: 200px;
height: 300px;
background-color: #dc698a;
float: left;
}
.middle {
height: 300px;
background-color: #8cb08b;
overflow: hidden;
}
.right {
width: 200px;
height: 300px;
background-color: #3eacdd;
float: right;
}
</style>
</head>
<body>
<div class="left">左栏</div>
<div class="right">右栏</div>
<div class="middle">中间栏</div>
</body>
</html>
Note: The above two methods must render right first, otherwise right will be squeezed out by middle
3. Positioning + margin (or positioning + BFC)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CSS实现三栏布局3</title>
<style type="text/css">
.container {
position: relative;
}
.left {
width: 200px;
height: 300px;
background-color: #dc698a;
position: absolute;
}
.middle {
height: 300px;
background-color: #8cb08b;
margin: 0 200px;
}
.right {
position: absolute;
right: 0;
top: 0;
width: 200px;
height: 300px;
background-color: #3eacdd;
}
</style>
</head>
<body>
<div class="container">
<div class="left">左栏</div>
<div class="middle">中间栏</div>
<div class="right">右栏</div>
</div>
</body>
</html>
4. Flex layout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.container {
height: 300px;
display: flex;
}
.left,
.right {
width: 100px;
background: red;
}
.center {
flex: 1;
background: green;
}
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>
</html>
5. The Holy Grail Layout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
<style>
.container {
height: 200px;
overflow: hidden;
padding: 0 200px;
}
.center {
width: 100%;
height: 200px;
background-color: green;
float: left;
}
.left {
width: 200px;
height: 200px;
background-color: blue;
float: left;
margin-left: -100%;
position: relative;
left: -200px;
}
.right {
width: 200px;
height: 200px;
background-color: darkorchid;
float: left;
margin-left: -200px;
position: relative;
right: -200px;
}
</style>
</head>
<body>
<div class="container">
<div class="center"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>