CSS Basics---floating, positioning and box models

Reprint please specify the source!

The three most important CSS concepts that need to be mastered are floating, positioning and box models.

Box Model Overview:

Each element on the page is considered a rectangular box (an element box or box model), which consists of the element content, padding, border, and margin.

The inner margin appears around the content area, and if you add a background to the element, the background is applied to the area that consists of the content and the inner margin. adding a border will add a line outside the area of the inner margin. Outside the bounding rectangle is the margin, the margin is transparent, and it is generally used to control the spacing between elements.

The padding, border, and margin are optional and the default value is zero. But many elements are set by the user-agent style sheet with margins and padding, and we can manually set the margin and padding of the elements to zero override these browser styles! For example:

1 * {23         margin: 0;  45         padding: 0;  67 }      (not recommended, use global reset to set separately)

PS: In CSS, width and height are the widths and heights of the content area . Increase the padding, and the borders and margins do not affect the size of the content area. However, the total size of the element box (box model) is increased.

Padding, borders, and margins can be applied to all edges of an element or to individual edges. Margins can also be negative, which can be used in a variety of techniques (e.g. margin-top: -10px; It means the box is moving up 10px. ).

PS:IE6 's promiscuous mode uses its own non-standard box model. These browsers have a width property other than the width of the content, but the sum of the contents, padding, and border widths . Therefore, after fixing the width, the more padding is added, the less space is left for the content.

Margin Overlay:

Simply put, when two or more vertical margins meet, they will form an outer margin. The height of the margin is equal to the larger of the two height of the margin where the overlay occurs.

When one element is contained in another (assuming there is no padding or border separatingthe margins), their top or bottom margins also overlap.

Margins can even be superimposed on itself, assuming an empty element, which has margins but no border or padding. in this case, the top margin and the bottom margin come together, and they will overlap. If this margin is colliding with the outer margin of another element at this point, an overlay will also occur.

This is why a series of empty paragraph elements occupy a very small amount of space. because all of their margins are stacked together to form a small margin.

PS: only the vertical margins of the block boxes in the normal document flow will overlap, and the margins between the inline box, the float box, or the absolute position box will not overlap.

