“This is the 25th day of my participation in the November Gwen Challenge. See details of the event: The Last Gwen Challenge 2021”.
One, foreword
Last article, introduced the CSS variables related knowledge, mainly involves the following points:
- Introduction to CSS variables;
- Use of CSS variables;
- Scope of CSS variables;
- Inheritance of CSS variables;
- CSS variable compatibility;
Starting with this article, enter the introduction to CSS layout;
This article, the CSS layout for a brief overview;
Note: CSS layout is one of the most important things in CSS, like “rebounding…”
2. Introduction to the CSS layout
1. What is layout
- Layout refers to the overall structure or skeleton of an HTML page, equivalent to the concept of layout in newspapers and magazines.
- Layout, in fact, does not belong to the category of technology, but more inclined to a design idea;
2. Development of CSS layout
The table layout
The early layout was mainly table layout
- Advantages: easy to use, good compatibility;
- Disadvantages: Not easy to maintain;
With the increase of website complexity and the acceleration of business and demand changes, table layout began to seem inadequate.
David Siegel, inventor of the Table layout, said: “I poured the sauce and the noodles together and couldn’t separate it.”
CSS + DIV layout
At this point, you have your CSS + DIV layout
- Advantages: Low learning cost, high development efficiency, low maintenance cost;
- Disadvantages: difficult mobile terminal layout and responsive layout;
Later, with the explosion of mobile business and demand in the industry, CSS + DIV layouts were no longer sufficient;
Flex layout
CSS3 introduces the benefits of Flex layout: quick and responsive layouts without relying on other frameworks; Disadvantages: Compatibility needs IE9+, different browser kernel writing need to do compatibility processing;
Three, according to the layout skills classification
| The theme | describe | note |
|---|---|---|
| The table layout | Table layout | At present, it is basically not used in development |
| The inline – block layout | Make the element appear on a single line | |
| The box layout | Box layout | |
| Flexbox layout | Flexible box layout | Compatibility requirements, suitable for mobile terminal responsive adaptation |
| The grid layout | Grid layout | |
| Layout of the columns | Multi-column layouts | Achieve a three-column layout effect |
| Shapes layout | Achieve text surround effect |
Four, according to the layout effect classification
| The theme | describe | note |
|---|---|---|
| Centered layout | ||
| Two columns of the layout | ||
| Three column layout | ||
| The holy grail layout | ||
| Twin wing layout | ||
| Uniform layout | ||
| Such as the layout | ||
| Full screen layout | ||
| Multi-column layouts | CSS 3 new |
Five, often meet test questions
CSS layout knowledge is also an important point of the front-end interview, generally looking at the following:
- Given/unknown width and height, how to achieve horizontal and vertical centering effect;
- Name at least n ways to achieve a two-column or three-column layout;
- Mobile responsive layout;
- The Grail, wings, and so on…
Six, the end
This article gives a general introduction to CSS layout, mainly involving the following points:
- Introduction to CSS layout, the development history of layout;
- CSS layout skills, common layout effects, interview questions;
Next, CSS layout – Center layout – horizontal center layout;