Front-end page layout basics 💕

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

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.
Box model composition:
- Outer frame – margin
- Border – border
- Padding – padding
- Content – content

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

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

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

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

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

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.
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

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
How to get out of document flow:

We can remove elements from the document flow by setting the Position and float properties
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
```
The edge offset after positioning
- top/bottom
- left/right
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
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

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.

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

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

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

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

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

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

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