Web front-End Tutorial: CSS layout terrorize is here.

CSS Layout

Layout is an important part of CSS, this article summarizes the common techniques in CSS layout, including the common horizontal center, vertical center method, as well as single-column layout, multi-row layout of multiple implementations (including the traditional box model layout and comparison of the new Flex layout implementation), hoping to bring some help to the needs of the small partners.

Directory

1. Common Centering Method: Horizontal Center, vertical Center,

2. Single-Column layout

3. Two columns & three column layouts: Float+margin,position+margin, Holy Grail layout (float+ negative margin), dual wing layout (float+ negative margin), Flex layout

If you want to learn to Exchange HTML5CSS3 and other Web front-end technology, want to learn more about the front-end aspects of the content, you can join our QQ Learning Group: 27062964, learn to communicate, improve themselves, have learning materials and source sharing. or click the link directly join QQ Group: Https://jq.qq.com/?_wv=1027&k=48DmPsZ

Summarize

1. Common Centering method

Centering is common in layouts, we assume that the DOM document structure is as follows, and the child elements are centered in the parent element:

Center horizontally

Whether the child element is an inline element or a block element, the width must be fixed or the width is undefined, and the layout scheme is different. The following analysis:

Inline element: Sets the Text-align:center for the parent element;

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

Variable-width block element: Sets the child element to Display:inline, and then sets the Text-align:center on the parent element;

General Scenario: Flex layout, set display:flex;justify-content:center for parent elements;

Center vertically

Vertical centering is a different scheme for child elements that are single-line inline text, multi-inline text, and block elements.

Parent element must be a single-line inline text: Sets the height of the parent element equal to the row height line-height

Parent element must be, child element is multi-line inline text: Set parent element's Display:table-cell or Inline-block, then set vertical-align:middle;

Block element: Sets the child element position:fixed (absolute), and then sets the Margin:auto;

General Scenario: Flex layout, setting {Display:flex; align-items:center;} to the parent element.

2. Single-Column layout

Features: fixed width, horizontal centering

There are two types of common single-column layouts:

One is that the header, content, and footer widths are the same, and generally do not fill the widest width of the browser, but when the width of the browser is smaller than its maximum width, the width is adaptive.

One is the header, the footer width is the width of the browser, but content and the contents of the header and footer are not full browser width.

For the first, set width or max-width to the header, content, footer, and center through Margin:auto.

Dom Documentation:

CSS Checklist:

For the second, the content width of the header and footer is 100%, but the header, the content area of the footer, and the contents are uniformly set max-width, and are centered by Margin:auto.

Dom Documentation:

CSS Checklist:

3. Two columns & three column layouts

The two-column layout is characterized by the fixed width of the sidebar and the adaptive width of the main bar. The three-column layout is characterized by a fixed width of two columns on both sides and an adaptive width for the middle column.

The two-column layout and the three-column layout are written together because the layout of the two-column layout can be thought of as a three-column layout that removes a sidebar. For the traditional method of implementation, the main discussion of the top three layouts, the classic two-column layout with the sidebar and a three-column layout with the left and right sidebar, for the flex layout, the implementation of five layouts.

A. Float+margin

Principle: Set two sidebar to the left and right floating, the middle column through the margin to make room for two sidebar, the width of the middle column according to the browser window adaptive.

Dom Documentation:

Layout steps:

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

Set the left and right margins on the main panel, the value of Margin-left is the width of the left column, and the Margin-right value is the width of the right column.

CSS Checklist:

Some notes:

* Note the order in which the DOM documents are written, write the sidebar first, then the main panel, and the sidebar will be squeezed into the next column (both the Grail layout and the dual wing layout will be used). * This layout is simple and straightforward, but the disadvantage is that the sidebar is rendered first instead of the more important main panel.

Two-column implementation method

If you have a two-column layout with sidebar on the left, remove the right-hand column, and do not set the Margin-right value of the main panel. Vice versa.

B. Position+margin

Principle: Through the absolute positioning of the two side bar fixed, the same through the margin to the two side bar to make room, the middle column adaptive.

Dom Documentation:

Layout steps:

