A positioning
The positioning, in fact, define the elements box relative to its normal position, where it should appear in
the default position of the element is to change the page orientation
classification:
Positioning :( normal stream default targeting element)
float position
relative positioning
absolute positioning
fixed positioning
1, positioned normal stream
Document flow is the default page element targeting
block level: from top down (on a line)
the line level: from left to right (without a separate line)
2. float position
If the targeting element is provided so float position has the following characteristics
1. The floating element will flow out of the document, other floating elements are not to be approached to fill the seats
2. The floats will be docked at the left or right of the parent element, or other floating dock on the edge of the element
3. The floating element will only be current the floating line
4. the floating element within the parent remains at
5. let the plurality of block elements in a row
property defines the floating elements float in which direction. This property is always applied to the previous image, the text surrounding the image, but in CSS, any element can float. Floating element generates a block-level box, regardless of what element itself.
If the floating non-replaced elements, will have to specify an explicit width; otherwise, they will be as narrow as possible.
Note: If only a few in a row on the space available for the floating element, then this element will jump to the next line, this process will continue to have a line up enough space.
Horizontal elements float, means that the element can only move left and right and can not move up and down.
A floating element will try to move left or right, until it hit the edge of the bezel comprising an outer frame or the other until the floating box.
Elements after the floating element will be around it.
Element before the floating element will not be affected.
If the image is floating right, the following text will flow around the left side of it:
Floating effect caused by:
1. When the parent element is less than the width of the display of all the floating elements, the last element of the wrap (there may be stuck)
2. Once the element to float, it becomes block-level element, in particular the greatest impact on inline elements .
3. Text, inline elements, by way of lines within a block element arranged text wrapping, not being under pressure in the float will float away clever
3. Clear float
After floating elements together, in addition to affect their own position, but also affect subsequent elements
you do not want to be floating elements on the front can be used to remove floating solve this problem
who would be affected by who is who in
Keywords: clear (clear attribute specifies paragraph left or right floating elements are not allowed):
Clear float left left
right and right to clear float
both are clear about whether
the impact on floating elements parent element brought
4. If the height 100% of the parent set or not set (adaptive) when all the elements after floating up to the height of the parent 0 how to solve:
1. Set the height px directly to the parent
drawbacks: the parent must know the exact height
2. Set the parent element of float
drawbacks: the subsequent elements also affect
3. a parent element is set overflow (overflow)
drawbacks: If the child contents overflow is then displayed with hidden
4. append an empty element in the parent element is provided to clear the floating
Two, CSS pseudo-classes
: Hover the mouse pointer selector for selecting float above.
Tip :: hover selector can be used for all elements, not just links.
Tip :: link selectors to style the link to the page is not accessible,: visited selectors have been used to link the set point to visit the page,: active selector for active links.
Note: CSS definition,: hover must be located: link and: after visited (if any), so the style to take effect.
Third, the cursor changes, modifications, and list styles transparency
Type 1.cursor cursor to display predetermined properties (shape).
Property values:
url custom cursor URL to be used. Note: Always define a generic cursor at the end of this list, in case there is no available cursor defined by the URL.
default default cursor (typically an arrow)
auto default. Cursor browser settings.
reticle crosshair cursor displays.
pointer cursor appears as a link pointer (a hand)
The cursor indicates move an object can be moved.
This text cursor indicating a text.
This wait cursor indicates that the program is busy (usually a table or hourglass)
The cursor indicates the available help assist (often a question mark or a balloon).
2.Opacity property to an element of transparency level.
Property Value: Specifies the opacity. From 0.0 (fully transparent) to 1.0 (fully opaque)
3.list-style shorthand property to set a list of all the properties in a statement.
Properties (in order) can be set: list-style-type, list-style-position, list-style-image.
A value which may not be provided, such as "list-style: circle inside;" also allowed. Property is not set uses its default value
Generally only the first set value, is also only learned the first value: list-style-type
Property values:
none unmarked
disc default. Marker is a filled circle.
circle mark is hollow circle.
square mark is filled squares.
decimal marker is a number.
Numerals decimal-leading-zero leading zeros. (01, 02, 03, etc.)
lower-roman lowercase Roman numerals (i, ii, iii, iv, v, and the like.)
upper-roman uppercase Roman numerals (I, II, III, IV, V, etc.)
......