Learn css basics in two days (2) and css basics in two days

Learn css basics in two days (2) and css basics in two days

After receiving the previous blog, two important things in css were not mentioned, namely the floating and positioning of elements.

Part 3: Floating and clearing of Elements

The previous blog has summarized this part. Please refer to the article on float and three methods to clear float in css.

Floating is also used and common in Web pages. Pay special attention to the floating clearing method.

Part 4: positioning of Elements

Element positioning is often used in actual development, especially when precise positioning is involved.

The position attribute value of an element is static by default.

Static:

The object follows the regular flow. At this time, the four positioning offset attributes will not be applied.

Relative:

The object follows the regular flow andReference its position in the regular streamThe offset of the top, right, bottom, and left positioning offset attributes does not affect any elements in the regular stream.

Absolute:

The object is out of the conventional stream. At this time, the offset attribute isIt refers to the ancestor element located closest to itself.If no ancestor element is located, it is traced back to the body element. The offset position of the box does not affect any elements in the regular stream, and its margin is not folded with any other margin.

It is often used to precisely locate div boxes.

Fixed:

Consistent with absolute, but offset positioning isRefer to Windows. When a scroll bar appears, the object does not scroll along.

This attribute is used for some fixed navigation entries on the page.

When the position value is not static, its stack level is defined by the z-index attribute. The value range of Z-index is an integer greater than or equal to 1.

 

At this point, the floating and positioning knowledge has been explained. Floating and positioning mainly solve the problem of placing elements on the page.

Supplement:

Css layout FAQ.

1. How to center an element?

Method 1: Set the margin attribute of an element to margin: 0 auto. The element is displayed in the center of the element relative to the parent element.

Method 2: Set the element to absolute positioning. The parent element is relative positioning. The left value is half of the width of the parent element, the margin-left value is half of its own, and the value is negative. The element is horizontally centered.

2. How to center the text?

Set text-align: center to center the text horizontally. Set the line-height attribute value to equal to the element height. Center them up and down.

 

This article only summarizes the basic part of css. The new features added to css3 will be summarized separately in the future.