css div box model research notes_html/css_WEB-ITnose

The red mark 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 (padding): padding-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, it will cause the block set to a negative number to move in the opposite direction and set overlay on another block. When there is a parent-child relationship between blocks, the word block can be separated 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, the area that IE works on is content padding, while Firefox uses content padding border. .
2. The body is a special box, and its background color will extend to the margin.

Abbreviated form of attribute:

1. If two attribute values ​​are given, the former represents the upper and lower attributes, and the latter represents the left and right attributes.

2. If 3 attribute values ​​are given, the former represents the upper attribute, the middle value represents the left and right attributes, and the latter represents the lower attribute.

3. If 4 attribute values ​​are given, they represent the attributes of top, right, bottom, and left in order, sorted clockwise.

Classification of elements

1. Block-level elements (block): occupy one line

The vertical margin between block-level elements div1 and div2=MAX(margin_bottom of div1, div2's margin-top)

2. Inline elements (inline)

The horizontal margin between the inline elements span1 and span2=(span1's margin-right) (span2's margin-left)

Box float:

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

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