What are the CSS layouts? Common CSS layout methods (with code)-CSS Tutorial-php.cn

What are the css layouts? CSS layout can make the page look more beautiful and tidy. The following article summarizes several common layout methods in CSS, let us take a look in detail.

Horizontal centered layout

1. Margin fixed width

 Demo

Copy after login

Running results ：

What are the CSS layouts? Common CSS layout methods (with code)

Everyone must have seen it on the front end. The fixed width is horizontally centered. We can also use the following to achieve variable width

2. table margin

 Demo

Copy after login

Run result:

What are the CSS layouts? Common CSS layout methods (with code)

display: The table is similar to the block element in performance, but the width is the width of the content.

No need to set the parent element style (supports IE 8 and above) compatible with IE 8. The following versions need to be adjusted to

3, inline-block text-align

 Demo

Copy after login

Good compatibility (even compatible with IE 6 and IE 7)

4. absolute margin-left

 Demo

Copy after login

Fixed width

Compared with using transform, it has better compatibility

5. Absolute transform

 Demo

Copy after login

Absolute positioning is out of the document flow and will not affect subsequent elements The layout is affected.

transform is a CSS3 property and has compatibility issues

6, flex justify-content

 Demo

Copy after login

You only need to set the parent node attribute, no need to set the child Element

flex has compatibility issues

Vertical centering:

1, table-cell vertical-align

 Demo

Copy after login

Good compatibility (versions below IE 8 need to adjust the page structure to table

2, absolute transform

Powerful absolute for Of course, this small problem is also very simple

 Demo

Copy after login

Absolute positioning is out of the document flow and will not affect the layout of subsequent elements. But if the absolutely positioned element is the only element, the parent element will also lose its height.

Transform is a CSS3 attribute and has compatibility issues
Horizontal centering, which can also be achieved with margin-top, the principle is horizontal centering

3. flex align-items

If absolute is powerful, then flex is just smiling, because he is the strongest...but it has compatibility issues

 Demo

Copy after login

Horizontal and vertical centering ：

1. Absolute transform

 Demo

Copy after login

Absolute positioning is out of the document flow and will not affect the layout of subsequent elements.

transform is a CSS3 attribute and has compatibility issues

2. inline-block text-align table-cell vertical-align

 Demo

Copy after login

Good compatibility

3. flex justify-content align-items

 Demo

Copy after login

You only need to set the parent node attributes, no need to set the child elements

Painful compatibility issues

One column has a fixed width and one column is adaptive

1. float margin

  left
 
  right
 right

Copy after login

IE 6 will have a 3-pixel BUG. The solution can be to add margin-left:-3px to .left. Of course, there are also solutions to solve this small bug as follows:

  left
 
   right
 right

Copy after login

This method There will be no 3-pixel BUG in IE 6, but .left cannot be selected, and .left {position: relative} needs to be set to increase the level. Note that this method adds unnecessary structure to the HTML text.
Arrogant programmers should give up browsers that are too low version

2. float overflow

  left
 
  right
 right

Copy after login

Setting overflow: hidden will trigger BFC mode (Block Formatting Context) block-level format context. What is BFC? In layman's terms, no matter what you do inside BFC, the outside world will not be affected. This method has a simple style but does not support IE 6

3. The display characteristics of table

  left
 
  right
 right

Copy after login

table are the cell width of each column and must be equal to the table width. table-layout: fixed can speed up rendering and also set layout priority. Margin cannot be set in table-cell, but the spacing can be set through padding

4, flex

  left
 
  right
 right

Copy after login

Low version browser compatibility issues

Performance The problem is that it is only suitable for small-scale layout
After we learn the layout of one column with fixed width and one column with adaptive layout, we can also easily implement multiple columns with fixed width, one column with adaptive multiple columns with variable width and one column with adaptive layout. We will not explain them one by one here. , you can try it yourself, or you can consolidate the

etc. distribution patternyou learned earlier:

1, float