1 plan
Regardless of the three-column layout or the two-column layout,
as long as the left and right layout, more floats (float, absolute, flex, table, grid);
up and down layouts, no float, (absolute, flex, table, grid).
2 What are the advantages and disadvantages of each program?
1) Floating float is
excellent: simple.
Lack: separate from the document flow and need to be combined with the BFC application.
Note: The floating block level needs to be written in the front! ! ! Float is only useful in left and right layouts
diaplay: left/right
2) Absolute positioning absolute
excellent: simple
Lack: out of the document flow, need to combine with BFC applications, more code
父 position: relative;
子 position: absolute;
3) flex layout
excellent: simple and fast, good compatibility, solve the shortcomings of floating and absolute positioning
父 diaplay: flex;
子 flex: 1; //=flex: 1 1 0;
4) Table layout
Excellent: good compatibility.
Shortage: the height of each column will change at the same time; the table needs to be rendered first, and the page generation speed is delayed.
Note: The block level set to "display: table" needs to set width: 100%
父 display: talble;
子 display: table-cell;
5) Grid layout
Excellent: It can realize the two-dimensional complex operation of multiple rows and multiple columns, with better compatibility and simplified code
父
display: grid;
grid-template-rows: 100px;
grid-template-columns: 10px 20px auto;
After some conditions in question 3 are removed, which solutions can still be used? What can't be?
Take the “three-column layout: the known height is 100px, the left and right widths are fixed, and the middle is adaptive
” as an example. If the “fixed height” condition is removed and the input content in the middle column is increased, which ones can still be used and which ones can’t be used?
-Float cannot be used, too much content in the middle will squeeze to the left column
-absolute cannot be used, the middle content will be squeezed down and out
-flex can be used, the left and right columns will follow the middle column to adapt to open
-table layout can be used, left and right middle Will automatically expand-the
grid layout cannot be used, the height is not expanded
4 Which scheme has the best compatibility?
flex layout, grid layout