Css+div Box Model Research Notes

The red flag is the default value

1, border (border): Border-top,border-bottom,border-left,border-right

1.border-color (border color);

2.border-width (Border thickness): medium|thin|thick| value;

3.border-style (Border style): none|hidden|dotted|dashed|solid|

2, padding (inner margin):p Adding-top,padding-bottom, Padding-left,padding-right

3, margin (margin): Margin-top,margin-bottom, Margin-left,margin-right

When margin is set to a negative number, the block that is set to a negative number moves in the opposite direction, and the setting is overlaid on the other block. When a parent-child relationship is between blocks, you can detach a block of text from the parent block by setting the margin of the child block to a negative number.

4, Background-color: (background color)

1. When setting the Background-color background color for an element, IE is content+padding, while Firefox is Content+padding+border.
The 2.body is a special box whose background color extends to the margin section.

Abbreviated form of the attribute:

1. If 2 attribute values are given, the former represents the upper and lower attributes, the latter representing the left and right properties.

2. If 3 attribute values are given, the former represents the attributes on, the middle value represents the left and right properties, and the latter represents the properties under.

3. If 4 attribute values are given, then the top, right, bottom, and left properties are then sorted clockwise.

Classification of elements

1. Block-level element (block): one row

Vertical Margin=max between block-level elements Div1 and Div2 (Margin_bottom,div2 of Div1 Margin-top)

2. In-line element (inline)

Horizontal margin= between inline elements span1 and span2 (span1 margin-right) + (span2 margin-left)

The float of the box:

1. Set float: float:none|left|right

2. Clear float: clear:none|left|right|both

Css+div Box Model Research Notes