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

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