In-depth understanding of the position, float, and display attributes in CSS, as well as the relationship between the three

This article mainly talks about the position, float, and display attributes in CSS, as well as the relationship between the position, float, and display attributes. Friends in need can refer to it. I hope it can help you.

position attribute:

The position attribute indicates the positioning method of an element. There are 4 possible values: static, relative, absolute or fixed:

static: Default value, elements are rendered in the order they appear in the document flow
absolute: Absolute positioning, the element is relative to its first A positioned ancestor element (non-static) is used for positioning
fixed: The element is positioned relative to the browser window
relative: The element is positioned relative to its normal position, so "left:20" means that in Based on the normal position of the element, move it 20 pixels to the left.

float attribute:

The float attribute defines in which direction the element floats. Historically this property has always been applied to images, causing the text to wrap around the image, but in CSS, any element can be floated. A floated element creates a block-level box, regardless of what type of element it is.
If floating non-replaced elements, specify an explicit width; otherwise, they are made as narrow as possible.
Note: If there is very little space for a floating element on a row, the element will jump to the next row, and this process will continue until a certain row has enough space.

none: Default value. The element is not floated and appears where it appears in the text.
Left: The element floats to the left.
Right: The element floats to the right.

display attribute:

The display attribute specifies the box model (box) used by a DOM element. i.e. the type of box the element should generate.

Inline: Default. This element will be displayed as an inline element with no line breaks before or after the element.
None: This element will not be displayed.
Block: This element will be displayed as a block-level element, with line breaks before and after this element.
inline-block: Inline block element. This value causes an element to generate a block box and flow itself as a single inline box, similar to a replaced element. An element whose Display value is inline-block forms a block box model internally, and itself forms like an inline replaced element. That is, an element whose display value is inline-block can not only define the height and width like a block element, but also can Arranged in one line with inline elements (such as text). This effect can bring convenience in many places when designing the page. The most common one is when designing navigation. It can be centered like an inline element, or set like Set the size of a single menu like the block element, and you can also hide the text and display the background image through text-indent.
list-item: This element will be displayed as a list.
table: This element will be displayed as a block-level table ( Similar to

CSS box model (box model) Everything is a box

div, h1 or p elements often are called block-level elements. This means that these elements appear as a block of content, a "block box." In contrast, elements such as span and strong are called "inline elements" because their content appears in a line , that is, "inline box".

You can use the display attribute to change the type of box generated. This means that by setting the display attribute to block, you can make inline elements (such as the element) Behave like a block-level element. You can also set display to none so that the generated element has no box at all. In this case, the box and all its contents are no longer displayed and do not take up space in the document.
But In one case, a block-level element is created even if it is not explicitly defined. This happens when you add some text to the beginning of a block-level element (such as a div). Even if the text is not defined as a paragraph, It will also be treated as a paragraph:

 
some text 
Some more text.
 

In this case, the box is called an unnamed block box because it is not associated with a specifically defined element.

Css attributes: the relationship between display, position and float

If the display attribute of an element is set to none, then the box corresponding to the element will not be generated. In this case, float and position are ignored
Otherwise (display is not none), if the position attribute of an element Is set to absolute or fixed (both are absolute positioning). In this case, float is ignored (the calculated value of float is none), and the value of the display attribute is automatically calculated according to the following table. The position of the box depends on the attributes top, right, bottom, left and the container of the box
Otherwise (display is not none, and position is not absolute or fixed), if the value of float is not null (is left or right), then box It is floating and the value of display is calculated according to the following table
Otherwise (display is not none, and position is not absolute or fixed, float is none), if the element is the root element, the value of display is calculated according to the following table. (There is an exception in this case: defined in CSS2.1, when the specified value of display is list-item, the value of display in the calculation result is block or list-item)
Otherwise (display is not none, And if the position is not absolute or fixed, the float is none, and it is not the root element), then it will be displayed according to the specified display attribute value.

Table display attribute conversion:

Convert the specified value inline-table to table
Specify the value inline, table-row-group, table-column, table- column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-block Convert to block
Any other specified value will remain unchanged.

The above is the detailed content of In-depth understanding of the position, float, and display attributes in CSS, as well as the relationship between the three. For more information, please follow other related articles on the PHP Chinese website!