Css Note: The Box Model in css and three Positioning Mechanisms (fixed positioning, absolute positioning, floating) and css Mechanism

Source: Internet
Author: User

Css Note: The Box Model in css and three Positioning Mechanisms (fixed positioning, absolute positioning, floating) and css Mechanism

Elements on the html page can be viewed as boxes. The boxes are arranged together by three Positioning Mechanisms. The box is the box model.

Box Model

Each element on the page can be viewed as a rectangular box. Each frame consists of the content, padding, border, and padding of the element.

2. if you add a background to an element, the background is the border, padding, and content area.

3. In css, width and height indicate the width and height of the content area. Adding the padding does not affect the size of the content area, but increases the total size of the element box. That is, width = element

Note: In the ie box model, width refers to the content, padding, and the total width of the border (no margin ). That is, width = element + padding + border

 

Outer margin superposition: When two or more vertical outer margins meet, they form a new outer margin. The height of the new margin is equal to the greater of the two overlay margins.

Note: Only the vertical outer margin of the block box in the normal Document Stream will overlay the outer margin. The margin between the rows, floating boxes, or absolute positioning boxes does not overlap.

There are four situations:

The elements in are divided into block-level elements and intra-row elements. The generated boxes are block boxes and line boxes.

Block boxes are arranged from top to bottom. The distance between block boxes is determined by the vertical margin.

The Rows and boxes are arranged horizontally in a row.

Note: You can change the box type by setting the display attribute.

 

Three Positioning Mechanisms of css

Css consists of three basic Positioning Mechanisms: normal stream, floating and absolute positioning.

If the css style is not specified, all frames are in the bucket stream. The element frame position in a normal stream is determined by the element position in html.

Relative positioning (as normal stream positioning): Because the relative positioning element is determined by the initial position of the "relative" element in the normal stream, it is regarded as a normal stream positioning. the positioning element occupies the original space and can overwrite other boxes.

Set the property position to relative. Move the frame relative to the start point of the original element by setting top and left.

 

Absolute positioning: the absolute positioning element is determined relative to the located ancestor element closest to it. The absolute positioning element location is irrelevant to the Document Stream, so it does not occupy space.

Note:

The position of the relative positioning element is "relative to" the initial position of the element in the normal stream.

Absolute positioning is the "relative" to "The located ancestor element closest to it. If it does not exist, it is relative to the initial inclusion block.

Note: absolute positioning will overwrite other elements on the page because it is irrelevant to the Document Stream. p47

When the absolute positioning element is set from the coincidence moment, the stacked order is set through z-index.

When the screen is regarded as a lake, the higher the z-index value and the closer the lake surface, the higher the display priority. the element with a higher z-index value has a higher priority than the element with a lower z-index value.

Fixed positioning: a type of absolute positioning. The inclusion block of fixed elements is the browser window.

 

Floating: Floating will let the element flow out of the document. The floating box can be moved left and right to know that its margin hits the edge of the include box or another floating box.

If a floating element is followed by an element in the document flow, the row box next to the floating element will be shortened. The elements in the document flow will follow the floating box (such as text surrounding the image ).

Solution: Apply the clear attribute to the row box. The attribute values are left, right, both, and none. in specific implementation, the browser will add enough margin on the top of the element, that is, the top edge of the element vertically drops below the floating box.

Attributes related to css positioning (the first attribute value is the default attribute ):

Position

Specifies the positioning type of the element.

Static, absolute, fixed, relative

Top

Sets the offset between the top margin boundary of the positioning element and the top boundary of the contained block.

Auto, percentage, numeric value

Right

Sets the offset between the right margin boundary of the positioning element and the right boundary of the contained block.

Auto, percentage, numeric value

Bottom

Sets the offset between the bottom margin boundary of the positioning element and the bottom boundary of the contained block.

Auto, percentage, numeric value

Left

Sets the offset between the left margin boundary of the positioning element and the left boundary of the contained block.

Auto, percentage, numeric value

Float

Floating of the Rule box

None, left, right

Clear

Specifies which side of the element does not allow other floating Elements

None, left, right, both

Display

Type of the box to be generated for the specified Element

Inline, none, block, inline-block

Clip

Crop absolute positioning Elements

Auto, shape rect (top, right, bottom, left)

Overflow

Specifies what happens when the content overflows the element box.

Visible, hidden, scroll, auto

Vertical-align

Set the vertical alignment of Elements

Baseline, sub, super, top, bottom, value, percentage

Visibility

Specifies whether the element is visible

Visible, hidden, collapse

Z-index

Set the stacking sequence of Elements

Auto, numeric value

Cursor

Specifies the type of the cursor to be displayed

Auto, text, help, pointer, move

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.