Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.
preface
The Holy Grail layout and the twin wings layout are classic CSS layouts and are frequently used in front end interviews.
The implementation of the two layouts is simple, but understanding the principles behind the implementation method is not. This article will take you through step by step, so that you can do more than just use, say little, and walk ~
The holy grail layout
The layout of the Grail is shown below:
And to do the left and right width fixed, the middle width adaptive.
1. Use Flex layout
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.header..footer {
height: 40px;
width: 100%;
background: red;
}
.container {
display: flex;
}
.left {
width: 200px;
background: yellow;
}
.middle {
flex: 1;
background: pink;
}
.right {
width: 250px;
background: blue;
}
</style>
</head>
<body>
<div class="header">header</div>
<div class="container">
<div class="left">left</div>
<div class="middle">middle</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
</body>
</html>
Copy the code
2. The float layouts
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.header..footer {
height: 40px;
width: 100%;
background: red;
}
.footer {
/* footer clears float */
clear: both;
}
.container {
padding-left: 200px;
padding-right: 250px;
}
.container div {
position: relative;
float: left;
}
.middle {
width: 100%;
background: yellow;
}
.left {
width: 200px;
background: pink;
margin-left: -100%;
left: -200px;
}
.right {
width: 250px;
background: blue;
margin-left: -250px;
left: 250px;
}
</style>
</head>
<body>
<div class="header">This is the head</div>
<div class="container">
<div class="middle">The middle section</div>
<div class="left">On the left</div>
<div class="right">On the right</div>
</div>
<div class="footer">So here's the bottom</div>
</body>
</html>
Copy the code
Container {padding-left: 200px; container {padding-left: 200px; padding-right: 250px; }, and the left and right padding values are the width of the left and right.
Second, and very importantly, the percentage of margin in a child box is based on the parent box.
F12 Open the console and we remove the left and right styles that are most difficult to understand:
Enable left margin-left Since 100% of the margin is based on the parent box, we find that the left gradually moves to the left beyond the parent box boundary (the negative margin of the margin is based on the parent box boundary), when margin-left: -200px; “, the left top to the top, in the far right position.
When the margin – left: – 100%; Theta is the leftmost position.
At this point, move left one more width to the left: addleft: -200px;(The left value is also based on the boundaries of the parent box), which is where we want to go.
Same for right: when margin-left: -250px; “, right goes up to the top and is on the far right.
At this point, move the right one more width to the right: addleft: 250px;(Note: moving to the right is positive, and moving to the left is negativeleft: -200px;We’re at our target position.
Here, to achieve the grail layout and the principle of his analysis.
Twin wing layout
With the holy cup layout, the twin wing layout is not a problem. This is done using the classic float layout.
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.container {
min-width: 600px;
}
.left {
float: left;
width: 200px;
height: 400px;
background: red;
margin-left: -100%;
}
.center {
float: left;
width: 100%;
height: 500px;
background: yellow;
}
.center .inner {
margin: 0 200px;
}
.right {
float: left;
width: 200px;
height: 400px;
background: blue;
margin-left: -200px;
}
</style>
</head>
<body>
<article class="container">
<div class="center">
<div class="inner">Twin wing layout</div>
</div>
<div class="left"></div>
<div class="right"></div>
</article>
</body>
</html>
Copy the codeDouble wing layout implementation principle, refer to the above grail layout analysis.
Note: The left and right of the twin-wing layout are inside the main box, not outside, so we only need to use the negative value of marin-left to achieve this. We do not need to set the left to move to the left or right.
Why put an inner in the center? And inner also set margin: 0 200px; ?
<div class="center">
<div class="inner">Twin wing layout</div>
</div>
Copy the code.center .inner {
margin: 0 200px;
}
Copy the codeThis is also a point for the layout of the twin wings, added inner and its margin: 0 200px; It is the core of the middle part of the twin-wing layout, without which no twin-wing layout is complete. This inner is the parent box (or top box) to which we will later add content in the middle of the layout.