Shulou(Shulou.com)06/03 Report--

This article is about how to understand the Position and Float attributes in CSS. The editor thinks it is very practical, so I share it with you. I hope you can get something after reading this article.

The structural points of this article are:

Basic points of 1.HTML layout (click me to jump directly)

Box model

Ordinary flow of HTML

2.Position attribute (click me to jump directly)

Introduction to attribute values

Introduction to usage

A little knowledge about position

3.Float attribute (click me to jump directly)

Introduction to attribute values

Introduction to usage

Compatibility issues with Position

The basic points of HTML layout:

If you want to master and make good use of Position and Float attributes, you must have a clear understanding of the two basic points of HTML.

1. Box model (box model)

Normal flow of 2.HTML (normal flow)

Box model

There are two kinds of box models of elements in HTML: block elements and inline elements. Note that the block elements (Block) and inline elements (Inline) here are not equal to the values of inline and block in the Display attribute. The Inline and Block in the box model are similar to the parent class of the Display attribute, for example, the value of the list-item attribute in the Display attribute is of the Block type.

We can intuitively look at the difference between the two box models.

Elements of Block type can set width and height attributes, while inline (Inline) type setting is not valid.

Elements of the Block type will occupy a single line (intuitively, they will wrap and cannot be displayed on the same line as other elements, unless you actively change the style of the element), while elements of the Inline type will be displayed on the line.

The width of Block type elements is 100% by default, while inline (Inline) elements determine the width according to their own content and child elements.

List the classification of some common elements

Block elements: P, DIV, UL, LI, DD, DT...

Inline elements: a, IMG, SPAN, STRONG...

Ordinary flow of HTML

The browser reads the HTML source code according to the order in which the elements appear in the code, and the final rendering of the elements is determined by the box model of the elements. Inline elements are from left to right, and block elements are from top to bottom. (as shown below)

The code is as follows:

Div {width: 100px; height: 50px; line-height: 50px; text-align: center; color: # fff;} strong {background: # 808080;} em {background: # ffd800;} span {background: # b6ff00;} strongemspanABC

If you do not change the default style of the element, the element will "occupy" a place in the normal stream of HTML, and the size and location of the "occupied" position will be determined by the box model of the element. Therefore, whether the Position and Float attributes will pull the element out of this normal flow is a key point.

Position attribute:

First of all, let's talk about the Position attribute, because the Position attribute is a good representation of the HTML normal stream. The point is whether there is a departure from the normal flow and a change in the Display property after applying different position values.

Position attribute value

The attribute value of Position has four static, relative, absolute, and fixed.

Static

By default, the position attribute of all elements is static, while the attributes top, bottom, left and right commonly used in relative and absolute positioning that we often use in layout are invalid when position is static. Its usage is: after changing the position attribute of the element, you can reset the element to static so that it returns to the page's default normal flow.

Relative

The so-called relative positioning focuses on the relative understanding. We said before that each element will "occupy" a position in the normal flow of the page, which can be understood as the default position, and relative positioning is to deviate the element from the default position of the element. but the normal flow still maintains the original default position, and does not deviate from the normal flow, just a visual offset.

Let's start with a block element as an example:

The code is as follows:

Div {width: 100px; height: 50px; line-height: 50px; text-align: center; color: # fff;} ABC

The black dotted line in the figure is the default normal flow position of element B, while the yellow line represents the relative offset of element B. We can clearly see that element C remains in place and does not change as a result of the offset of element B.

Let's take a look at the in-line elements (here we use the most commonly used span as an example)

The code is as follows:

Strong {background: # 808080;} em {background: # ffd800;} span {background: # b6ff00; position: relative; top: 10px; left: 10px; width: 100px;} strongemspan

Please note that here I do assign the width attribute to span (100px). But we can see that span still has no effect on the width attribute after using the value of the position attribute relative. In other words, position: relative does not change the Display attribute of the element in the line, which is very important (note the difference from the following absolute).

Absolute

The so-called absolute positioning, absolute positioning is relative, how to understand? Elements that apply position: absolute determine the "root" according to the parent (ancestor) element in the node tree, and then offset from this "root" element. If none of the parent (ancestor) elements in its node tree sets the value of the position attribute to relative or absolute, the element will eventually offset the body. Elements that apply position: absolute break away from the normal flow in the page and change the Display attribute (key)!

Let's first use a default nested DIV as an example

The code is as follows:

An A-1 A-2

Now we set absolute positioning (Top: 0, Left: 0) for the div Amur2, but not any position values for its parent elements (A, Amur1).

The code is as follows:

An A-1 A-2

You can see that the final shift is based on body, so let's set the parent element position by comparison.

From the above picture, we can sum up the following conclusions.

1) the width of the block element is 100% in the case of position (relative/static), but when position: absolute is set, the width will be changed into auto (affected by the width of the parent element).

2) after the element has set position: absolute, if the top, bottom, left, and right attributes are not set, the browser will default to auto, and the value of auto is the "default location" of the element. That is, the values of the offsetTop and offsetLeft properties remain unchanged before and after setting position: absolute.

Special circumstances:

Firefox will directly set top and left to the values of offsetTop and offsetLeft instead of auto.

The behavior under IE7 is more similar to float, which is appended to the end of the parent element.

A little knowledge of position

1) with the element of position:relative / absolute applied, the margin attribute is still valid. Take position:relative as an example. If you set the properties of left, top, bottom and right, it is recommended that you do not set margin data, because it is difficult to accurately locate the elements and minimize interference factors.

