CSS thorough research (2)-CSS Tutorial-php.cn

CSS thorough research (2)

Github pages blog post

1. CSS box model

1. The structure of the box

margin-border-padding structure + content content constitutes the box model

Note

width,height are taken It is the width and height of the content area, excluding padding border margin, but the actual height of the box must include the outer three (padding border margin)

The assignment order, clockwise, top (top)->right (right)- >Bottom->Left(left)

----top(1)----->|| |left(4) |right(2)| |

Assignment, one value, four values are this, such as margin: 10px; Assignment, two values, two values are assigned to top right, that is, the first two, and then, bottom = top, left = right assignment, three values, respectively assigned to top right bottom, that is, the first three, and then left = right assignment, four values, needless to say...

representation in various browsers html

Representation in browser developer tools } #test -div { padding: 10px; border: 5px dotted yellow; margin: 20px; background-color: red; Internal text

Chrome’s reddish margins, xx-colored border (can’t tell what color it is), cyan padding, and bluish content

IE10 , win8.1 browser offset, see the stackoverflow question, it is said that the offset after changing with relative absolute is the same as the position in chrome

2.border

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

border-width/color/style Set a certain attribute border-left: width color style Set the attributes on one side to be combined border-left-style: dotted;

Border and background for IE, background = content + padding for FF, background = content + padding + border. For small gaps, pay attention to

3.padding and margin

Assignment rules, as mentioned above, in summary: starting from top, clockwise, assign N values to the first N The others can be copied according to the principle of top-bottom left-right pairing. For one value, it means that all four are the same

body is a special box. By default, the body will have a number of px margins, and the body The background will expand to the margin part, that is, close to the browser, background-image and background-color will do this. The background of other boxes will reach the border (under FF) at most.

2. Standard document flow

1 .Abbreviated as standard flow

refers to the arrangement rules of various elements when other special CSS rules related to arrangement and positioning are not used.

The block-level element block, typically div ul li, is always expressed in the form of a block, and is arranged vertically in sequence with its sibling blocks at the same level, filling the left and right sides.

Inline elements, typically span a tags. Horizontal arrangement, automatic wrapping at the rightmost end

div can contain span style, but not vice versa, that is, span cannot contain div.

2. Block spacing

Horizontal spacing spacing of inline elements = margin-right of the left element + margin-left of the right element

Vertical spacing of block-level elements Vertical spacing = max (of the above elements margin-bottom, margin-top of the following element) This is the so-called collapse principle. The small margin collapses into the large margin. The margin of the nested div and the margin of the child div are placed in the content area of the parent div. It is reasonable. In an ideal situation,

margin is set to a negative value. Margin is actually the distance between the border and the outer border. Set margin-left to -50px; the entire box moves 50px to the left;

The above is the content of CSS (2) thoroughly studied, and more For more related content, please pay attention to the PHP Chinese website (www.php.cn)!