A detailed explanation of the element positioning method in CSS

1. Box model

box model is the rectangular box that the browser generates for each HTML element in the page.

These boxes are arranged on the page according to the Visible Layout model (visual formatting models). The visible page layout is dominated by three properties: The Position property, the display property, and the float property. Where the Position property controls the position of the elements on the page, the display property controls whether the element is stacked, side-by or not appearing on the page at all, and the Float property provides a way to control the elements to form a multiple-column layout.

The box attributes are divided into three groups:

Border (border). You can set the width, style, and color of the border.

Inner margin (padding). You can set the space between the box content area and the border.

Outer margin (margin). You can set the spacing between the box and adjacent elements.

You can understand this. Box properties: The outer margin is a border that pushes other elements outward, and the inner margin is the content of the element that is pushed inward from the border.

CSS provides shorthand properties for borders, interior margins, and outer margins respectively. In each shorthand declaration, the order of the property values is up, right, down, and left (clockwise rotation).

Example: margin:5px 10px 12px 8px;

Note: There are spaces between 4 values, but not other delimiters (such as commas). You don't even have to put a 4 value

All written-if which value is not written, use the value of the edge.

Example: margin:12px 10px 6px;

Note: Missing the last value (left), using the value (10px) on the Edge (right), namely: margin:12px 10px 6px 10px.

Example: margin:12px 10px;

Note: The last two values (bottom and left) are missing, using the top (12px) and the Right (10px), namely: margin:12px 10px 12px 10px;

Example: margin:12px;

Description: Write only one value, then 4 edges all go to this value. namely: margin:12px 12px 12px 12px;

1.1 Box Border

The border (border) has 3 related properties:

Width

You can use text values such as thin, medium, and thick, or you can use the

Any absolute value other than a percentage and a negative value.

Style

There are none, hidden, dotted, dashed, solid, double, groove,

Text values such as Ridge, inset, and outset.

Color

You can use any color value, including RGB, HSL, hexadecimal color values, and color keywords.

1.2 Box inner margin

The inner margin (padding) is used to set the space between the box content area and the border. Without setting the inner margin, the content is next to the border.

1.3 Box outer margin

The outer margin (margin) is used to set the spacing between the box and adjacent elements.

It is recommended that this rule be used as the first rule of the stylesheet: * {margin:0; padding:0;}

Description: This rule sets the default outer and inner margins of all elements to zero. After you put this rule in the stylesheet, all the default outer and inner margins will disappear. Then, you can add an outer margin for those elements that really need the outer margin. The default inner and outer margins are different for browsers, especially for composite elements such as forms and lists. In this case, using this rule and the default values, and then adding as needed, will have a consistent effect on each browser.

1.4 Overlay Outer Margin

The outside margin in the vertical direction will overlap, which is something you have to know.

In CSS, the adjoining margins of two or over boxes (which might or might not is siblings) can combine to form a single mar Gin. Margins that combine this way are said to collapse, and the resulting combined-margin is called a collapsed margin.

In CSS, the margin in the vertical direction of a block element in a normal stream of two or more adjacent (parent-child or sibling elements) is superimposed. The outer margin that is formed in this manner is called the outer margin overlay (collapsed margin).

1.5 units of the outer margin

As a rule of thumb, it is often necessary to mix different units when setting the outer margin for text elements. For example, the left and right margins of a paragraph can be used in pixels so that the text is always fixed spacing with the containing element boundary, unaffected by the size of the font or smaller. For the top and bottom margins, in EM, you can increase or shrink the segment spacing as the font size changes.

Example:

CSS code copy content to clipboard

p {font-size:1em; margin:.75em 30px;}

2. Floating and Clearing

Floating and clearing is a sword used to organize page layouts, and the blade of this sword is the float and clear attribute.

2.1 Floating

Floating, you can imagine taking elements out of the regular document stream. After the floating element is detached from the regular document stream, the element that is immediately followed is elevated up to the floating element as space allows.

If you have two paragraphs behind a floating element, and you just want the first paragraph to be tied to the floating element (even if you still have a second paragraph next to it and you don't want it to come up), you can use the clear property to clean the second paragraph, and then it will stay under the floating element.

Floating the most common role:

Achieve the effect of text wrapping on a traditional publication

Let the original stacked block-level elements, into the left and right side by side, so as to achieve the layout of the column.

2.2 Three ways to surround floating elements

Note: Three methods have advantages and disadvantages, see the use of the situation.

Method One: Add Overflow:hidden to the parent element

Method Two: Floating elements at the same time

Method Three: Add a non-floating purge element

3. Positioning

The core of the CSS layout is the position attribute, which is applied to the element box and can be repositioned relative to its position in the regular document stream. The Position property has 4 values: static, relative, absolute, fixed, and the default value is static.

3.1 Static positioning

Static

In the case of static positioning, each element is in the regular document stream. To break through this layout element, you must change the Position property of the box to the other three values.

3.2 Relative positioning

Relative

Relative positioning, relative to its original position in the document flow (or the default location). After you set up, you can use the top, right, bottom, and left properties to change its position. In most cases, only top and left can achieve the effect we want.

The key to using relative positioning is to take into account the original space of the element. Because the element with relative positioning is only moved relative to the original position, there is no change in the page, that is, the original space occupied by the element did not move, and the other elements did not move.

3.3 Absolute Positioning

Absolute

Absolute positioning takes the element completely out of the document stream, and then is positioned relative to other elements (the default is to locate the context body). You can also determine the position by setting the offset value for top and left.

3.4 Fixed positioning

Fixed

Fixed positioning is similar to absolute positioning from the point of view of completely moving out of the document stream. The difference, however, is that the anchored context of a fixed-positioned element is the viewport (the screen of a browser window or handheld device), so it does not move as the page scrolls.

Tip: Fixed positioning is not commonly used, and the most common scenario is to use it to create navigation elements that are not moved with the page scrolling.

3.5 Location Context

Locates the context, which is the element that the anchor element is relative to offset.

In fact, as long as the elements outside and inside the margin set, in most cases, only static positioning is sufficient to achieve the layout of the page. Many beginners who have just started to touch CSS will incorrectly set the position attribute, eventually discovering that the elements removed from the flow of the document are not at all controllable. Therefore, do not easily modify the default position property of an element unless you really need to do so.

4. Display Properties

All elements have position attributes, as well as display properties.

The display property has three values: block, inline, and none.

Block-level elements, such as paragraphs, headings, lists, and so on, are stacked up and down in the browser.

Inline elements, such as A, span, IMG, are displayed side-by-sides in the browser, and appear to the next line only when there is no space in the previous line.

To turn a block-level element into an inline element (or vice versa):

CSS code copy content to clipboard

/* Defaults to block*/

p {display:inline;}

/* Defaults to inline*/

a {display:block;}

If you set the display of the element to none, the element and all the elements contained therein are not displayed on the page, and the space they occupy will not be recycled as if the relevant tag does not exist at all.

The element that is relative to this is the visibility property, with the property value: Visible (default) and hidden. If set to hidden, the elements are hidden, but the page space they occupy is preserved.