css layout

Grail layout

The middle element is at the beginning. The parent element uses padding to reserve the position of the left and right elements. The three elements float. The left element uses margin negative value and relative positioning to adjust the position, and the right element uses margin negative value to adjust the position. However, when the width of the middle part is less than the left, the layout is chaotic.

Dual wing layout

The middle element is at the beginning. A child element is created inside the middle element. The child element sets margin (the value is the width of the left and right elements) to reserve the position of the left and right elements. The left, middle and right elements are set to float, and the left and right elements set a negative value of margin. However, this layout increases the DOM node and increases the amount of calculation generated by the rendering tree.

Flex layout

A convenient layout provided by css3.

Absolute positioning layout

Set position: relative and overflow: hidden for the container, because the reference of the absolutely positioned element is the ancestor element whose first position is not static. Left floats to the left, right floats to the right, and center uses absolute positioning. Set left and right to open both sides, and center set top: 0 and bottom: 0 to open the height.

Table layout

The advantage is that the height of the three columns can be unified.

Grid layout

The page can be divided into multiple areas, or used to define the size, location and layer relationship of internal elements. It may be the most powerful layout, which is extremely convenient to use, but the compatibility is not good.

Implementation of three column layout

1. Use float:

Element order: the middle box must be placed last, and the left and right elements are arranged arbitrarily
Principle: the left element floats left and the right element floats right
Disadvantages: when the browser is not wide enough to accommodate three elements, the rightmost element will be squeezed into the second row.

<div id="left">left</div>
<div id="right">right</div>
<div id="content">content</div>

#content{
    width: auto;
}
#left{
    float: left;
    width: 200px;
}
#right{
    float: right;
    width: 200px;
}

2. Use position:

Element order: random
Principle: use absolute to locate the left and right sides, and use margin to reserve the width of the left and right elements.
Disadvantages: when the browser page is insufficient to accommodate three elements, the width of the middle element will be reduced (minimum to 0), and the right element will cover the left element. The height on both sides cannot support the total height.

<div id="main">
    <div id="left">left</div>
    <div id="right">right</div>
    <div id="content">content</div>
</div>

#main{
    width: 100%;
    position: relative;
    margin: 0;
}
#left{
    width: 200px;
    position: absolute;
    top: 0;
    left: 0;
}
#right{
    width: 300px;
    position: absolute;
    top: 0;
    right: 0;
}
#content{
    margin: 0 300px 0 200px;
}

3. Use table to implement:

Element order: intermediate elements must be placed in the middle
Principle: the parent element sets display:table, and the child element sets display:table cell
Disadvantages: compatibility with IE8 +, troublesome design interval, which is not conducive to optimization.

<div id="main">
    <div id="left">left</div>
    <div id="right">right</div>
    <div id="content">content</div>
</div>

#main{
    width:100%;
    display:table;
}
#left{
    width:100px;
    display:table-cell;
}
#content{
    display:table-cell;
}
#right{
    width: 200px;
    display:table-cell;
}

4. flex implementation:

Element order: random
Principle: the parent element is set to flex, and the central element is set to flex:1
Disadvantages: flex has compatibility problems, and IE11 + supports well

5. grid implementation:

Element order: intermediate elements must be placed in the middle
Principle: set display:grid for parent element, define row height with grid template rows, and define column width with grid template columns
Disadvantages: compatibility IE10+

<div id="main">
    <div id="left">left</div>
    <div id="right">right</div>
    <div id="content">content</div>
</div>

#main{
    width:100%;
    display:grid;
    grid-template-rows: 100px;
    grid-template-columns: 300px auto 300px;
}

6. Grail layout

7. Dual wing layout

Implementation of two column equal height layout

1. Negative margin:

<div id="main">
    <div id="left">left</div>
    <div id="right">right</div>
</div>

#main{
    overflow: hidden;
}
#left,#right {
    width: 25%;
    float: left;
    padding-bottom: 5000px;
    margin-bottom: -5000px;
}

2. Using position

3. Implementation using table

4. flex implementation

5. grid implementation

Reference article:
https://www.cnblogs.com/spoem/p/13252609.html