Basic knowledge to be consolidated and re-combing.
A, position locating
(a): position attribute
1.absolute: generating absolute positioning element relative to a parent element is not positioned nearest to the static positioning;
2.relative: generating element located opposite, with respect to its position where the normal document positioning stream;
3.static: defaults, no positioning elements appear in the normal flow of the document;
4.fixed: Old IE does not support, and absolute consistency, positioned relative to the window, when the scroll bar appears, scrolled without scrolling with;
5.sticky: (CSS3) compatibility issues, and it is fixed relative fit such, when the conventional flow in a screen layout, when the scroll screen is manifested as an outer fixed. The performance of the property is the adsorption effect you see in reality.
(B): generally on the use of position caused by
1. If there is a default width div 100%, when combined with absolute absolute positioning, the inline-block of elements immediately, it will default width adaptive internal width of the element, will leading to the collapse of the page width and height.
2. Due to the flexibility absolute absolute positioning, for general page layout, sometimes for reasons of easy way is likely to cause absolute / relative / top / left / z-index of the abuse, it would be the latter part of the expansion and maintenance of causing trouble
(C): position code sample
1.relative relative positioning.
2 with respect to the object itself original document flow position, and also occupy document flow, following the yellow block in accordance with its original position to continue down arrangement, relative positions only visually changed.
Copy the code
Copy the code
2.absolute absolute positioning
Object attributes 1absolut div offset relative to the parent, from the document flow, collapse width and height, above the document flow.
Copy the code
Copy the code
two, float float
(a) defines a float
floating elements float attribute defines the left / right direction. Floating element generates a block-level box, regardless of what element itself.
Value of float: left / right / none
(B) float achieve text wrapping
elements with the properties of the float may be made of inline-block elements, having encapsulated, merged block elements such that the elements and inline elements advantages. Attribute with floating elements will be arranged from the standard layout stream, flow out of the standard float element floats above a normal block, but still occupy the normal text document flow space, such that in addition to the text after the floating element space It is a reference arrangement, the effect of forming text surrounded.
Copy the code
This is a test text la la la la la This is a test text ah ah ah ah ah this is a text display na na na na This is a text display la la la la la
Copy the code
(C) float floating layout
Standard document flow from top to bottom order.
After div1 left float, it is clear that the height of collapse, and Div2 div3 div1 and overlap.
(D) and a floating Clear Clear why several methods floating
since the floating height of the element results in collapse of side effects, the parent can not be softened box frame, the background can not be displayed, and padding margin between the set value can not be correctly displayed parent-child .
Copy the code
Code Replication
Method 1: before the end of the parent, to add a sub-tag
Method 2: In the parent css attributes add the overflow: hidden; zoom: 1; or overflow: auto; zoom: 1;
Method 3: In the parent with zoom +: after method similar principle clear: both, with CSS manner: after adding a clear internal elements: both the element blocks
{Zoom .box1:. 1;}
.box1: {After the display: Block; Content: 'Clear '; Clear: both; Line-height: 0; visibility: hidden;}
Method 4: Parent suitable height provided directly support open
(V) float and JavaScript
IE browser:
obj.style.styleFloat = "left";
other browsers:
obj.style.cssFloat = "left";
Category: css