This is the fifth day of my participation in the August Wen Challenge.More challenges in August

Today we are going to learn two classic PC parts – the twin wing layout and the Grail layout. Both of these three-column layouts use float, which is typical of float.

Before exploring the layout, let’s review the following margin negative case

1. The margin negative

1.1 Diagram of upper and lower boxes

<div class="box1"></div>
<div class="box2"></div>
Copy the code

css

.box1{
  width: 200px;
  height: 200px;
  border: 2px solid pink;
}

.box2 {
  width: 200px;
  height: 200px;
  border: 2px solid skyblue;
}
Copy the code

Margin-top: -100px

Set margin negative for the box above

margin-top: -100px;
Copy the code

The top box will move up 100px, and the bottom box will stick to the top box

Margin-botton: -100px

At this point, the top box will not move and the bottom box will move up by 100px

Margin-top: -100px

This is the same with margin-botton

Margin-bottom: -100px

The page doesn’t change

1.2 Summary of Upper and lower Boxes

So if you have a negative value of the top box and the bottom box, if you have a negative value of the top box, if you have a negative value of the top box, if you have a negative value of the top box, if you have a negative value of the top box, if you have a negative value of the top box, if you have a negative value of the top box, Margin-bottom is a negative value, so neither box moves up nor down

1.3 Summary of around boxes

The same thing happens with the left and right boxes and I’ll just summarize it

So if you have a margin-left value for the left box and a margin-right value for the left box, if the left box doesn’t move, the right box will move to the left, The right box will move to the left Negative margin – right, the right box box won’t move around

Let’s take a look at the simple twin wing layout

2. Dual-wing layout

2.1 the target

The width of the content on both sides is fixed, and the width of the content in the middle is adaptive to the three-column layout. The middle column is loaded and rendered first (the main content).

2.2 the initialization

The primary region is loaded first, so write the primary region first

<body>
  <header>The head</header>
  <div class="main">
    <div class="center">The primary area</div>
  </div>
  <div class="left">The left area</div>
  <div class="right">The right area</div>
  <footer>At the bottom of the</footer>
</body>
Copy the code

CSS Basics

header {
  background-color: pink;
}

.main {
  width: 100%;
  background-color: skyblue;
}

.left {
  width: 100px;
  background-color: green;
}

.right {
  width: 100px;
  background-color: red;
}

footer {
  background-color: pink;
}
Copy the code

2.3 Initial Page

2.4 Open the wings

1. Enable floating float

Clear the float for the bottom of the three zones first

<header>The head</header>
<div class="main float_left">
  <div class="center">The primary area</div>
</div>
<div class="left float_left">The left area</div>
<div class="right float_left">The right area</div>
<footer>At the bottom of the</footer>
Copy the code
.float_left {
  float: left;
}

footer {
  background-color: pink;
  clear: both;
}
Copy the code

2. Leave an empty margin on both sides of the main area

The next thing you need to do is to leave 100px on each side of the main area for the left and right, using margin here

.center {
  margin: 0 100px;
}
Copy the code

You can see the main area and the space left on either side

3. Margin is negative for both sides

.left {
  width: 100px;
  background-color: green;
  margin-left: -100%;
}

.right {
  width: 100px;
  background-color: red;
  margin-left: -100px;
}
Copy the code

And for the left-hand side, it’s going to bemargin-left: -100%; For the right-hand side, it’s pretty easy, just move itself to the leftmargin-left: -100px;

2.5 Twin Wings Layout page

Twin wings complete ~

Next up is the Grail section

3. Grail layout

3.1 the target

The width of the content on both sides is fixed, and the width of the content in the middle is adaptive to the three-column layout. The middle column is loaded first and rendered out (the main content).

3.2 the initialization

<header>The head</header>
<div>
  <div class="center">The primary area</div>
  <div class="left">The left area</div>
  <div class="right">The right area</div>
</div>
<footer>At the bottom of the</footer>
Copy the code
header {
  background-color: pink;
}

.center {
  width: 100%;
  background-color: skyblue;
}

.left {
  background-color: green;
  width: 100px;
}

.right {
  width: 100px;
  background-color: red;
}

footer {
  background-color: pink;
}
Copy the code

3.3 Initial Page

3.4 Opening the Grail

1. Enable floating float

Three zones open float clear float outside the three zones

<header>The head</header>
<div class="clearfix">
  <div class="center float_left">The primary area</div>
  <div class="left float_left">The left area</div>
  <div class="right float_left">The right area</div>
</div>
<footer>At the bottom of the</footer>
Copy the code
.float_left {
  float: left;
}

.clearfix::after {
  content: ' ';
  display: block;
  clear: both;
}
Copy the code

2. Empty padding on both sides of the main area

<header>The head</header>
<div class="clearfix wrapper">
  <div class="center">The primary area</div>
  <div class="left">The left area</div>
  <div class="right">The right area</div>
</div>
<footer>At the bottom of the</footer>
Copy the code
.wrapper {
  padding: 0 100px;
}
Copy the code

3. Margin-negative + positioning on both sides

The left side goes up firstmargin-left: -100%; And let the left region move its distance to the left relative to itself

.left {
  background-color: green;
  width: 100px;
  margin-left: -100%;
  position: relative; 
  left: -100px;
}
Copy the code

Now let’s bring the right-hand side upmargin-right: -100px;

3.5 Grail Layout page

4. To summarize

Two kinds of layout form is the same, to achieve the twin wing layout is slightly simpler, use

  1. Enable float + Clear float
  2. Margin on both sides of the main area
  3. Margin negative

The Grail layout is a little more complicated

  1. Enable float + Clear float
  2. Left white on both sides of the main area
  3. Margin negative + relative positioning