CSS + DIV for learning notes: CSS Box Model

CSS design: Chapter 2

* Marked in red is the default value.

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

1. border-color (border color );

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

4. border-style (border style): none | hidden (hidden) | dotted (dotted line) | dashed (DOT line) | solid (solid line) | double (double line) | groove (not supported by IE) | ridge (not supported by IE) | inset (not supported by IE) | outset (not supported by IE ).

• Padding(Padding ):Padding-top, padding-bottom, padding-left, padding-right
• Margin(Outer margin ):Margin-top, margin-bottom, margin-left, margin-right
  When margin is set to a negative number, the blocks that are set to a negative number will move in the opposite direction, and even cover other blocks. When a block is in a parent-child relationship, you can set the margin parameter of the sub-block to a negative number to separate the sub-block from the parent block.
• Background-color(Background color)
  1. When setting the background-color background color for the element, the content + padding area is used by IE, while Firefox is content + padding + border.
  2. The body is a special box, and its background color will extend to the margin part.
• Attribute Value

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

2. If three attribute values are given, the former indicates the upper attribute, the middle value indicates the left and right attributes, and the latter indicates the lower attributes;

3. If four attribute values are given, the top, right, bottom, and left attributes are sequentially sorted clockwise.

• Standard stream
  The so-called "Standard stream" refers to the arrangement rules of various elements without using other special CSS rules related to arrangement and positioning.
• Element Classification

1.Block-level elements): Occupies one row

Vertical margin = MAX between div1 and div2 (div1's margin-bottom, div2's margin-top ).

2.Inline)

Horizontal margin between span1 and span2 in the row = margin-right of span1 + margin-left of span2.

• Box float

1. Set float: none | left | right

2. clear floating: clear: none | left | right | both

• Extend the height of the box

Actual Effect

Expected results

The range of a div is determined by the standard stream content in it and is irrelevant to the floating content in it.

[Solution] Add a div behind it and set the style as follows:

. Father. clear {

Margin: 0;

Padding: 0;

Border: 0;

Clear: both;

}

* Note: the parent div must be specified here, and the original settings for margin, padding, and border must be overwritten.

• Box Positioning
  Position:Static | relative | absolute | fixed
  1.Static:This is the default property value, that is, the box is arranged according to the standard stream (including the floating mode.
  2.Relative:Relative positioning.
  (1) In addition to setting the position attribute to relative, you also need to specify a certain offset. the horizontal direction is specified through the left (to the right) or right (to the left) attribute, the vertical direction is specified by the top (down) or bottom (up) attributes.
  (2) If a relatively located box is used, it will arrive at a new location through the specified offset relative to its original location;
  (3) The relative box is still in the standard stream, and it has no effect on the father and brother boxes.
  3.Absolute:Absolute positioning.
  (1) Use the absolute position box to locate it with its "nearest" and "already located" (The position attribute is set and it is not static) the "ancestor element" of is the baseline offset. If no ancestor element has been located, It will be located based on the browser window;
  (2) The absolute positioning boxes are used to separate from the standard stream, which means they have no effect on the positioning of the subsequent brother boxes. The other boxes are as if they do not exist;
  (3) If absolute positioning is set and the offset attribute is not set, it will remain at the original position. This attribute can be used to remove an element from the standard stream, but it is still expected to remain at its original position;
  (4) IE6 BUG: the incorrect position and the correct position differ from the padding width of the parent div.
  [Solution] Add a CSS style to the parent div (the baseline box for positioning): height: 1%;
  4.Fixed(Not supported by IE6):It is called fixed positioning. It is similar to absolute positioning, but is positioned based on the browser window.
• Display of the boxAttribute
  Display:Inline | block | none