CSS Properties Summary

-only attributes for block-level elements

Width,height (These two can be used to replace elements)

Text-align, Text-indent, Vertical-align (also available for table cells and replacement elements such as INPUT/IMG)

Background-position (Note the difference between percentages and absolute values, and this property affects the tiling effect)

[Basic visual formatting]

1. Box model :
-Background includes content box, padding, and border, margins are usually transparent, showing the background of the parent element;

2. Horizontal Properties :

-Left (right) margin of the child element, left (right) padding, left (right) border, and the value of the width of the content box must be equal to the parent element's content box width;

-If you set Margin-left,margin-right,width (only these three values can be set to auto) and the remaining one is auto, the value of the property set to Auto is automatically calculated to fill the width of the parent element:

* If three values are non-auto specific values (over constrained), then Margin-right will be forced to auto; * If one of the margin is set to auto, the other sets a specific value, the width is set to auto, The margin set to auto is placed at 0; * If width is set to a specific value and two margin is set to auto, the horizontal center is **!!

-The padding of the parent element is superimposed with the margin of the child element;

-The default width of the non-replacement element is determined by its content; setting width to auto (such as IMG) for the replacement element will be its original width, and if only width is set, the height will change proportionally and vice versa.

3. Vertical Properties :

Similar to horizontal attributes, different points/Note points:

-If you set Margin-top or Margin-bottom to auto, it will default to 0, so you cannot center it vertically unless you display the setting with a specific value;
-When setting a child element height using a percentage, the child element height defaults to auto if the height value of the parent element is not displayed;
-If the parent element contains only child block-level elements, the parent element's height will not contain the margin of the child element, unless the parent element has border or padding!! Why, because the margin will overlap in the vertical direction. Thus, to avoid overlapping, it is necessary to use border and padding to separate the adjacent margin oh;

Inline Elements :
-Line-height (row box height) is the height of its content for the replacement element. Therefore, replace the element no Line spacing (line-height-font-size), and for non-replacement elements, the height of the content box plus the line spacing;
-For lines that contain only text, only Line-height, Font-size, vertical-align can change the distance between the rows.

Non-replacement elements:

-text overlap may occur when the Line-height value is less than font-size, to avoid this behavior can be set Line-height to 1 em (need to set font-size) or 1 (according to the font-size scaling factor), In addition, it inherits the computed value of the parent element instead of the literal, unless explicitly defined;

-The padding, margins, and borders of the inline elements do not affect row heights. The margin is only left and right, invalid, but if there is positive padding and background, it is possible to overwrite the adjacent row (still does not affect the row height and layout, that is, set the inner margin row height will not be high);

Replace element:

-The inner margin, margin, and border of an inline element affect the row height, and the up and down margin is valid.
-Setting a height value for IMG will affect the row height, but the valid value of its line-height will not change, and some properties, such as vertical-align, are still calculated using line-height valid values;
-If a replacement element is a block-level element or the only descendant of a table cell, it is placed on the baseline, such as IMG in P. WORKAROUND: Use negative margin to pull it down or set display to block to avoid generating a row box.

4. Other

-Display Properties:

   * When the display property of an element is set to Inline-block, it behaves like an inline substitution element, and if it does not explicitly define width, it automatically shrinks to fit the content width, which means that it has exactly the width of the content and is not redundant;   The Set element display property is run-in, which means that if the element is followed by an element that displays as a block, the element behaves as if the element in the row is placed at the beginning of the subsequent element, otherwise it will appear as a block-level element.   * for floating or absolutely positioned elements, the computed value may differ from the declared value. Most of the declared values (including inline,inline-block,run-in) other than inline-table are computed as blocks.

[Border, margin, padding]

1. Margin
   -If a percentage is used, the calculated value is relative to the width value of the parent element (not height). Even the Margin-top!

2. Border
   -A value that is not specified will use the default value, e.x.:

   {border:solid 1px dotted;  border:1px;}

   Here the second border setting overrides the first one, because there is no border-style set in the second, the default is none, so there will be no border;

