What are the CSS layout methods? Summary of CSS Layout methods

CSS page layout is very useful in Web pages, CSS page layout can control the relative normal layout flow, peripheral elements, parent container, or the location of the main viewport/window, so what is the CSS layout method? Let's take a look at how CSS pages are laid out.

CSS implementation left and right layout

There are about six ways that CSS implements left and right layouts:

1. The Li Implementation of table

Table tags are capable of implementing the left and right layout of the property, TR represents a row, TD represents a column, TR can add TD to implement the left and right layout of the box.

2. Inline-block

The Display:inline-block property is a property between a row-level element (Display:inline) and a block-level element (Display:block) that can be horizontally laid out as a row-level element, or as a block-level element to set a width-height property. So you can do the left and right layout.

3. Float to achieve left and right layout

Float floats, leaving the block area out of the parent label's document flow, leaving the range to the left edge of the parent label area, and the right property value so that the area block is placed to the border of the parent label, so that the property can be used to implement the left-

The float layout uses a staggered layout for the layout of the rear nodes, and the inline-block uses a normal layout.

4. Flexbox property for left and right layout

Flexbox Flexible box layout, display:box; This type of layout is primarily used for mobile front-end development.

5. Float+margin to achieve left and right layout

float allows the element to be left or right side-by-side layout, if a normal flow in the sibling element is set to the same area as the floating block, then the floating block is at the boundary of the normal flow sibling area, but the floating block affects the layout of the block, so to clear the effect of the floating block, So setting the box outside the normal flow area block margin equals the width of the floating block to clear the effect.

6. Position:absolute Around layout

Absolute positioning, resulting in a layout phenomenon that is out of document flow. Absolute can overwrite elements of any location without affecting the layout of the normal flow, but will result in cloaking.

CSS left middle right layout

Three-column Adaptive layout: Fixed width on both sides, the middle block width adaptive.

1. Absolute Positioning method

Position the left and right sides using absolute, because absolute positioning is out of the flow of the document, the center will naturally flow to the top, and then use the margin property to leave the width of the left and right elements, allowing the intermediate elements to adapt to the screen width.

2. Using self-floating method

The left and right two elements are separated from the document flow by using Float:left and Float:right,float respectively, and the intermediate elements are normal in the normal document flow, using margin to specify the left and right margins to locate them. At the same time the parent box is set Overflow:auto; To avoid a child box overflow

3. Holy Grail Layout

The principle of the Grail layout is the margin negative method. With the Grail layout, you first need to include a p outside the center element, which contains p to set the Float property to form a BFC, and to set the width to match the margin negative value of the left block.

CSS Center Layout

Center horizontally

For in-line elements (inline): text-align:center;

For block-level elements (blocks): Set the width and Marigin-left and margin-right are set to auto, using max-width instead of width.

For multiple block-level elements: Set text-align:center on the parent element, set display:inline-block on the child element, or vertical-alinga:top, or use the Flex layout

Flex layout: Display:flex; justify-content:center

Center vertically

For in-line elements (inline)

Single line: Sets the upper and lower pandding equal (or sets Line-height and height equal)

Multiple lines: Set the upper and lower pandding equal, or set Display:table-cell; and vertical-align:middle;; or use flex layouts, or use pseudo-elements

For block-level elements (block): (the first two scenarios below, the parent element needs to use relative layout)

Known height: The child element uses the absolute layout top:50%, and then uses the negative margin-top to pull up half the height of the element

Unknown height: Child elements use absolute layout position:absolute; top:50%; Transform:translatey (-50%);

Use Flexbox: Select direction, Justify-content:center;

CSS for horizontal vertical Center layout

Fixed height fixed width: first with absolute layout top:50%; left:50%, re-pull the element back with the same negative margin as half the width and height

Height and width unknown: first with absolute layout top:50%; left:50%;, and then Set Transform:translate (-50%,-50%);

Use Flexbox:justify-content:center; Align-items:center.

Box-sizing

When you set an element for Box-sizing:border-box; , the padding and borders of this element no longer increase its width.

Percent width

A percentage is a unit of measure relative to the containing block. It is useful for pictures and box molds: For example, the width of the image is always 50% of the width of the container, even if the window shrinks.

CSS implementation Inline-block layout

Inline-block elements affect vertical centering, plus vertical-align:top.