"CSS Notes" CSS box model and three positioning mechanisms (fixed positioning, absolute positioning, floating)

Elements on an HTML page can be thought of as boxes, and the boxes are arranged together by three positioning mechanisms to process the pages we see. The box is the box model.

Box model

1. each element on the page can be viewed as a rectangular box, each of which consists of the element's contents, padding, borders, and margins.

2. If you add a background to an element, the background is the bounding rectangle , the padding, and the area of the content .

3. Width and height in css are the widths and heights of the content area . Increasing the padding, the borders and margins do not affect the size of the content area, but increase the total size of the element box. namely Width=element

Note : in the box model of IE, width refers to the sum of the contents, padding, and width of the border (no margin). namely:Width=element+padding+border

Margin overlay : When two or more vertical margins meet, they form a new margin. The height of this new margin is equal to the larger of the two height of the margin where the overlay occurs.

Note : Margin overlays occur only for the vertical margins of the block boxes in the normal document flow. The margins in the inline box, between the float box or the absolute position box, do not overlap .

There are four scenarios :

elements in HTML are divided into block-level elements and inline elements , and the resulting boxes are block and inline boxes .

The block box is arranged from top to bottom , and the distance between the block boxes is determined by the vertical margin .

the inline boxes are arranged horizontally in a row .

Note : you can Change the type of box by setting the Display property .

Three kinds of positioning mechanism of CSS

CSS consists of 3 basic positioning Mechanisms : Normal flow , floating, and absolute positioning .

If not specified by CSS style , all boxes are in the bin stream , and the element box position in the normal stream is determined by the element in the HTML is determined by the position in the

relative positioning ( as normal flow positioning ): because the position of the relative positioning element is determined by the initial position of the "relative to" element in the normal flow , it is considered as one of the normal flow positioning . the relative positioning of the element to occupy the original space , and can overwrite other boxes .

Set the property position to relative. by setting Top and the Left moves the box relative to the origin of the original element

Absolute Positioning : The position of an absolutely positioned element is determined relative to the positioned ancestor element closest to it . the position of an absolutely positioned element is independent of the document Flow , so it doesn't occupy space . .

Note :

The position of the relative anchor element is determined by the initial position of the relative to element in the normal stream .

Absolute positioning is the closest positioned ancestor element relative to it, if not present , relative to the initial containing block .

Note : absolute positioning is also overridden for other elements on the page because it is independent of the document Flow . p47

when an absolutely positioned element is set by a coincident moment by z-index the stacking order .

View the screen as a lake, the higher the value of the Z-index setting , the closer it is to the Lake , the higher the priority is displayed . elements with high z-index values show higher precedence than elements with lower Z-index values .

fixed positioning : As a kind of absolute positioning. The containing block of the fixed element is the browser window.

floating : floating causes elements to flow out of the document . The float box can move left and right to know that its margin touches the edge of the containing 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 is shortened . the elements in the document flow follow the float box (for example, the text surrounds the image) .

workaround : Apply the clear property to the row box and the property value is left,right,both,none. and in concrete implementations, , The browser adds enough margin to the top of the element , is the top edge of the element drops vertically below the floating box .

Properties related to CSS positioning ( the first property value is the default property ):

Position	The positioning type of the specified element	Static, absolute, fixed, relative
Top	Sets the offset between the top margin boundary of the anchor element and the upper boundary of its containing block	Auto, percent , value
Right	Sets the offset between the right margin boundary of the anchor element and the right boundary of its containing block	Auto, percent , value
Bottom	Sets the offset between the margin boundary and the lower boundary of its containing block under the anchor element	Auto, percent , value
Left	Sets the offset between the left margin boundary of the anchor element and the left boundary of its containing block	Auto, percent , value
Float	Floating of the specified box	None, left, right
Clear	Specifies which side of the element does not allow other floating elements	None, left, right, both
Display	Specifies the type of box to which the element should be generated	Inline, none, block, Inline-block
Clip	Trim an absolutely positioned element	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 an element	Baseline, Sub, super, top, bottom, value , percentage
Visibility	Specify whether elements are visible	Visible, hidden, collapse
Z-index	Set the stacking order of elements	Auto, value
Cursor	Specifies the type of cursor to display	Auto, text, Help,pointer, move

"CSS Notes" CSS box model and three positioning mechanisms (fixed positioning, absolute positioning, floating)