Set the width on both sides of the sidebar, set the positioning mode is absolute positioning.

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

Set the left and right margins on the main panel, the value of Margin-left is the width of the left column, and the Margin-right value is the width of the right column.

CSS Checklist:

Some notes:

Compared with the previous method, the method is to fix the position of the side bar by positioning.

If the middle column has a minimum width limit, or an inner element with width, the browser window is small to a certain extent, and the main panel and sidebar overlap.

Two-column implementation method

If you have a two-column layout with sidebar on the left, remove the right-hand column, and do not set the Margin-right value of the main panel. Vice versa.

C. Chalice layout (float + negative margin + padding + position)

Principle Description:

The main panel is set to a width of 100%, the main panel and the two sidebar are floating, often left floating, then two side bars will be squeezed by the main panel. The floating sidebar is pulled up with a negative margin, the negative margin of the left column is 100%, just the width of the window, so it runs from the left side of the main panel to the left side of the main panel, and the right column floats to the left below the main panel, where the negative margin is floating to the right of the main panel alignment. In order to avoid the sidebar blocking the contents of the main panel, the outer layer set the left and right padding values for the left and right side of the width of the sidebar to make room for the sidebar, when the main panel width decreased. Since the negative margin of the sidebar is relative to the main panel, the two sidebar will not be docked on the left or right side as we would like, but with the shrinking main panel moving toward the middle. With relative layout, adjust the two sidebar to the appropriate position.

Dom Documentation:

Layout steps:

All three are set to float to the left.

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

Set negative margin, sub set negative left margin to 100%,extra sets the negative left margin to a negative self-width.

Set the padding value of main to make room for the left and right two sub-panels.

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

CSS Checklist:

Some notes

The order in which DOM elements are written must not be changed.

When the main content portion of the panel is smaller than the sub-panel width on both sides, the layout is lost. You can avoid problems by setting the Min-width property of main or using a double-wing layout.

Two-column implementation method

If you have a two-column layout with sidebar on the left, remove the right-hand column, and do not set the Padding-right value of the main panel. Vice versa.

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

Principle Description:

The idea of a double-wing layout and the Grail layout is somewhat similar, with both floating and negative margins, but the double-wing layout has been improved on the Grail layout, a div is added to the main element, and a margin is set, as the negative margins are relative to main-wrap for both sides of the bar. The change in the margin value of main does not affect the two sidebar, so the steps to set a relative layout on the side columns are omitted.

Dom Documentation:

Layout steps:

All three are set to float to the left.

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

Set negative margin, sub set negative left margin to 100%,extra sets the negative left margin to a negative self-width.

Set the margin value of main to make room for the left and right two sub-panels.

CSS Checklist:

Some notes

The Holy Grail uses the padding, while the double wing uses the margin, which solves the Grail layout main's minimum width cannot be less than the disadvantage of the left column.

The double-wing layout does not have to set relative layout, as well as the corresponding left and right values.

By introducing relative layout, we can implement various combinations of three columns layout, such as setting position:relative on the right column; left:190px, you can implement the Sub+extra+main layout.

Two-column implementation method

If it is a two-column layout with sidebar on the left, remove the right-hand column, and do not set the Margin-right value of Main-wrap. Vice versa.

Here are the flex layout codes for the five layouts:

Dom Documentation:

CSS Checklist

The code for the flex layout is surprisingly concise and very generic, compared to several traditional layout schemes described earlier, with a simple three-line CSS that implements a common five layouts.

Summarize

The traditional layout method is based on the box model, depending on the display property +position attribute +float property, logic is relatively complex, for some special effects, such as vertical centering, especially complex and cumbersome. The Flex container in the flex layout dynamically adjusts the aspect ratio and order of the child elements according to the actual available space, allowing the elements to take advantage of the available space as much as possible, and to avoid exceeding it by shrinking. The flex layout provides a simple, complete, responsive layout solution.

You are welcome to join the Learning Exchange Group if you encounter any problems or want to acquire learning resources in the learning process.
343599877, we learn the front-end together!

Web front-End Tutorial: CSS layout terrorize is here.