[Floating and positioning]

Floating:

2. Margin of floating elements will not be merged;

4. Suppose you want to make a non-replacement element float, you need to specify a width, otherwise it will be the minimum width floating by the browser;

6. Floating elements generate a block-level box, regardless of the element itself;

8. The top of a floating element cannot be higher than the top of its parent element or all previous floating elements;

10. When floating elements overlap with elements in the document flow:
    (1) If it is a block-level element, its contents will be above the floating element, while the border and background are below;
    (2) If it is an inline element, its contents, borders, and background are above the floating element and will not be overwritten.
    This is independent of the order in which elements appear in the document flow.

12. The floating element must contain all of its floating child elements;

14. When you use the Clear property to clear a float, such as clear:left, you are actually adding margin-top to the element that sets the clear property. Therefore, it is possible that even if the element is set to Margin-top, it will be tightly connected to the floating element unless the value of margin-top is large enough. To make a gap between the two, you can set the margin-bottom of the floating element.

    Positioning:

16. Absolute positioning

    * If the parent element is a block-level element and the value of the position is non-static, the child element absolute is positioned as the bounding rectangle of the outer boundary relative to the parent element;
    * By specifying the value of top, bottom, left and right, you can implicitly specify the width height of the element;
    * Properties that are set to auto except bottom, will default to the corresponding value of the static position of the element;
    * In the horizontal/vertical direction, the value of Right/bottom is ignored when the element is over-limited (the value of left and right and the sum of each dimension in the horizontal direction of the element is not equal to the parent element width). If there is a property set to auto, then change its value to meet the former equation, if two are equally divided, so it can be used to center (margin set to auto, the other values are 0)!
    * Assuming that an element has a set z-index value, all its child elements are placed relative to the stacking context, and the css2.1 specifies that all elements must never be placed under the background of their stacking context, but can be under its content;

18. Fixed positioning
    The value of *right is always equal to the value of-left,bottom always equals-top.

Continue to update in .....

This article refers to the "CSS authoritative guide"

-Only attributes for block-level elements

Width,height (These two can be used to replace elements)

Text-align, Text-indent, Vertical-align (also available for table cells and replacement elements such as INPUT/IMG)

Background-position (Note the difference between percentages and absolute values, and this property affects the tiling effect)

[Basic visual formatting]

1. Box model :
-Background includes content box, padding, and border, margins are usually transparent, showing the background of the parent element;

2. Horizontal Properties :

-Left (right) margin of the child element, left (right) padding, left (right) border, and the value of the width of the content box must be equal to the parent element's content box width;

-If you set Margin-left,margin-right,width (only these three values can be set to auto) and the remaining one is auto, the value of the property set to Auto is automatically calculated to fill the width of the parent element:

* If three values are non-auto specific values (over constrained), then Margin-right will be forced to auto; * If one of the margin is set to auto, the other sets a specific value, the width is set to auto, The margin set to auto is placed at 0; * If width is set to a specific value and two margin is set to auto, the horizontal center is **!!

-The padding of the parent element is superimposed with the margin of the child element;

-The default width of the non-replacement element is determined by its content; setting width to auto (such as IMG) for the replacement element will be its original width, and if only width is set, the height will change proportionally and vice versa.

3. Vertical Properties :

Similar to horizontal attributes, different points/Note points:

-If you set Margin-top or Margin-bottom to auto, it will default to 0, so you cannot center it vertically unless you display the setting with a specific value;
-When setting a child element height using a percentage, the child element height defaults to auto if the height value of the parent element is not displayed;
-If the parent element contains only child block-level elements, the parent element's height will not contain the margin of the child element, unless the parent element has border or padding!! Why, because the margin will overlap in the vertical direction. Thus, to avoid overlapping, it is necessary to use border and padding to separate the adjacent margin oh;

Inline Elements :
-Line-height (row box height) is the height of its content for the replacement element. Therefore, replace the element no Line spacing (line-height-font-size), and for non-replacement elements, the height of the content box plus the line spacing;
-For lines that contain only text, only Line-height, Font-size, vertical-align can change the distance between the rows.

