Centered layout
Fixed height and width div centered vertically
display:flex
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html.body {
margin:0;
height: 100%;
}
.parent {
height: 200px;
width: 200px;
background-color: #f3f3f3;
display: flex;
justify-content: center;
align-items: center
}
.child {
width: 100px;
height: 100px;
background-color: #61C1E8;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
Copy the code
position: absolute
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html.body {
margin:0;
height: 100%;
}
.parent {
position: relative;
height: 200px;
width: 200px;
background-color: #f3f3f3;
}
.child {
position: absolute;
width: 100px;
height: 100px;
background-color: #61C1E8;
left: 50%;
top: 50%;
margin-top: -50px;
margin-left: -50px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
Copy the code
position & transform
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html.body {
margin:0;
height: 100%;
}
.parent {
position: relative;
height: 200px;
width: 200px;
background-color: #f3f3f3;
}
.child {
position: absolute;
width: 100px;
height: 100px;
background-color: #61C1E8;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
Copy the code
position & margin
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html.body {
margin:0;
height: 100%;
}
.parent {
position: relative;
height: 200px;
width: 200px;
background-color: #f3f3f3;
}
.child {
position: absolute;
width: 100px;
height: 100px;
background-color: #61C1E8;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
Copy the code
table
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html.body {
margin:0;
height: 100%;
}
.parent {
display: table-cell;
text-align: center;
vertical-align: middle;
height: 200px;
width: 200px;
background-color: #f3f3f3;
}
.child {
display: inline-block;
width: 100px;
height: 100px;
background-color: #61C1E8;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">erer</div>
</div>
</body>
</html>
Copy the code
Indefinite width height horizontal vertical center
display:flex
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html.body {
margin:0;
height: 100%;
}
.parent {
height: 200px;
background-color: #f3f3f3;
display: flex;
justify-content: center;
align-items: center
}
.child {
background-color: #61C1E8;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">layout</div>
</div>
</body>
</html>
Copy the code
position & transform
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html.body {
margin:0;
height: 100%;
}
.parent {
position: relative;
height: 200px;
width: 200px;
background-color: #f3f3f3;
}
.child {
position: absolute;
background-color: #61C1E8;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
Copy the code
table
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html.body {
margin:0;
height: 100%;
}
.parent {
display: table-cell;
text-align: center;
vertical-align: middle;
height: 200px;
width: 200px;
background-color: #f3f3f3;
}
.child {
display: inline-block;
background-color: #61C1E8;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">erer</div>
</div>
</body>
</html>
Copy the code
Trouble spots
Positon: Absolute & Position & margin
In positon: Absolute absolute, the offset is controlled by margin. The percentage of margin is relative to the contained block, so it can neither be calculated by specific numerical value nor processed by percentage.
Position & Margin: juejin.cn/post/694508… Juejin. Cn/post / 694508…
The calculation formula for absolute positioning is:
‘margin-top’ + ‘border-top-width’ + ‘padding-top’ + ‘height’ + ‘padding-bottom’ + ‘border-bottom-width’ + ‘margin-top’ + ‘bottom’ = height of containing block Then calculate the equation above If none of the three are ‘auto’: If both ‘margin-top’ and ‘margin-bottom’ are ‘auto’, solve the equation under the extra constraint that the two margins get equal values.
Positon & Transform why?
The percentage of the transform is relative to the current element, so it can be handled.
Holy Grail & Twin wings layout
- Fixed width on both sides, adaptive width in the middle
- The middle section takes precedence in the DOM structure so it can be rendered first
- Allow any of the three columns to be the highest column
- Just use an extra one
The label
The holy grail layout
<! Example - source -- -- > https://blog.csdn.net/weimob258616/article/details/110110818
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html.body {
margin:0;
height: 100%; {} *border-width: 0;
}
body {
min-width: 350px;
}
#header.#footer {
height: 100px;
background: #ccc;
}
#container {
padding-left: 200px;
padding-right: 150px;
box-sizing:border-box;
min-width:550px;
}
#center {
float: left;
width: 100%;
background: #f96d9f;
}
#left {
width: 200px;
float: left;
margin-left: -100%;
position: relative;
left: -200px;
background: aqua;
}
#right {
width: 150px;
float: left;
margin-right: -150px;
background: yellowgreen;
}
#left.#right.#center {
min-height: 100px;
}
/* Peripheral style */
#header.#footer.#center.#left.#right {
display: flex;
justify-content: center;
align-items: center;
font-family: 'Source Code Pro';
font-size: 20px;
}
#footer {
clear: both;
}
</style>
</head>
<body>
<div id='header'>#header</div>
<div id='container'>
<div id='center'>#center</div>
<div id='left'>#left</div>
<div id='right'>#right</div>
</div>
<div id='footer'>#footer</div>
</body>
</html>
Copy the code
The container is set
#container {
padding-left: 200px;
padding-right: 150px;
box-sizing:border-box;
min-width:550px;
}
Copy the code
Prioritize center
#center {
float: left;
width: 100%;
background: #f96d9f;
}
Copy the code
Left code
#left {
width: 200px;
float: left;
margin-left: -100%;
position: relative;
left: -200px;
background: aqua;
}
Copy the codePositon here is actually fine without it.
#left {
width: 200px;
float: left;
margin-left: calc(-100% - 200px);
background: aqua;
}
Copy the code
Illustrate the use of margin-left code here
Now the container and Center are 638px wide; Margin-left: 200px; margin-left: 200px; margin-left: 200px; margin-left: 200px;
Change the width of the container to 638-40 = 598px.
#center {
float: left;
width: 598px;
background: #f96d9f;
}
#left {
width: 200px;
float: left;
background: aqua;
}
Copy the codeMargin-left: 160px; margin-left: 160px; margin-left: 160px;
Take this as an example: imagine placing the left and center on the same line, requiring a 200px distance, but there is only 40px left, so the rows will not fit. It puts left on the next line. Assuming that the line can be put down, we can find that we are 160px short of space. We can use margin-left to move the left element to the left, so that the entire content left can be placed in the container. The margin here
Margin-left?
Modify code: remove left and right margin related code.
<! -- https://blog.csdn.net/weimob258616/article/details/110110818 -->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html,
body {
margin:0;
height: 100%; {} *border-width: 0;
}
body {
min-width: 350px;
}
#header.#footer {
height: 100px;
background: #ccc;
}
#container {
padding-left: 200px;
padding-right: 150px;
box-sizing:border-box;
min-width:550px;
}
#center {
float: left;
width: 100%;
background: #f96d9f;
}
#left {
width: 200px;
float: left;
background: aqua;
}
#right {
width: 150px;
float: left;
background: yellowgreen;
}
#left.#right.#center {
min-height: 100px;
}
/* Peripheral style */
#header.#footer.#center.#left.#right {
display: flex;
justify-content: center;
align-items: center;
font-family: 'Source Code Pro';
font-size: 20px;
}
#footer {
clear: both;
}
</style>
</head>
<body>
<div id='header'>#header</div>
<div id='container'>
<div id='center'>#center</div>
<div id='left'>#left</div>
<div id='right'>#right</div>
<div id='left'>#left</div>
<div id='right'>#right</div>
</div>
<div id='footer'>#footer</div>
</body>
</html>
Copy the code
Manually set the last right margin-left: -20px;
This can be seen at the current margin-left relative toThe currently arranged row contains the inner margin of the block. If we want to place the second right to the left of the container. Need margin – left:calc(-100%- 50px – 50px);
First of all, it is clear that you can only move to the upper floating layer through margin-left, as shown above, only to the second layer. The total length of the header is 1000px.
The second layer originally had a blank area: 100px; So the second right only needs to move -50px to reach the second layer.
Continue to move 100% from the original;
Since right is 50px less than left, add another 50px.
The right code
#right {
width: 150px;
float: left;
margin-right: -150px;
background: yellowgreen;
}
Copy the codeThis code can also be implemented by referring to the left code. But margin-right is used here.
Margin-right?
Go ahead and test with the code above:
Change the second right, add margin-right: -50px;
Margin-right :-50px, so move 50px to the right. Let’s say we could have put the second right on the second layer, but there would be 50px overlap, which is not possible in float. So to not occupy 50px of the previous float element, we move 50px to the right via margin-right. For example, if you say I take up 50px and don’t let me be in this row, I’ll move 50px to the right and not take up your space.
Why margin-right instead of margin-left
As can be seen from the figure, when margin-left moves to the second line, the right margin is the inner right margin of the containing block. This method is not not, is the need to add relative positioning in positioning.
Twin wing layout
Center adds float property, inner uses margin. You don’t need to use relative.
<! -- https://blog.csdn.net/weimob258616/article/details/110110818 -->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html,
body {
margin:0;
height: 100%; {} *border-width: 0;
}
body {
min-width: 350px;
}
#header.#footer {
height: 100px;
background: #ccc;
}
#container {
padding-left: 200px;
padding-right: 150px;
box-sizing: border-box;
min-width: 550px;
}
#center {
float: left;
width: 100%;
background: #f96d9f;
}
#inner{
margin-left:200px;
margin-right:150px;
}
#left {
width: 200px;
float: left;
margin-left: -100%;
background: aqua;
}
#right {
width: 150px;
float: left;
margin-left: -150px;
background: yellowgreen;
}
#left.#right.#center {
min-height: 100px;
}
/* Peripheral style */
#header.#footer.#center.#inner.#left.#right {
display: flex;
justify-content: center;
align-items: center;
font-family: 'Source Code Pro';
font-size: 20px;
}
#footer {
clear: both;
}
</style>
</head>
<body>
<div id='header'>#header</div>
<div id='center'>
<div id='inner'>center</div>
</div>
<div id='left'>#left</div>
<div id='right'>#right</div>
<div id='footer'>#footer</div>
</body>
</html>
Copy the code
Holy Cup layout & Twin wings layout
Grail layout:
Twin wing layout:
The Holy Grail layout is more intuitive and natural in the DOM structure; The twin wing layout saves a lot of CSS and has a smaller minimum width than the Grail layout because it doesn’t use positioning; At this point, it’s important to note that the wing layout squeezes the middle portion of the space as the browser’s viewable area shrinks.
Adaptive two-column layout
- The left side of the margin box of each box (block box vs. row box) touches the left side of the border box containing the block (for left-to-right formatting, otherwise the opposite). This is true even if there is a float.
- The region of the BFC does not overlap with the float box.
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.left {
width: 100px;
height: 150px;
float: left;
background: gray;
}
.right {
height: 300px;
background: rgb(170.54.236);
background: yellowgreen;
}
</style>
</head>
<body>
<div class="left">LEFT</div>
<div class="right">RIGHT</div>
</body>
</html>
Copy the code
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.left {
width: 100px;
height: 150px;
float: left;
background: gray;
}
.right {
overflow: hidden;
height: 300px;
background: rgb(170.54.236);
background: yellowgreen;
}
</style>
</head>
<body>
<div class="left">LEFT</div>
<div class="right">RIGHT</div>
</body>
</html>
Copy the code
