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 position of web pages relative to the normal layout flow, surrounding elements, parent containers or main viewports/windows. So, what are the CSS layout methods? Let's take a closer look at the CSS page layout method.

css to implement left and right layout

There are about six ways to implement left and right layout in css:

1. li implementation of table

The table tag has attributes that can realize left and right layout. tr represents a row and td represents a column. td can be added to tr to realize the left and right layout of the box.

2. inline-block

display:inline-block attribute is an attribute between row-level elements (display:inline) and block-level elements (display:block). It can be like Row-level elements can be laid out horizontally, and width and height attributes can be set like block-level elements, so they can be laid out left and right.

3. Float implements left and right layout

float floats, which separates the block area from the document flow of the parent label. The left attribute value makes the area move toward the parent label. The left border of the area is placed. The right attribute value causes the area block to be placed to the right border of the parent label. In this case, this attribute can be used to achieve left and right layout.

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

4. The flexbox attribute implements left and right layout

flexbox flexible box layout, display:box; This layout is mainly used for mobile front-end development.

5. Float margin implements left and right layout

float can make elements layout to the left or right. If a normal flow area is set in a sibling element, If the floating blocks are juxtaposed, the floating blocks will be at the boundary of the normal flow sibling area. However, the floating blocks will affect the layout of the area block, so the influence of the floating blocks needs to be cleared, so at this time, set the box outside the normal flow area block. Margin equal to the width of the floating block can clear the effect.

6. position:absolute left and right layout

Absolute positioning produces a layout phenomenon that is out of the document flow. Absolute can cover elements at any position and will not affect the layout of the normal flow, but it will cause shadowing.

css left-middle-right layout

Three-column adaptive layout: fixed width on both sides, and adaptive width of the middle block.

1. Absolute positioning method

Use absolute positioning on the left and right sides. Because absolute positioning is out of the document flow, the subsequent center will naturally flow to it, and then use the margin attribute , leaving the width of the left and right elements so that the middle element can adapt to the screen width.

2. Use the self-floating method

Use float:left and float:right for left and right respectively. float makes the left and right elements out of the document flow, and the middle element is normal In normal document flow, use margin to specify the left and right margins to position it. At the same time, the parent box sets overflow: auto; to prevent the child box from overflowing

3. Holy Grail Layout

The principle of Holy Grail layout is the negative margin method. To use the Holy Grail layout, you first need to include a p outside the center element. To include p, you need to set the float attribute to form a BFC and set the width, and this width must match the negative value of the margin of the left block.

css centered layout

Horizontal centering

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

For block-level elements (block): Set the width and margin-left and margin-right to auto, use max-width instead of width.

For multiple block-level elements: set text-align: center; for the parent element, and set display: inline-block; (vertical-alinga:top) for the child element; or use flex layout

flex layout: display:flex; justify-content:center

Vertical centering

For inline elements (inline)

Single row: set top and bottom Pandding is equal (or set line-height and height to be equal)

Multiple lines: Set the upper and lower padding to be equal; or set display: table-cell; and vertical-align: middle;; or use flex layout; or use pseudo Element

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

Known height: child elements use absolute layout top: 50%;, Then use negative margin-top to pull the child element up by half the height

Unknown height: the child element uses absolute layout position: absolute; top: 50%; transform: translateY(-50%);

Use Flexbox: select the direction, justify-content: center;

css to achieve horizontal and vertical centered layout

Defined height and width: first use absolute layout top: 50 %; left: 50%;, and then use a negative margin equal to half the width and height to pull back the child elements

The height and width are unknown: first use absolute layout top: 50%; left: 50%;, Then set transform: translate(-50%, -50%);

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

box-sizing

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

Percent width

Percent is a unit of measurement relative to the containing block. It is useful for images and box modules: for example, the image width is always 50% of the container width, even if the window is reduced.

css implements inline-block layout

inline-block element affects vertical centering, add vertical-align: top.

Recommended related articles:

CSS Layout Holy Grail Layout & Double Flying Wing Layout_html/css_WEB-ITnose

CSS layout layout model

What are the skills of CSS layout

The above is the detailed content of What are the CSS layout methods? Summary of css layout methods. For more information, please follow other related articles on the PHP Chinese website!