2) position: absolute ignores the padding of the root element.

The code is as follows:

An A-1 A-2

3) setting the position attribute in IE6/7 will cause the z-index attribute to become invalid

The code is as follows:

Ab 4) inline elements change the display after position:absolute is applied. The code is as follows: my display property has been changed from inline to block

Therefore, note that relative does not change the rendering mode of inline elements, while absolute does change the rendering mode of inline elements. If absolute is set, you do not need to explicitly change the element display to block.

5) after applying position: absolute / relative, it will overwrite other non-positioning elements (that is, elements whose position is static). If you do not want to cover other elements, you can also set z-index to-1.

Fixed

For a long time, this property value has not been widely used because of compatibility issues (IE6 does not implement this property value). Fixed and absolute have a lot in common:

Changes the rendering mode of the elements in the line so that the display is changed to block. It takes the element away from the normal flow and does not take up space. By default, it is overridden to non-positioning elements.

The biggest difference between fixed and absolute is that the "root element" of absolute can be set, while fixed's "root element" is fixed as a browser window. That is, when you scroll a web page, the distance between its elements and the browser window is constant.

Float attribute

The attribute values of float are none, left, and right, and there are several key points:

Only floats horizontally, not longitudinally. When the float attribute is applied to the element, it will break away from the normal flow, and its container (parent) element will not get the height of the child element that is separated from the normal flow. The display attribute of the element is changed to block. The latter element of the floating element surrounds the floating element (typically text around the picture), and the floating element does not obscure the latter element compared to the element with position applied. The previous element of the floating element is not affected in any way (if you want two block elements to be displayed side by side, you must have both block elements applied float).

Compatibility with position

1) when the position: relative, float, (top / left / bottom / right) attributes are applied to the element, the element first floats to the appropriate position, and then offsets according to the distance set by (top / left / bottom / right).

Div

The div on the left does not set the values of top and top, while the offset of 50px is set on the right.

2) if both position: absolute and float attributes are applied to the element, the float is invalid.

I am a DIV using position:absolute and float:left, but I am still on the right side of the browser, not floating to the left.

3) after the position is applied to the first element, the next float element is overwritten (if the two elements are in the same position)

I am a DIV that uses position:absolute. I'm DIV from float:left.

Review: if you do not set the position of the float element to relative, it is invalid to override the position:absolute by setting the z-index of the float element. Similarly, there is a child element of position: absolute under the float element, and the absolute element will not locate the float element if you do not set the position of the float element to relative.

4) applying both position: absolute and float: left will make clearing floats invalid (position: relative can clear floats).

There are two common ways to clear floats:

Set the style of the label to clear: both container set overflow: hidden by adding a tag in the container

I'm DIV.

The above is how to understand the Position and Float attributes in CSS. The editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.