(Reference link: http://www.smallni.com/collapsing-margin/)

Overview of positioning:

1. Visual format Model

Two Boxes one property: Block box and inline box +display (block, inline, none) property.

CSS three basic positioning mechanisms: normal flow, floating, and absolute positioning. unless specifically specified, all boxes are positioned in the normal stream. As the name implies, the position of elements in a normal stream is determined by the position of the element in the HTML .

block Box , vertical from top to bottom, and vertical distance between boxes is calculated from the vertical margin of the box.

inline box , arranged horizontally in a row. You can use horizontal padding, borders, and horizontal margins to adjust their horizontal spacing . Note: However , the vertical margins, borders, and padding do not affect the height of the inline box. It also has no effect on setting the height and width explicitly on the inline box. The height of the inline box is always sufficient to hold all the inline boxes it contains. However, setting the height of the row can increase the width of the box, so the only way to modify the inline box is to modify the row height or horizontal padding, margin, or border.

Fortunately CSS2.1 allows the display property of the element to be set to Inline-block. This declaration allows elements to be arranged in the same horizontal order as the elements in the row. However, the contents of the box still conform to the behavior of the block box, such as the ability to explicitly set the width, height and vertical margins, and padding. FireFox3.0 and above, IE8 and high versions of Safari and opera support this property value.

In addition, the definition of the anonymous and anonymous block boxes is understood:

Anonymous block box: When you add some text to the beginning of a block-level element, they are treated as block-level elements, even if they are not defined as block-level elements, for example:

1 < Div > 2 3          Some text                //anonymous block box 45          <p>Some More text</p>67</Div  >

Anonymous Row box: If you have a paragraph that contains three lines of text, each line of text forms an anonymous row box.

We cannot apply styles directly to anonymous blocks or row boxes.

2. relative positioning

By setting the vertical and horizontal position of the element, the element "relative to" its starting point moves.

When using relative positioning, the elements still occupy the original space. Therefore, moving the element causes him to overwrite the other boxes.

relative positioning is actually seen as part of the normal flow positioning model , because the position of the element is relative to his position in the normal flow.

3. Absolute Positioning

In contrast to relative positioning, absolute positioning is that the position of the element is independent of the document flow and therefore does not occupy space. The layout of other elements in a normal stream is as if an absolutely positioned element does not exist.

The position of an absolutely positioned element is determined relative to the position of the nearest ancestor element, if the element has no positioned ancestor element, then its position is relative to the initial containing block. Depending on the user agent, the initial containing block may be a canvas or HTML element.

By setting the z-index Property to control the stacking order of the positioned boxes, the higher the Z-index value, the higher the box's position in the stack.

The absolute positioning of the box relative to an ancestor element that has been positioned relatively well is achieved in most modern browsers. However, there are bugs in IE5.5 and IE6 on Windows. If you set the position of an absolutely positioned box relative to the right or bottom of a relatively positioned box, you need to make sure that the relative positioning box has the dimensions (width and height) set.

Absolute positioning is useful in the context of page layouts, especially in the case of using relatively positioned ancestor elements .

Because absolutely positioned elements are independent of the document flow (no placeholder), they do not affect the box in the normal stream. If you enlarge an absolutely positioned box (for example, by increasing the font size), the surrounding box (which refers to a box in the normal document flow) is not repositioned (and relative positioning is a placeholder), so any change in size results in an absolutely positioned box overlapping, which destroys the layout.

4. fixed positioning

Fixed positioning is an absolute positioning, and the difference is that the containing block of the fixed element is the viewport (viewport), so that we can create a floating element that always appears in the same position in the window.

IE6 and lower versions are not supported, the IE7 section supports this property and there are many bugs in the implementation.

5. Floating

The float box can move left and right until its outer edge touches the edge of the containing box or another floating box.

Because the float box is not in the normal flow of the document, the block box in the normal flow of the document behaves as if the floating box does not exist.

If the containing block is too narrow to accommodate 3 floating elements arranged horizontally , then the other floating blocks move downward until there is sufficient space. If the floating elements are different in height, they may be "stuck" by other floating elements when they move down. Such as:

Inline boxes and cleanup:

Floating will leave the element out of the document flow and no longer affect elements that do not float. In fact, not quite so. If a floating element is followed by an element in a document flow, then the box of the element will behave as if the float does not exist at all. However, the text content of the box is affected by the floating element and moves to make room . in technical terms, the line box next to the floating element is shortened to allow space for the floating element, so the row box surrounds the floating box. in fact, creating a floating box is where text can wrap around an image, such as:

To prevent a row box from wrapping around a floating box, you need to apply the clear property to the element that contains the row boxes, and the clear (clean Element) works by adding enough margin at the top of the element to drop the top edge of the element vertically below the floating box. such as:

Clear Floating method

(refer to link: http://www.cnblogs.com/ForEvErNoME/p/3383539.html )

Method 1 : Use with clear empty element of the property

After floating the element, use an empty element such as <div class= "clear" ></div>, and give the. Clear{clear:both in the CSS;} property to clean up the float. You can also use <br class= "clear"/> or

Pros: Simple, less code, better browser compatibility.

Cons: You need to add a lot of non-semantic HTML elements, the code is not elegant, late maintenance is not easy.

Method 2 : Using CSS the overflow Properties

Add Overflow:hidden to the container of the floating element, or overflow:auto; You can clear the float, and you also need to trigger haslayout in IE6, such as setting the container width height for the parent element or setting zoom:1.

After adding the overflow attribute, the floating element goes back to the container layer, and the container is propped up to achieve the effect of cleaning and floating.

Method 3 : Adds a float to the container of the floating element

Floating elements can also be added with floating properties to clear the inner float, but this will make it whole floating, affecting the layout, not recommended.

Method 4 : Handling with adjacency elements

Do nothing, add the clear property to the element that follows the floating element.

Method 5 : Using CSS of: after pseudo Element

Binding: After pseudo-element (note that this is not a pseudo-class, but a pseudo-element, representing the most recent element after an element) and iehack, can be perfectly compatible with the current mainstream of the major browsers, here Iehack refers to the trigger haslayout.

Add a Clearfix class to the container of the floating element, and then add one to the class: After the pseudo element implements the element end to add an invisible block element to clean up the float.

The CSS pseudo-element finally adds an invisible space "020" or a dot "." to the inner element of the container, and gives the clear property to clear the float. Note that in order to IE6 and IE7 browser, to Clearfix this class to add a zoom:1; trigger haslayout.  

Summarize:

From the above example, it is not difficult to see that the method of clearing floats can be divided into two categories:

One is to use the clear property, including adding an empty div with the Clear:both property at the end of the floating element to close the element, actually using: the after pseudo-element method also adds a content at the end of the element to a point with an element with the Clear:both attribute implemented.

The second is the BFC of the parent element that triggers the floating element (block formatting contexts, chunk-level formatting context) so that the parent element can contain floating elements.

Recommended:

Used in the main layout of the Web page: after pseudo-element method and as the main clearing-up floating mode, in small modules such as UL use Overflow:hidden; (note the possible hidden overflow element problem); if it is a floating element, you can automatically clear the inner float without extra handling The body uses adjacency elements to clean up previous floats.

Finally, you can use the relatively perfect: after pseudo-element method to clean up the float, the document structure is clearer.

"CSS Mastery" reading notes!

For my lover, cc!