CSS layout--from display,position, float properties

Page layout, or on the page to do some small effects often use display,position and float properties, if they do not know very well, it is easy to appear some inexplicable effect, a lesson from the experience of reading "CSS Mastery" after summing up.

Let us from the basic knowledge of CSS, I believe many beginners and younger brother do not understand the CSS principle, blindly pursue the effect, the results of the page is flawed, wrong, about the box model I do not say much, online a lot, pay attention to IE and other browsers (specifications) The difference is good.

Block-level elements and inline elements

First, we talk about the block-level elements and inline (inline) elements that people often refer to.

P, UL, form, Div and other elements are called block-level elements, these elements are displayed as a piece of content (will be wrapped), span, input and other elements called inline elements, the main difference is that the block-level elements from top to bottom one by one vertical arrangement, each from a row, The green Div will still appear below Hongsediv, not to the right, even if there are no elements between the two Div.

<div style= "height:100px; width:100px; ">    </div>    <div style=" height:100px; width:100px; ">    </div>

While inline elements are arranged horizontally in a row, the height of the element within the line is stretched by its contents, and the height is not displayed, which is why we have set the height property on span again and again.

Simply understand this knowledge, let us look at the several properties commonly used in the display, some less common I do not understand, do not say

inline block elements. (CSS2.1 new value)

TD valign= "Top" width= "492" >

	description
none	This element is not displayed.
block	This element will be displayed as a block-level element with a newline character before and after this element.
inline	This element is displayed as an inline element with no line break before or after the element.
inline-block

When we show the hidden elements, we often use the display set to None or ', set to none effect is obvious, is to let the element out of the document flow, not display, does not occupy the document space, and set as ' is the element default attribute block or inline, The Inline-block property is CSS2.1 new, IE8 and other mainstream browsers have been supported, it can make elements like inline elements of the horizontal arrangement, but the contents of the box conform to block-level element behavior, can display settings wide, high, internal and external margins. Very interesting.

It's also interesting to change the type of the element's generated box through different assignments, that is, by setting the display property to block, you can make the inline element behave like a block-level element, and vice versa.

Positioning

To understand the CSS element positioning you need to understand the position property, the position attribute has several common values as follows

Value	Property
Inhert	Specifies that the value of the position property should be inherited from the parent element.
Static	The default value . No positioning, elements appear in the normal stream (ignoring top, bottom, left, right, or z-index declarations).
Relative	Generates relatively positioned elements that are positioned relative to the normal position of the element itself . Therefore, "left:20" adds 20 pixels to the left position of the element.
Absolute	Creates an absolutely positioned element that is positioned relative to the first ancestor element other than the static anchor . The position of the element is defined by the "left", "Top", "right" and "bottom" attributes.
Fixed	Generates an absolutely positioned element that is positioned relative to the browser window . The position of the element is defined by the "left", "Top", "right" and "bottom" attributes.

CSS has three basic positioning mechanisms: normal flow, floating, and absolute positioning

The normal flow is the default positioning method, the position of the element box in the normal stream is determined by the position of the element in the HTML, the element position property is static or the static of the inheritance will be positioned according to normal flow, which is our most common way.

Relative positioning is relatively simple, corresponding to the relative value of the position attribute, if an element is relative positioning, it will appear in his position, and then you can set the vertical or horizontal position, so that the element relative to its own movement, when using relative positioning, regardless of whether the element is moved , the element occupies the original space in the document flow, but the performance changes.

Normal Flow:

<div style= "Border:solid 1px #0e0; width:200px; " >        <div style= "height:100px; width:100px; ">        </div>        <div style=" height:100px; width:100px; ">        </div>        <div style=" height:100px; width:100px; ">        </div>    </div>

Relative positioning:

<div style= "Border:solid 1px #0e0; width:200px; " >        <div style= "height:100px; width:100px; ">        </div>        <div style=" height:100px; width:100px;  position:relative; top:20px; left:20px; " >        </div>        <div style= "height:100px; width:100px; ">        </div>    </div>

As can be seen in the above example, the green div relative positioning, the right shift, move down 20px after the second Red Div position does not change, but in the original position, the green div obscured part of the red Div.

Relative positioning can be regarded as a special ordinary flow positioning, the element position is relative to his position in the normal flow changes, and the absolute positioning of the position of the element is independent of the document flow, and does not occupy the document flow space, the element layout in the normal flow as if the absolute positioning element does not exist.

The position of an absolutely positioned element is determined relative to the position of his nearest non-static ancestor element. if the element does not have an ancestor element that has been positioned, then his position is relative to the element that initially contains the block (body or HTML god horse).

Because absolute positioning is independent of the document flow, an absolutely positioned element can override other elements on the page, control the stacking order through the Z-index property, and Z-index the higher the element position.

Or just the example, a little change, so that the green Div absolute positioning, in order to clearly display, the second red Div changed to yellow.

<div style= "Border:solid 1px #0e0; width:200px; position:relative; " >        <div style= "height:100px; width:100px; ">        </div>        <div style=" height:100px; width:100px;  Position:absolute; top:20px; left:20px; " >        </div>        <div style= "height:100px; width:100px; ">        </div>    </div>

As you can see, the green div is shifted relative to the parent element, the green box Div, while the red and yellow div are laid out as if the green Div does not exist.

The last thing to say is the fixed attribute, the application fixed is also called stationary positioning, fixing positioning is absolute positioning, fixed positioning elements are not included in the normal document flow, the difference is the element of the elements of the viewport is the viewport (s), Often see a number of pages such as Renren online friends that module is always in the lower right corner of the window, it is estimated that a similar technology

