Web front-end tutorial CSS layout example

##CSS Layout

Layout is an important part of CSS. This article summarizes the basics of CSS layout. Commonly used techniques, including commonly used horizontal centering and vertical centering methods, as well as various implementation methods of single-column layout and multi-column layout (including traditional box model layout and relatively new flex layout implementation), hope to bring it to friends who need it some help.

Table of Contents

1. Commonly used centering methods: horizontal centering, vertical centering,

2. Single-column layout

3. Two-column & three-column layout: float+margin, position+margin, holy grail layout (float+negative margin), double flying wing layout (float+negative margin), flex layout

If you want to learn and communicate web front-end technologies such as html5css3, and want to know more about front-end aspects For content, you can join our QQ learning group: 27062964, learn and communicate together, improve yourself, and share learning materials and source code. Or click on the link to join the QQ group directly:

Summary

1. Commonly used centering methods

Centering is very common in layouts , we assume that the DOM document structure is as follows, the child element should be centered in the parent element:

Horizontal centering

Whether the child element is an inline element or a block element, the width is certain or undetermined, the layout scheme adopted is different. Let’s analyze:

Inline elements: Set text-align:center on the parent element;

Fixed-width block elements: Set the left and right margin values ​​to auto;

Indefinite width Block element: Set the child element to display:inline, and then set text-align:center;

General solution on the parent element: flex layout, set display:flex;justify-content:center; on the parent element

Vertical centering

The vertical centering scheme is different for single-line inline text, multi-line inline text and block elements.

The parent element is certain, and the child element is a single line of inline text: set the height of the parent element equal to the line height line-height

The parent element is certain, and the child element is multi-line inline text: set the parent element display:table-cell or inline-block, then set vertical-align:middle;

Block elements: set sub-element position:fixed (absolute), and then set margin:auto;

General solution: flex layout, set {display:flex; align-items:center;} to the parent element.

2. Single-column layout

Features: fixed width, horizontal centering

There are two common single-column layouts Type:

One is that the header, content, and footer widths are all the same, which generally does not occupy the maximum width of the browser, but when the browser width is reduced below its maximum width, the width will adapt .

One is that the width of the header and footer is the browser width, but the content and the content in the header and footer will not fill the browser width.

For the first type, set width or max-width uniformly for header, content, and footer, and use margin:auto to achieve centering.

DOM Document:

CSS Manifest:

For the second type, the content width of the header and footer is 100%, but the content area and content of the header and footer are uniformly set to max-width, and centered through margin:auto.

DOM Document:

CSS Manifest:

3. Two-column & three-column layout

The characteristic of the two-column layout is that the sidebar has a fixed width. Main column adaptive width. The three-column layout is characterized by two fixed-width columns on both sides and an adaptive width in the middle column.

The reason why two-column layout and three-column layout are written together is because the two-column layout can be regarded as a three-column layout with one sidebar removed, and the layout ideas are similar. For the traditional implementation method, we mainly discuss the first three layouts in the above picture, the classic two-column layout with side columns and the three-column layout with left and right side columns. For the flex layout, the five layouts in the above picture are implemented.

a. float+margin

Principle description: Set the two side columns to float left and right respectively. The middle column uses the outer margin to make space for the two side columns. The width of the middle column Adapt to the browser window.

DOM document:

Layout steps:

Set the width of the sidebars on both sides, add a left float to the left column, and add a float to the right column.

Set the left and right margins for the main panel. The value of margin-left is the width of the left column, and the value of margin-right is the width of the right column.

CSS list:

Some instructions:

* Pay attention to the writing order of the DOM document, first write two For the side column, write the main panel. After replacement, the side column will be squeezed into the next column (used in both Holy Grail layout and Double Flying Wing layout). * This layout method is relatively simple and clear, but the disadvantage is that the sidebar is rendered first instead of the more important main panel.

How to implement two columns

If it is a two-column layout with a sidebar on the left, remove the right column and do not set the margin-right value of the main panel. The other operations are the same. vice versa.

b. position+margin

Principle description: The two side columns are fixed through absolute positioning, and the margins are also used to make space for the two side columns, and the middle column is adaptive.

DOM document:

Layout steps:

Set the width of the sidebars on both sides and set the positioning method for absolute positioning.

Set the top value of both sides of the column to 0, set the left value of the left column to 0, and set the right value of the right column to 0.

