CSS found (div+css please speak)

CSS Positioning and floating

CSS positioning and floating provides some features that, using these properties, you can create a column layout, a part of the overlay layout, and some. You can also accomplish tasks for many years with the ability to do multiple tables that you typically need to use.

The basic idea of positioning is very easy. Where the normal position should appear, or relative to the parent element, there is an element, or even the location of the browser form itself. Obviously. This is a very powerful and surprising feature. It should not be surprising to know that the user agent's support for targeting in CSS2 is far better than other support.

Everything is a box

Div, H1, or p elements are often referred to as block-level elements. This means that these elements appear as a piece of content , the "Block box". In contrast, elements such as span and strong are called "inline elements" because their content is displayed in the row, or inline box.

You can use the Display property to change the type of box that is generated. This means that. By setting the Display property to block, you can make inline elements (for example, <a> elements) behave like block-level elements. It is also possible to set the display to none so that the generated elements are not in the box at all. In this case, the box and all its contents are no longer displayed and do not occupy space in the document.

But in one case. Block-level elements are created, even if they are 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.

CSS positioning mechanism

There are three main positioning mechanisms for CSS: normal flow, floating, and absolute positioning.

Unless specifically specified, all boxes are positioned in the normal stream. Other words. The position of an element in a normal stream is determined by the position of the element in the (X) HTML.

Block-level boxes are arranged from top to bottom, one after the other. The vertical distance between the boxes is calculated by the vertical margin of the box.

The inline box is arranged horizontally in a row. Ability to adjust their spacing using horizontal padding, borders, and margins.

However, vertical padding, borders, and margins do not affect the height of the inline box. A horizontal box formed by a row is called a line box, and the height of the row box is always sufficient to accommodate all the inline boxes it includes. Just set the height of the row to add this box.

The above text is from the description of W3cschool, very many people look after the only know why, do not know why.

Let me show you the actual examples below.

First, we introduce the important properties of the position

Here we only make a specific introduction to the frequently used default value of static and the relative positioning of the relative and absolute positioning absolute .

In whatever block-level element we define, it is assumed that the Positon style attribute is not defined, it will be the default static, the block-level box is arranged from top to bottom, and the vertical distance between the boxes is calculated from the vertical margin of the box. The assumption is that inline elements will then be arranged horizontally until the current row is filled.

Many other times we use relative, absolute positioning in the div+css layout. And most of the time, it's mixed.

Use Position:absolute at the same time

    <div style= "position:absolute;left:50px;top:50px;border:1px solid red;width:100px;height:100px;" ></div>    <div style= "position:absolute;left:100px;top:100px;border:1px solid #000; width:100px; height:100px; " ></div>

Can see that they are all relative to the browser location. Non-impact.

Use position:relative at the same time

    <div style= "position:relative;left:50px;top:50px;border:1px solid red;width:100px;height:100px;" ></div>    <div style= "position:relative;left:100px;top:100px;border:1px solid #000; width:100px; height:100px; " ></div>

Can see the first div or relative to the browser positioning, the second div left or 100px. And top has become 200px. This is because of the relative positioning because there is already an element above, the top of the second Div is the first div in the occupied height.

Use Position:absolute First, then use Position:relative

    <div style= "position:absolute;left:50px;top:50px;border:1px solid red;width:100px;height:100px;" ></div>    <div style= "position:relative;left:100px;top:100px;border:1px solid #000; width:100px; height:100px; " ></div>

Can see the first div or the browser as the absolute positioning, the second Div, although relative but not affected by the first Div, or browser positioning.

Use position:relative First, then use Position:absolute

    <div style= "position:relative;left:50px;top:50px;border:1px solid red;width:100px;height:100px;" ></div>    <div style= "position:absolute;left:100px;top:100px;border:1px solid #000; width:100px; height:100px; " ></div>

It's exactly the same as the one above. We should be able to sum up a bit, assuming that there is only one relative positioning, no matter how many absolute positions are used, the element that uses relative positioning is unaffected by the absolutely positioned element.

Use the default value static first, then use the relative

    <div style= "border:1px solid red;width:100px;height:100px;" ></div>    <div style= "position:relative;left:100px;top:100px;border:1px solid #000; width:100px; height:100px; " ></div>

The top value of the second Div has changed to 200px here.

Use the default value static first, then use the absolute

    <div style= "border:1px solid red;width:100px;height:100px;" ></div>    <div style= "position:absolute;left:100px;top:100px;border:1px solid #000; width:100px; height:100px; " ></div>

The second Div ignores whatever other positioning elements. Always take the browser as the subject

PS: Let's say we don't want to use a browser as an absolute anchor point, but rather a starting point for some of our custom block-level elements, just set this element to a relative position. Its child elements are then used regardless of location and will prevail over it, not the browser.

Example:

Here all the green grass large boxes are set position:relative, inside the small box to give it the positioning of all speeches.

Copyright notice: This article Bo Master original article. Blog, not reproduced without consent.

CSS found (div+css please speak)