Grail layout and double wing layout, mainly to solve the layout of three columns, the middle column needs to render the problem of priority, mainly use margin property and float familiar, mainly investigate margin and float familiar degree

Margin left, top, right, bottom set negative values respectively

  • Margin-left and margin-top move elements left and up

  • Margin-right and margin-bottom make themselves less important in the layout, moving elements on the right or below towards them

The holy grail layout

.column{ float: left; } main{ padding: 0 200px; } .center{ width: 100%; background: greenyellow; } .left,.right{ width: 200px; background: yellow; } <main class="clearfix"> <div class="column center">center</div> <div class="column left">left</div> <div class="column  right">right</div> </main>Copy the code

.left{
  margin-left: -100%;
}
Copy the code

Why does margin-left-100% achieve this effect? It’s going to move to the left if it’s 100% the width of the parent, the width of the parent,

Why does it move up, when we sometimes just move straight to the left, out of sight?

Float puts them on the same line, but center occupies all rows and pushes the other two down, so it goes back when there is a negative margin, such as diable:flex; Flex-wrap: Wrap will have the same effect

.left{ position: relative; left: -200px; Margin-left: -100%; margin-left: -100%; margin-left: -100%; } .right{ margin-right: -200px; }Copy the code

margin-right: -200px; I want my width to disappear (not really disappear, but think of it as width-less relative to other elements) so that I can go back to the first row, next to center

Margin and float are used in margin and float layouts