CSS holy grail layout and double flying wing layout (front-end interview focus)
1. Holy Grail layout: fixed left and right, adaptive in the middle (resolve first in the middle)
Principle: 1. There are three small boxes in the big box, the left and right boxes are fixed, the width of the middle box is 100%, and the middle must be analyzed first and placed on the top.
2. Three small boxes plus float, the left small box set margin-left: -100%; the right small box set margin-left:-self width
3. Set the left and right padding for the big box, and the two small boxes on the left and right are positioned on both sides with relative positioning
<!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>
* {
margin: 0;
padding: 0;
}
/* 清除浮动 */
.clearfix:after {
display: block;
clear: both;
content: '';
}
.wrap {
padding: 0 200px 0 300px;
}
.center {
float: left;
width: 100%;
height: 200px;
background-color: gold;
}
.left {
position: relative;
float: left;
width: 300px;
height: 200px;
background-color: red;
margin-left: -100%;
left: -300px;
}
.right {
position: relative;
float: left;
width: 200px;
height: 200px;
background-color: blue;
margin-left: -200px;
right: -200px;
}
</style>
</head>
<body>
<div class="wrap clearfix">
<div class="center">center</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
2. Double wings layout: fixed left and right, adaptive in the middle (resolve first in the middle)
Principle: 1. There are three small boxes in the big box, the left and right boxes are fixed, the width of the middle box is 100%, and the middle must be analyzed first and placed on the top.
2. Three small boxes plus float, the left small box set margin-left: -100%; the right small box set margin-left:-self width
3. Nest a sub-box inside the middle, add left and right margins,
Disadvantages: Relative to the Holy Grail layout. Added structure code.
<!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>
* {
margin: 0;
padding: 0;
}
.clearfix:after {
display: block;
clear: both;
content: '';
}
.center {
float: left;
width: 100%;
height: 200px;
background-color: gold;
}
.left {
float: left;
width: 300px;
height: 200px;
background-color: red;
margin-left: -100%;
}
.right {
float: left;
width: 200px;
height: 200px;
background-color: blue;
margin-left: -200px;
}
.zi {
margin: 0 200px 0 300px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="center">
<div class="zi">1</div>
</div>
<div class="left">2</div>
<div class="right">3</div>
</div>
</body>
</html>