Set the left and right margins for the main panel. The value of margin-left is the width of the left column, and the value of margin-right is the width of the right column.

CSS List:

Some notes:

Compared with the previous method, this method The position of the sidebar is fixed through positioning.

If the middle column contains a minimum width limit, or contains an internal element with a width, and the browser window is small enough, the main panel and the side column will overlap.

How to implement two columns

If it is a two-column layout with a sidebar on the left, remove the right column and do not set the margin-right value of the main panel. The other operations are the same. vice versa.

c. Holy Grail layout (float + negative margin + padding + position)

Principle description:

Set the width of the main panel to 100%, the main panel and the two side columns All are set to float, usually left floating. At this time, the two sidebars will be squeezed out by the main panel. Pull up the floating sidebar through negative margins. The negative margin of the left column is 100%, which is exactly the width of the window. Therefore, it will run from the left side under the main panel to the left side aligned with the main panel. The right side column is here. When floating to the left below the main panel, set the negative margin to negative and its own width just floats to the right of the main panel alignment. In order to prevent the sidebar from blocking the content of the main panel, set the left and right padding values ​​in the outer layer to the width of the left and right sidebars to make room for the sidebars. At this time, the width of the main panel is reduced. Since the negative margins of the side columns are relative to the main panel, the two side columns will not be docked on the left and right sides as we ideally want, but will move closer to the middle along with the reduced main panel. At this time, use relative layout and adjust the two sidebars to the corresponding positions.

DOM document:

Layout steps :

All three are set to float to the left.

Set the main width to 100% and set the width of both side columns.

Set negative margins, sub sets the negative left margin to 100%, and extra sets the negative left margin to the negative own width.

Set the padding value of main to leave space for the left and right sub-panels.

Set the two sub-panels to relative positioning, the left value of sub is the negative sub width, and the right value of extra is the negative extra width.

CSS List:

Some instructions

The writing order of DOM elements must not be changed.

When the main content part of the panel is smaller than the width of the sub-panels on both sides, the layout will be messed up. You can avoid problems by setting the min-width attribute of main or using a double-wing layout.

How to implement two columns

If it is a two-column layout with a sidebar on the left, remove the right column and do not set the padding-right value of the main panel. The other operations are the same. vice versa.

d. Double flying wing layout (float + negative margin + margin)

Principle description:

The ideas of double flying wing layout and Holy Grail layout are somewhat similar, both use floating and Negative margins, but the double flying wing layout has improved on the Holy Grail layout. It adds a layer of div on the main element and sets margin. Since the negative margins of both sides of the columns are relative to the main-wrap, the main Changes in the margin value will not affect the two side columns, so the step of setting the relative layout of the two side columns is omitted.

DOM document:

Layout steps:

All three are set to float to the left.

Set the main-wrap width to 100% and set the width of the two sidebars.

Set negative margins, sub sets the negative left margin to 100%, and extra sets the negative left margin to the negative own width.

Set the margin value of main to leave space for the left and right sub-panels.

CSS list:

Some explanations

The Holy Grail uses padding, while the double flying wings use margin , which solves the shortcoming that the minimum width of the main of the Holy Grail layout cannot be smaller than the left column.

Double flying wing layout does not need to set relative layout and corresponding left and right values.

By introducing relative layout, various combinations of three-column layout can be realized. For example, setting position: relative; left: 190px; on the right column can realize sub+extra+main layout.

Implementation method of two columns

If it is a two-column layout with a sidebar on the left, remove the right column and do not set the margin-right value of main-wrap. The other operations are the same. vice versa.

The following is the flex layout code for the five layouts:

DOM document:

CSS list

Compared with several traditional layout schemes mentioned before, the flex layout code is extremely concise and very versatile, using simple three lines of CSS That is, five common layouts are implemented.

Summary

The traditional layout method is based on the box model and relies on the display attribute + position attribute + float attribute. The logic is relatively complex, and for implementation Some special effects, such as vertical centering, are particularly complex and cumbersome. The flex container in flex layout can dynamically adjust the aspect ratio and order of sub-elements according to the actual available space, so that the elements can utilize the available space as much as possible, while also shrinking to avoid exceeding it. Flex layout provides a simple, complete, and responsive layout solution.

The above is the detailed content of Web front-end tutorial CSS layout example. For more information, please follow other related articles on the PHP Chinese website!