1. Purpose of grail layout and Twin wing layout:

  • Three column layout
  • The sides are fixed, the middle content ADAPTS to the width, and the middle needs to be loaded first, so the middle part comes first in the HTML structure
  • Generally used for PC web pages

Ii. Implementation method:

  • Float layout
  • Use margin negative values on both sides to overlap the middle content horizontally
  • To prevent the middle content from being overwritten by both sides, use padding for grail layout and Margin for winged layout
  • The Grail layout requires relative positioning, the twin wing layout does not

Three, effect drawing:

Iv. Summary:

  • The Holy Grail layout uses a container, including the middle, left and right modules. The padding value is used to ensure that the middle content is not covered by both sides. Then, the relative positioning is used to determine the position of the left and right boxes.

  • On the other hand, the dual-wing layout is implemented in a different way. Container is used to wrap the middle section, and then the left and right margin values are used to squeeze the contents towards the middle, so that the contents in the middle are not covered. Margin-left is still used to adjust the position of left and right sections, but positioning is not needed.

  • The last point is important:

    • Margin-left: % margin-left: %
    • (The distance between the left border of the child box and the right border of its left sibling box)/the width of the parent box;
    • If the parent box has the right padding, the left sibling box’s right border should start from the padding, as in the Grail layout and the twin wings layout.
    • It doesn’t matter whether the padding is on the left, because margin-left is calculated relative to the right border of the left sibling box.

Five, grail layout code:

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Initial-scale =1.0"> <title> </title> <! < span style> body {font-size: 40px; color: #000; text-align: center; height: 150px; line-height: 150px; } header, footer { height: 150px; background-color: #EBC4AE; } .center, .left, .right { float: left; } .container { padding: 0 100px; } .left { background-color: #98C2D0; width: 100px; margin-left: -100%; position: relative; left: -100px; } .center { background-color: #E71014; width: 100%; } .right { background-color: #7EDD7B; width: 100px; margin-left: -100px; position: relative; right: -100px; } .clearfix::after { content: ""; display: block; clear: both; } </style> </head> <body> <header> </header> <div class="container clearfix"> <div class="center"> Middle </div> <div The left class = "left" > < / div > < div class = "right" > right < / div > < / div > < footer > at the bottom of the < footer > < / body > < / HTML >Copy the code

Six, double wing layout code:

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Word-wrap: break-word! Important; "> < p style> < p style = "max-width: 100%; color: #000; height: 150px; line-height: 150px; text-align: center; } .header, .footer { background-color: #EBC4AE; } .container, .left, .right { float: left; } .left { background-color: #98C2D0; width: 100px; margin-left: -100%; } .container { background-color: #E71014; width: 100%; } .center { margin: 0 100px; } .right { background-color: #7EDD7B; width: 100px; margin-left: -100px; } .footer { clear: both; } </style> </head> <body> <header class="header"> </header> <div class="container"> <div class="center"> Middle </div> </div> <div class="left"> </div> <div class="right"> </div> <footer class="footer"> bottom </footer> </body> </ HTML >Copy the code