The traditional layout stuff

Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

The traditional layout

💡 First of all, let’s link the three positioning mechanisms of CSS: normal flow, floating, and positioning

Normal flow

The order of the elements is determined by the relative order in which the HTML is written, that is, the order in which the elements are placed. It can also be understood as document flow

floating

Floating is typically used to align multiple block-level elements horizontally. The previous set of inline blocks creates gaps between elements.

1. Set up floating

To float an element is to create a float box and move it to one side until there is another float box on either side. Think of it as parallel worlds, or two levels above and below the plane.

div{
  float:left;
  float:right;
}
Copy the code

If the parent element does not fit these floating boxes, the extra boxes will be aligned on another line. 2. Clear float so why do we clear float? Sometimes floating elements do not occupy the original document and can affect the layout of later elements

.clearfix::after{
  
  clear: both;
}
Copy the code

Note that 👀: floating elements have floating properties:

1. The floating element is removed from the control of the normal flow and moved to the specified position, and the floating box no longer remains in its original position, and the following normal flow element is replaced by its position.

2. Floating elements are displayed within a line and aligned at the top of the elements

3. Floating elements have the properties of inline blocks

positioning

Positioning has a wide range of applications. When we want elements to move freely within the box or be fixed to a certain position on the screen, we can use positioning to achieve this. The simple understanding is that you can use positioning to locate the box wherever you want it to be. Location = location mode + offset let’s go through 😁

Positioning mode

1. Static positioning

Default positioning, placement with normal flow

div{
  position:static;
}
Copy the code

2. Relative positioning

div{
  position:relative;
   /* The element is positioned against itself and moved to its original position by offset, with itself as the reference point */
  /* The element box is offset by a certain distance. The element remains the same shape as before, and the space it occupied remains */
}
Copy the code

3. Absolute positioning

• It’s offset by parent and ancestor elements, and if it doesn’t have a parent element, it’s offset by browser, which is document.
• When an ancestor element is located, it is offset with reference to the nearest parent element
• Elements disappear from normal stream when absolute positioning is set.

div{
  position:absolute;
  left:100px;
  top:100px;11
}
Copy the code

4. Fixed position

• Position in a window that the browser can see
• Of course, he is also out of the ordinary.

div{
  position:fixed;
  /* Does not move with the scroll bar, does not occupy position at all */
}
Copy the code

ヾ(≧▽≦*)o Remember that the child must be the father

Boundary migration

The offset is what we have to do to offset the box to the correct position after we have positioned it

1. top

   top:100px;
}
Copy the code

2. bottom

div{
   bottom:100px;
}
Copy the code

3. left/right

div{
   left:100px;
   right:100px;
}
Copy the code