Non-replacement elements:

-text overlap may occur when the Line-height value is less than font-size, to avoid this behavior can be set Line-height to 1 em (need to set font-size) or 1 (according to the font-size scaling factor), In addition, it inherits the computed value of the parent element instead of the literal, unless explicitly defined;

-The padding, margins, and borders of the inline elements do not affect row heights. The margin is only left and right, invalid, but if there is positive padding and background, it is possible to overwrite the adjacent row (still does not affect the row height and layout, that is, set the inner margin row height will not be high);

Replace element:

-The inner margin, margin, and border of an inline element affect the row height, and the up and down margin is valid.
-Setting a height value for IMG will affect the row height, but the valid value of its line-height will not change, and some properties, such as vertical-align, are still calculated using line-height valid values;
-If a replacement element is a block-level element or the only descendant of a table cell, it is placed on the baseline, such as IMG in P. WORKAROUND: Use negative margin to pull it down or set display to block to avoid generating a row box.

4. Other

-Display Properties:

   * When the display property of an element is set to Inline-block, it behaves like an inline substitution element, and if it does not explicitly define width, it automatically shrinks to fit the content width, which means that it has exactly the width of the content and is not redundant;   The Set element display property is run-in, which means that if the element is followed by an element that displays as a block, the element behaves as if the element in the row is placed at the beginning of the subsequent element, otherwise it will appear as a block-level element.   * for floating or absolutely positioned elements, the computed value may differ from the declared value. Most of the declared values (including inline,inline-block,run-in) other than inline-table are computed as blocks.

[Border, margin, padding]

1. Margin
   -If a percentage is used, the calculated value is relative to the width value of the parent element (not height). Even the Margin-top!

2. Border
   -A value that is not specified will use the default value, e.x.:

   {border:solid 1px dotted;  border:1px;}

   Here the second border setting overrides the first one, because there is no border-style set in the second, the default is none, so there will be no border;

[Floating and positioning]

Floating:

2. Margin of floating elements will not be merged;

4. Suppose you want to make a non-replacement element float, you need to specify a width, otherwise it will be the minimum width floating by the browser;

6. Floating elements generate a block-level box, regardless of the element itself;

8. The top of a floating element cannot be higher than the top of its parent element or all previous floating elements;

10. When floating elements overlap with elements in the document flow:
    (1) If it is a block-level element, its contents will be above the floating element, while the border and background are below;
    (2) If it is an inline element, its contents, borders, and background are above the floating element and will not be overwritten.
    This is independent of the order in which elements appear in the document flow.

12. The floating element must contain all of its floating child elements;

14. When you use the Clear property to clear a float, such as clear:left, you are actually adding margin-top to the element that sets the clear property. Therefore, it is possible that even if the element is set to Margin-top, it will be tightly connected to the floating element unless the value of margin-top is large enough. To make a gap between the two, you can set the margin-bottom of the floating element.

    Positioning:

16. Absolute positioning

    * If the parent element is a block-level element and the value of the position is non-static, the child element absolute is positioned as the bounding rectangle of the outer boundary relative to the parent element;
    * By specifying the value of top, bottom, left and right, you can implicitly specify the width height of the element;
    * Properties that are set to auto except bottom, will default to the corresponding value of the static position of the element;
    * In the horizontal/vertical direction, the value of Right/bottom is ignored when the element is over-limited (the value of left and right and the sum of each dimension in the horizontal direction of the element is not equal to the parent element width). If there is a property set to auto, then change its value to meet the former equation, if two are equally divided, so it can be used to center (margin set to auto, the other values are 0)!
    * Assuming that an element has a set z-index value, all its child elements are placed relative to the stacking context, and the css2.1 specifies that all elements must never be placed under the background of their stacking context, but can be under its content;

18. Fixed positioning
    The value of *right is always equal to the value of-left,bottom always equals-top.