In the process of making a page, layout of the page is a very important task, and it is usually the first step in making a page. Then, the first thing to consider when typesetting is what the general layout of the page looks like, so that it can be made quickly.
What are the usual page layouts? From a general perspective, it can be seen as three types: single-column layout, two-column layout and three-column layout. Let's talk about the general idea below. Some main codes will be designed, but it will not be particularly detailed. This article mainly emphasizes the idea and thinking framework. For very detailed and complete code, please see the reference at the end.
1. Single column layout . At this time, generally speaking from the point of view of website pages, the centered layout is more frequently used.
At this point, the core code is the center-aligned code added to the styles of these three elements.
The main code is:
.x {
margin: o auto;
}
2. Two-column layout . Typesetting two-column layout, the most important one is on a float. Everyone must know that the function of floating allows one element to "surround" another element. Then, the same can also be used to achieve the left and right two-column layout. The main code at this time is:
Left column: float: left
右列：overflow: hidden
3. Three-column layout . Most of the time, website pages need a three-column layout. At this time, three-column layout styles such as the commonly used Holy Grail layout will be mentioned. Then, the main code used at this time is to use upper left float for the left, center, and right columns respectively. That is: float: left.
Of course, the padding/margin must be adjusted accordingly to achieve the final layout.
In fact, there are other more commonly used layout styles for the three-column layout: contour layout and glue layout. If you don't consider the layout of several columns, there are layout modes such as flex layout and grid layout. These can also be seen, they are also very important to the page layout.