Proficient in CSS and HTML design patterns-book Note 2-Box Model

Inline)
1. width, height, and. Verflow does not work on inline elements because they are always consistent with the width and height of the content.
2. Valid values: margin-top and margin-bottom.
Margin-left, margin-right is invalid.
3. Line-Height: Set the Row Height.
4. Border-left: Right Shift of its element
Border-Right: Right Shift of the next element
Border-top, border-bottom: it is displayed outside of the padding, but it does not extend the Row Height or change the position of the element in the vertical direction. the border may overwrite the adjacent rows. in this case, unless line-height is added
5. the padding is also consistent with the border.
Inline-block)
1. The effects of width, height, margin, border, and padding are consistent with those of block elements.
2. firefox2 does not support display: inline-block. Use-moz-inline-box;
3. Do not assign the display: inline-block to the substitution elements (such as IMG and object) because the browser automatically considers them as inline block elements.
Block Box Model)
1. The block element can be larger than the parent element. In this case, the Attribute Overflow is used to handle overflow.
2. Width: auto, which makes the width of the element consistent with that of the parent element.
3. Height: auto, which wraps the height of an element into all its child elements.
4. The Border width is within the width range.
Table box model (Block)
1. The table has a margin but no padding.
2. The cell does not have any outer margin, but has an internal margin.
3. Width: the width of the perimeter of the border (including the width of the border), rather than the width in the padding.
4. Height: the height of the perimeter of the border (including the height of the border), rather than the height inside the padding.
Absolute positioning box model
1. Left, right, top, and bottom are based on the left side of the container.
2. When width, left, right: Auto, the box model is wrapped.
3. When width: auto, left, right: 0 or other values, the box model is stretched.
4. Width, left: There is a value. When right: Auto, the box model is fixed and deviated from the left side.
5. Width, right: there is a value. When left: Auto: the box model is fixed in size and deviated from the right side.
Floating Box Model
1. The floating element is placed above the border and background of the adjacent block element instead of the normal element arrangement order.