Web Front-end Tutorial: CSS layout is here, webcss

Web Front-end Tutorial: CSS layout is here, webcss
 

CSS layout

Layout is an important part of CSS. This article summarizes common techniques in CSS layout, including common horizontal center and vertical center methods, as well as multiple implementation methods for Single-Column Layout and multi-column layout (including the traditional box model layout and the new flex layout implementation), we hope to provide some help to our partners.

Directory

1. Common center Methods: horizontal center, vertical center,

2. Single Column Layout

3. Two-column and three-column layout: float + margin, position + margin, Holy Grail layout (float + negative margin), dual-flying wing layout (float + negative margin), and flex Layout

If you want to learn and Exchange web Front-end technologies such as html5css3 and want to learn more about the front-end content, you can join our QQ Learning Group: 27062964 to learn and communicate with each other and improve yourself, share learning materials and source code. Or click the link to join the QQ group: https://jq.qq.com /? _ Wv = 1027 & k = 48 DmPsZ

 

Summary

1. Common center Methods

Center is common in layout. We assume that the DOM document structure is as follows. child elements must be centered in the parent element:

 

 

Horizontal Center

The child element is a row element or a block element, and the width must be uncertain. The layout scheme is different. The following is an analysis:

Line Element: set text-align: center for the parent element;

Fixed width block element: Set the left and right margin values to auto;

Wide block element: Set the child element to display: inline, and set text-align: center on the parent element;

General Solution: flex layout, set display: flex; justify-content: center for the parent element;

Vertical center

Vertical center uses different solutions for single-line inline text, multi-line inline text, and block elements for child elements.

The parent element must be a single line of inline text: Set the height of the parent element to be equal to the line height.

The parent element must be multiple lines of inline text: Set the display: table-cell or inline-block of the parent element, and then set vertical-align: middle;

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

General Solution: flex layout. set {display: flex; align-items: center;} for the parent element ;}.

 

2. Single Column Layout

Features: fixed width and horizontal center

There are two common single-column la s:

One is that the headers, content, and footer have the same width, which generally does not occupy the widest width of the browser. However, when the browser width is reduced below its maximum width, the width is adaptive.

One is that the header and footer width are the browser width, but the content and content in the header and footer do not occupy the browser width.

For the first type, Set width or max-width for the header, content, and footer, and center by using margin: auto.

DOM document:

 

CSS list:

 

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 the center is implemented through margin: auto.

DOM document:

 

CSS list:

 

 

3. Two-column and three-column layout

 

The layout of the two columns is characterized by fixed width of the sidebar and adaptive width of the primary column. The layout of the three columns is characterized by the fixed width of the two columns on both sides and the adaptive width of the middle column.

The two-column layout and the three-column layout are written together because the two-column layout can be seen as removing the three-column layout of one column. The layout idea is similar. For the traditional implementation method, we mainly discuss the first three la S, the classic two-column layout with a sidebar and the three-column layout with a left and right sidebar. For the flex layout, we have implemented five la S.

A. float + margin

Principle Description: Set the two sidebar to float left to right, and the middle column to free up space for the two sidebar through the outer margin. The width of the middle column is adaptive according to the browser window.

DOM document:

 

Layout steps:

Set the width of the sidebar on both sides, add the left float to the left sidebar, and add the float to the right sidebar.

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

CSS list:

 

Notes:

* Pay attention to the writing sequence of the DOM document. First, write the columns on both sides and then the main panel. After the change, the columns will be squeezed into the next column (both the holy land layout and the dual-flying wing layout will be used ). * This layout method is relatively simple and clear, but the disadvantage is that the sidebar is rendered first, rather than the main panel.

Implementation of two columns

If there is a two-column layout with a sidebar on the left, remove the right column and do not set the margin-right value for the main panel. Other operations are the same. And vice versa.

B. position + margin

Principle Description: The two sidebar is fixed by absolute positioning, and the outer margin is used to free up space for the two sidebar, and the middle column is adaptive.