Fixed positioning:

<div style= "Border:solid 1px #0e0; width:200px; " >        <div style= "height:100px; width:100px; ">        </div>        <div style=" height:100px; width:100px;  position:fixed; bottom:20px; left:20px; " >        </div>        <div style= "height:100px; width:100px; ">        </div>    </div>

Visible Hongse and yellow div layouts are not affected by the green Div, regardless of whether the page's vertical scrollbar is at the top or bottom of the page, the Green Div is always in the lower left corner of the viewport

Floating

The basic knowledge of some floating models is introduced first: The floating model is also a visual format model, and the floating box can move left and right (depending on the value of the float property) until its outer edge touches the edge of the box that contains the box or another floating element. The floating element is not in the normal flow of the document, and the elements in the normal flow of the document behave as if the floating element does not exist. The author of CSS Mastery is very interesting in drawing a few diagrams that can help us understand the floating performance, I simply draw a few.

Non-floating <div style= "Border:solid 5px #0e0; width:300px; " >        <div style= "height:100px; width:100px; ">        </div>        <div style=" height:100px; width:100px;  " >        </div>        <div style= "height:100px; width:100px; ">        </div>    </div>

Red to right floating <div style= "Border:solid 5px #0e0; width:300px; " >        <div style= "height:100px; width:100px;  Float:right; " >        </div>        <div style= "height:100px; width:100px;  " >        </div>        <div style= "height:100px; width:100px; ">        </div>    </div>

Red frame left shift, cover green frame <div style= "Border:solid 5px #0e0; width:300px; " >        <div style= "height:100px; width:100px;   Float:left; " >        </div>        <div style= "height:100px; width:100px; ">        </div>        <div style=" height:100px; width:100px; ">        </div>    </div>

are floating to the left, with a parent element width of 0 <div style= "border:solid 5px #0e0; width:300px; " >        <div style= "height:100px; width:100px;   Float:left; " >        </div>        <div style= "height:100px; width:100px;   Float:left; " >        </div>        <div style= "height:100px; width:100px;   Float:left; " >        </div>    </div>

If the containing block is too narrow to accommodate three floating elements in a horizontal arrangement, then the other floating blocks move downward, until there are enough deductions, and if the height of the floating element is different, the lower move may be stuck

Not enough horizontal space  <div style= "Border:solid 5px #0e0; width:250px;" >        <div style= "height:100px; width:100px;   Float:left; " >        </div>        <div style= "height:100px; width:100px;   Float:left; " >        </div>        <div style= "height:100px; width:100px;   Float:left; " >        </div>    </div>

Stuck with <div style= "Border:solid 5px #0e0; width:250px; " >        <div style= "height:120px; width:100px;   Float:left; " >        </div>        <div style= "height:100px; width:100px;   Float:left; " >        </div>        <div style= "height:100px; width:100px;   Float:left; " >        </div>    </div>

Line boxes and cleanup

The preceding point indicates that the float will leave the element out of the document flow without affecting the non-floating element. Not really, if there is a document flow element behind the floating element, then the box of the element will behave as if the floating element does not exist, but the text content of the box will be affected by the floating element. Move to make room. In terms of the term, the line box next to the floating element is shortened so that the floating element flows out of space, so the row box surrounds the float box.

Non-floating  <div style= "Border:solid 5px #0e0; width:250px;" >        <div style= "height:50px; width:50px; "></div>        <div style=" height:100px; width:100px; ">           11111111111           11111111111        </div>    </div>

Floating <div style= "Border:solid 5px #0e0; width:250px; " >        <div style= "height:50px; width:50px;  Float:left; " ></div>        <div style= "height:100px; width:100px; ">           11111111111           11111111111        </div>    </div>

It can be seen that although the Green div layout is not affected by the floating, the normal layout, but the text part is squeezed into the red floating div below. To prevent the line box from wrapping around a floating element, you can use the Clear property, which left,right,both,none the property to indicate which sides of the box are not next to the floating box.

<div style= "Border:solid 5px #0e0; width:250px; " >        <div style= "height:50px; width:50px;  Float:left; " ></div>        <div style= "height:100px; width:100px;  Clear:both; " >           11111111111           11111111111        </div>    </div>

The element cleanup actually leaves the vertical space for the preceding floating element, which solves one of our previous problems, when we find that all the elements inside the div are floating without occupying the document space, so that the parent element, the height of 0, may be missing.

are floating to the left, with a parent element width of 0 <div style= "border:solid 5px #0e0; width:300px; " >        <div style= "height:100px; width:100px;   Float:left; " >        </div>        <div style= "height:100px; width:100px;   Float:left; " >        </div>        <div style= "height:100px; width:100px;   Float:left; " >        </div>    </div>

If we want the parent element to visually surround the floating element, it can be handled as follows

Add an empty div at the end, clean it up

<div style= "Border:solid 5px #0e0; width:300px; " >        <div style= "height:100px; width:100px;   Float:left; " >        </div>        <div style= "height:100px; width:100px;   Float:left; " >        </div>        <div style= "height:100px; width:100px;   Float:left; " >        </div>        <div style= "Clear:both;" ></div>    </div>

Of course, there are many shortcomings, some JavaScript can also make similar effects, here is not in detail, it is worth noting that the application of the value of hidden or auto overflow property has a side effect: automatically clean up any contained floating elements, so that when the page has a related problem, You can see if this property is a ghost.

In this way, with these basic knowledge, we apply CSS when we can solve a lot of the previously very baffled problem.

CSS layout--from display,position, float properties