Summary of CSS Knowledge

CSS, although there are often some tinkering work, but no system to think about. These days to some basic things overall over a bit, make a record, convenient to see later.

1. Box model

The size of the box itself is calculated like this:
Width:width + padding-left + padding-right + border-left + border-right
Height:height + padding-top + padding-bottom + border-top + border-bottom
We know from the figure that the width (total physical width)/height (total physical height) is determined by the sum of the width/height,padding,border.

Margin is the margin, someone called the filler, will not show up. However, the relative position of adjacent elements is affected, for example, regardless of the overlay, the new element is drawn outside the margin-bottom of the element.

One thing to note: There are two types of guides in the margin attribute, the top and left guides belong to a class, and the guides for right and bottom belong to another category. Top and left are other elements for reference, and right and bottom are referenced by the elements themselves. There are two different types of estimates that the browser document flow is drawn from top to bottom, from left to right.

2. Block and inline elements

The HTML (in this case, the HTML standard, not XHTML) is divided into two basic elements, block and inline. As the name implies, the block element is a "block" representation of the element, the inline element is a "line" expression of elements. The main difference between the two is that the block element in the page document begins with a row, and a single row is exclusive. the inline element is in line with the other inline elements, and the height of the inline setting is generally not effective, it is not a block .
Block elements (blocks) are roughly: p| F12 h2| h3| h4| h5| h6| ul| ol| pre| DL | DIV | NOSCRIPT | BLOCKQUOTE | FORM | HR | TABLE | fieldset | ADDRESS (with the advancement of the HTML5 standard, some elements will be abolished, and some new elements will be introduced) note that not all of the default display properties of the block element are blocks, such as the display of table: The element of table is also the block element.
Inline elements (inline elements) are roughly: #PCDATA (that is, text) | TT | I | B | BIG | small| EM | Strong | DFN | CODE | SAMP | KBD | VAR | CITE | ABBR | acronym| A | IMG | OBJECT | BR | SCRIPT | MAP | Q | SUB | SUP | SPAN | bdo| INPUT | SELECT | TEXTAREA | LABEL | BUTTON
There are special types of elements, such as Img|input|select|textarea|button|label, which are referred to as replaceable elements (replaced element). They distinguish between the general inline elements (in contrast, the non-replaced element): These elements have intrinsic dimensions (intrinsic dimensions), and they can set the Width/height properties. Their nature is consistent with the elements that set the Display:inline-block.

3. BFC

BFC is a separate layout environment, the layout of elements in BFC is unaffected by the outside world, in a BFC, blocks and rows are vertically aligned along the border of their parent elements (example), when an element triggers a new BFC, It creates a small environment in which a block and row are vertically arranged along the border of their parent element. The so-called document flow is a root BFC.

Element will trigger a new BFC if the following CSS settings are available:

Float value other than none
Overflow values other than visible (Hidden,auto,scroll)
Display (Table-cell,table-caption,inline-block)
Position (absolute,fixed)
FieldSet elements

Features of the BFC:
1) block-level formatting contexts prevent margin overlays . When two adjacent block boxes are in the same block-level formatting context, the vertical margin between them will overlap. In other words, if the two adjacent block boxes do not belong to the same block-level formatting context, their margins are not superimposed.

2) block-level formatting contexts do not overlap floating elements. As a rule, the bounding rectangle of a block-level formatting context cannot overlap the margins of the elements inside it . For this reason, it will not work when a negative margin is added to a block-level formatting context that is next to floating (WebKit and IE6 have a problem at this point).

3) block-level formatting contexts can often contain floats. The calculation of the BFC auto height is included in the width of the floating element. Example W3c

In layman's terms: the element that created the BFC is a separate box in which the child elements do not affect the outside elements on the layout, and vice versa, while the BFC still belongs to the normal flow in the document .

4. Float

The floating box can move left and right until its outer edge encounters the edge of the containing box or another floating box. A floating box does not belong to a normal stream in the document, and when an element floats, it does not affect the layout of the block-level box but only the arrangement of the inline box (usually text), and the normal flow in the document behaves as if the float box is not present, and when the float box height exceeds the containing box, It will also appear that the inclusion box does not automatically stretch to close the floating element ("height collapse" phenomenon). As the name implies, is floating on the ordinary stream, like a cloud, but only left and right floating.

The height of collapse is not our pleasure to see, how to clear floating it?

There are two categories:

One is to set the Clear:both property by adding an empty element at the end of the floating element;

When the element behind the floating element is set to clear to close the float in the relevant direction, according to the specifications, the closed floating element will produce a certain void (clearance) above its margin-top, which prevents the folding of the element margin-top, And as the spacing exists above the margin-top of the element.

Clear the height after floating (example)

Second, the float is closed by setting the parent element overflow or the Display:table property. The parent element is set overflow (except for the visible), because BFC has a feature that contains a floating element, and the child element is included in the parent element.

This article speaks of BFC and floats, very well.

-----------------------------------a split line waiting to be replenished----------------

5. Position

6. Margin

Margin overlap

Margin Negative

7. Various common layouts

7. Reuse of CSS

Summary of CSS Knowledge