DOM document:

 

Layout steps:

Set the width of the two sides of the sidebar, and set the positioning method to absolute positioning.

Set the top value of both columns to 0, the left value of the left column to 0, and 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 sidebar, and the value of margin-right is the width of the right sidebar.

CSS list:

 

Notes:

Compared with the previous method, this method uses positioning to fix the position of the sidebar.

If the middle column contains the minimum width limit or an internal element with the width, the browser window will be as small as a certain extent, and the main panel and the sidebar will overlap.

Implementation of two columns

If there is a two-column layout with a sidebar on the left, remove the right column and do not set the margin-right value for the main panel. Other operations are the same. And vice versa.

C. layout of the Holy Grail (float + negative margin + padding + position)

Principles:

The width of the main panel is set to 100%, and the main panel and two sidebar are set to float, usually left floating, then the two Sidebar will be squeezed down by the main panel. The floating sidebar is pulled up with the negative margin. The negative margin of the left sidebar is 100%, which is the width of the window. Therefore, the left side of the main panel is directed to the left side that is aligned with the main panel, the right column floats on the left of the main panel, and the width of the Self-orientation with the negative margin is set to the right of the alignment of the main panel. To prevent the content of the main panel from being blocked by the sidebar, set the Left and Right padding values on the outer layer to the width of the left and right sides of the sidebar to free up space for the sidebar. In this case, the width of the main panel is reduced. Because the negative margin of the sidebar is relative to the primary panel, the two sidebar does not dock on the left and right sides as we would ideally, but moves closer together with the scaled-down primary panel. In this case, use the relative layout to adjust the two sidebar to the corresponding position.

DOM document:

 

 

 

 

Layout steps:

All three are set to float left.

Set the main width to 100%, and set the width of the columns on both sides.

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

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

Set the two sub-panels as 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:

 

Notes

The writing sequence of DOM elements cannot be changed.

When the main content of the Panel is smaller than the width of the sub-Panel on both sides, the layout will be messy. You can avoid the problem by setting the min-width attribute of main or using the dual-flying wing layout.

Implementation 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 padding-right value for the main panel. Other operations are the same. And vice versa.

D. Dual-flying wing layout (float + negative margin + margin)

Principles:

The concept of the dual-flying wing layout is somewhat similar to that of the holy cup layout, both of which use floating and negative margins. However, the dual-flying wing layout is improved in the holy cup layout and a div is added to the main element, and set margin. Because the negative margin of the columns on both sides is relative to the main-wrap, the change of the main margin value will not affect the two columns, therefore, you do not need to set a relative layout for the columns on both sides.

DOM document:

 

 

 

Layout steps:

All three are set to float left.

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

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

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

CSS list:

 

Notes

The Holy Land Uses padding, while the margin of the Flying Wings solves the disadvantage that the minimum width of the main of the holy land layout cannot be smaller than the left sidebar.

You do not need to set the relative layout and the corresponding left and right values for the dual-flying wing layout.

By introducing relative layout, you can achieve a variety of combinations of three-column layout. For example, you can set position: relative; left: margin PX; on the right column to achieve sub + extra + main layout.

Implementation 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. Other operations are the same. And vice versa.

The following is the flex layout code for five la s:

DOM document:

 

CSS list

 

Compared with several traditional layout schemes mentioned earlier, the code of the flex layout is very concise and common, and five common la s are implemented using simple three-line CSS.

 

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. It is especially complicated and cumbersome to implement some special effects, such as vertical center. In the flex layout, the flex container can dynamically adjust the aspect ratio and sequence of sub-elements based on the actual available space, so that the elements can use the available space as much as possible, and avoid exceeding the limit by narrowing down. Flex layout provides a simple, complete, and responsive layout solution.

If you have any questions during the learning process or want to obtain learning resources, join the learning exchange group.
343599877. Let's learn the front-end together!