This is the 11th day of my participation in the Gwen Challenge in November. Check out the details: The last Gwen Challenge in 2021

Traditional layout versus flow layout

Basic Layout Notes

💡 First let’s look at the box model and inline block elements

The box model

  1. Concept:

    Any element defined by CSS can have a box-like shape and surface space, which is the cornerstone of CSS layout

    It specifies how web elements are displayed and how they relate to each other.

  2. Box model composition:

    • Outer frame – margin
    • Border – border
    • Padding – padding
    • Content – content

  3. Margin overlay

    Margin superposition will occur in box model, and the value after superposition will be based on the maximum margin.

    Now we have two adjacent

    elements with different margins: 
    <style>
        .box {
            margin: 10px;
            padding: 20px;
            border: solid 2px # 000;
        }
        .large-box {
            margin: 20px;
        }
</style>
<body>
    <div class="box"></div>
    <div class="large-box box"></div>
</body>
Copy the code

  4. Box computing

    • content-box

      The content-box formula is: Content +padding+border

    • border-box

      The border-box is calculated as follows: The total width and height of the element is the set width and height of the element

Inline elements and block-level elements

  1. Concept:

    • Inline elements: Inline elements are thin and can be placed next to each other in a line
    • Block-level elements: Block-level elements are fat and can occupy only one block-level element in a row

  2. The difference between:

    Inline elements Block-level elements
    Adjacent elements will be placed on the same line and will be wrapped Block-level elements have a single row
    Width varies with element content The width automatically fills the width of its parent element
    The height and width property Settings are invalid Height and width Settings are valid
    The margin and the inner margin can only be set around Margins and margins can be set at will

    Inline block element: Combines the properties of inline and block-level elements, i.e. the width and height of an existing block with inline inline inline elements

  3. How to set:

    • Set to inline element:

      display:inline
Copy the code

    • Set to block level element:

      dispaly:block
Copy the code

    • Set to inline block element:

      display:inline-block
Copy the code

The traditional layout

The document flow

  1. Concept:

    A document flow is a rule in a browser that separates a form from top to bottom in a row

    In each line, elements are arranged from left to right, called document flow.

  2. Flow direction:

    • Inline elements go from left to right, and line breaks only when they reach the right.

    • Block elements start on a separate line from top to bottom.

    • Inline-blocks are also left to right.

Out of document flow

  1. Concept:

    We don’t just use the default document flow for our layout, that would be ugly

    So we can take our element out of the document flow

  2. How to get out of document flow:

    We can remove elements from the document flow by setting the Position and float properties

  3. Positioning – the position

    • Relative positioning

      1. Concept: The element is positioned against itself and moved to its original position by offset, i.e. with itself as the reference point

      2. Use:

        position:relative;
Copy the code

        When the element box is offset by a certain distance, the element remains the shape it was before it was positioned, and the space it occupied remains

    • Absolute positioning

      1. Concept: Positioned by parent and ancestor elements

      2. Note:

        • When it has no parent element, it offsets it based on the browser

        • When an ancestor element is located, it is offset with reference to the nearest parent element

      3. Use:

        position:absolute;
Copy the code

    • Fixed position

      1. Concept: Positioning in the browser visual window

      2. Use:

        position:fixed;
Copy the code

  4. The edge offset after positioning

    • top/bottom
    • left/right

  5. Float out of the document flow

    1. Concept: Floating elements move out of normal flow control and into a specified position

    2. Use:

      float:left;
float:right;
Copy the code

    3. Note:

      • The floating box no longer remains in its original position, and the following normal flow element overtops its position
      • Floating elements are displayed within a line and aligned at the top of the elements
      • Floating elements have the properties of inline blocks

  6. Remove the floating

    • Use:

      clear: both;
Copy the code

    • Why clear the float?

      Because floating elements do not occupy the location of the original document, they affect the layout of later elements

Flex layout

Differences and characteristics

  1. Comparison with traditional layout:
  • Traditional layout: Based on the box model, relying on display, position, float properties, the implementation of special layout is cumbersome
  • Flex layout: It is a one-dimensional layout model that provides strong spatial distribution and alignment between flexbox’s child elements, making it easy to implement special layouts.
  1. Features and Concepts:

  • Any container (div) can use flex layout

  • Elements with a Flex layout are called Flex containers, and all child elements become members.

  • Elements that use Flex will lose float and clear

  • The one-dimensional feature allows it to have two axes, a horizontal axis and a vertical intersecting axis (default axis alignment).

Use of attributes

  1. Flex-direction Attribute The flex-direction attribute determines the direction of the main axis

    Attribute values role
    row The main axis is horizontal and the starting point is at the left end
    row-reverse The main axis is horizontal and the starting point is at the right end
    colmun The main axis is vertical and the starting point is at the upper end
    colmun-reverse The main axis is vertical and the starting point is at the bottom

  2. The Flex property defines how the child members are packed on an axis in a line break arrangement.

    Attribute values role
    nowrap No line breaks (shrinks child member width)
    wrap Newline with the first line at the top
    wrap-reverse Newline with the first line below

  3. The context-content attribute defines how items are aligned on the main axis.

    Attribute values role
    flex-start The left
    flex-end Align right
    center In the middle
    space-between Both ends are aligned and equally spaced
    space-around Each child member is equally spaced

  4. The align-items property defines how items are aligned on the cross axis.

    Attribute values role
    flex-start Align the starting point of the cross axis
    flex-end Align the ends of the cross axes
    center Align the midpoint of the cross axis
    baseline Baseline alignment of the first line of text for the project
    stretch If the item is not set to height or is set to Auto, it will fill the entire container height

  5. The align-content property defines the alignment of multiple axes. This property has no effect if the project has only one axis.

    Attribute values role
    flex-start Align with the starting point of the cross axis
    flex-end Align with the endpoint of the cross axis
    center Align with the midpoint of the intersecting axis
    baseline Both sides of each axis are equally spaced. Therefore, the spacing between axes is twice as large as the spacing between axes and borders
    stretch The axis covers the entire cross axis