CSS thorough research (2)

CSS thorough research (2)

Github Pages Blog

One. CSS Box model

1. Structure of the box

Margin-border-padding structure + content composition box model

Attention

Width,height is the width of the content area, excluding the padding border margin, but the actual height of the box is calculated on the outer three (padding border margin)

Assignment order, clockwise, up (top), right (straight), left (bottom)

----Top (1)----->| | |left (4) Right (2) | |<---bottom (3)----

Assignment, a value, four values are this, such as margin:10px, assignment, two values, two values assigned to top right, that is, the first two, then bottom = top, left = right assignment, three values, respectively assigned to top right bottom, also Is the first three, then left = right assignment, four values, do not say more ...

Representation of HTML in each browser

<! DOCTYPE html>

Chrome red margin of XX color border (what color, can't call out) bluish padding

ie10,win8.1 browser offset, see StackOverflow problem, said is relative absolute change after the shift, with the position in Chrome

2.border

Border:width (2px) color (green) style (dotted/dashed)

Border-width/color/style set a property border-left:width color style Set the properties on one side can be border-left-style:dotted together;

border with background for ie,background = content + padding for ff,background = content + padding + border small gap, be aware

3.padding and margin

Assignment rules, said above, summed up is: Starting from top, clockwise, n values are assigned to the first n, the other basis Top-bottom left-right pairing copy of the principle can be, for a worthy, said four all the same

Body Special box, in the default case, the body will have a number of PX margin, and the body of the background will extend to the margin section, that is, close to the browser, Background-image and Background-color will do so, the other boxes background up to border (FF).

Two. Standard document Flow

1. Referred to as standard flow

The arrangement rules for various elements when you do not use other special CSS rules related to arranging and positioning.

Block-level element blocks, the typical Div ul Li is always in the form of a block, and with the siblings of the sibling between the block, in turn vertical arrangement, left and right full.

Inline elements, typically with span a label tags. Horizontal arrangement, the right end of the automatic folding line

A div can contain a span style, whereas a span cannot contain a div.

2. Block spacing

Horizontal spacing of elements within rows = Margin-right of Left element + Margin-left of right element

Vertical spacing of block-level elements Vertical spacing = max (Margin-bottom of the above element, margin-top of the element below) this is the so-called collapse principle, and the small margin collapses into the big margin.

The margin of a nested div's margin div is placed in the content area of the parent Div, which is a reasonable ideal situation

Margin set to a negative margin is actually the distance from the outer boundary of the border, the Margin-left is set to -50px, the box is shifted to the left 50px;

The above is the CSS thorough research (2) of the content, more relevant content please pay attention to topic.alibabacloud.com (www.php.cn)!

