CSS learning notes

Source: Internet
Author: User
I have been learning CSS over the past few days. Since I had less contact with CSS in the past, it would be easy to use, so it is a little difficult to learn. Especially in terms of layout, although there are many examples on the internet, but now I have no system knowledge about the layout.
The layout is implemented by the position attribute. It has the following values:

Static

Default value. No special positioning, the object followsHtmlLocating rules

Absolute

Drag an object from the document stream and useLeft,Right,Top,BottomAnd other attributesRelative to the parent object closest to the parent object with the most positioning settings, perform absolute positioning.. If such a parent object does not existBodyObject. And its cascade throughZ-IndexAttribute Definition

Fixed

Not supported. Object positioning follows absolute(Absolute)Method. But comply with some rules

Relative

Objects cannot be stacked, but will be based onLeft,Right,Top,BottomOffset position of other attributes in normal document streams

Note:

How to locate the retrieved object.
Set this property value Absolute It will drag the object out of a normal Document Stream and definitely locate it without considering the layout of its surrounding content. . If others have different Z-Index Attribute objects occupy a given position. They do not affect each other, but are stacked at the same position. At this time, the object does not have external Patches (Margin) But there are still internal Patches (Padding) And border (Border) .
Absolute Value of the object to be activated (Absolute) Location, which must be specified Left , Right , Top , Bottom At least one of the attributes, and set this attribute value Absolute . Otherwise, the above attributes will use their default values. Auto , Which causes the object to follow the normalHtml Layout rules, which are presented immediately after the previous object.
Set this property value Relative Will keep the object in the normal Html Streaming, However, its position can be offset based on its previous object. . In relative (Relative) The text or object after the positioning object occupies their own space and does not overwrite the natural space of the positioning object. In contrast (Absolute) The text or object after the positioning object occupies its natural space before it is dragged away from the normal Document Stream. Absolute placement (Absolute) When the positioning object is outside the visible area, the scroll bar appears. And placement relative (Relative) The position object is outside the visible area, and the scroll bar does not appear.
The content size is determined based on the layout. For example Div Object Height AndPosition Attribute, then Div The content of the object determines its width. (Width) .
This property Currentstyle The object is read-only. Other objects can be read and written.
Corresponding script features: Position .

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.