One day practice-css CSS Percentage hundred points of use

Zi Yue: Learn hundred points, test scores

The first is to determine which properties in the CSS percentage can be applied to the CSS, and how the values of these properties are calculated, refer to the CSS Reference manual for statistics.

Positioning (positioning)

1. top
   Defines the offset from the top of the distance in percent. Percent reference contains the height of the block. Can be a negative value.
2. right
   Defines the offset to the right of the distance in percent. The percent reference contains the width of the block. Can be a negative value.
3. bottom
   The offset at the bottom of the distance is defined in percent. Percent reference contains the height of the block. Can be a negative value.
4. left
   The offset to the left of the distance is defined in percent. The percent reference contains the width of the block. Can be a negative value.

Size and filler (Dimension)

1. width
   Defines the width in percent. The percent reference contains the block width. Negative values are not allowed.
2. min-width
   Defines the minimum width in percent. Negative values are not allowed.
3. max-width
   Defines the maximum width in percent. Negative values are not allowed.
4. height
   Defines the height in percent. The percent reference contains the block height. Negative values are not allowed.
5. min-height
   Defines the minimum height in percent. Negative values are not allowed.
6. max-height
   Define the maximum height in percent. Negative values are not allowed
7. margin
   Use percentages to define the outer filler. In the horizontal (default) Writing mode, the calculation is evaluated with reference to its containing block, and width height can be negative for other cases.
8. padding
   Define the inner filler with a percentage. In the horizontal (default) Writing mode, the calculation is referenced by the containing block, and width height negative values are not allowed in other cases.

Background and border (backgrounds and Borders)

1. border-radius
   Defines the half-length axis of the circle radius or ellipse as a percentage, and the semi-short axis. The horizontal direction percentage refers to the element width (not the content width), and the vertical direction refers to the element height. Negative values are not allowed.
2. border-image-width
   Specifies the thickness of the image border as a percentage. Converts the size of the image border area (including border and padding). Negative values are not allowed.
3. background-position
   Specifies the position in the element where the background image appears in percent. Can be a negative value. Reference container size minus background map size for conversion.
4. background-size
   When the attribute value is a percentage, the area size of the background image is background-origin converted (rather than containing the block size).

Fonts (font)

1. font-size
   Specifies the text size in percent. The percentage value is based on the size of the font in the parent object. Negative values are not allowed.

Literal (text)

1. word-spacing
   Specifies the word interval in percent. Can be a negative value. (CSS3).
2. text-indent
   Specifies the indentation of the text in percent. Can be a negative value.
3. vertical-align
   Raise the current box (positive value) or decrease (negative) this distance, and the percentage is calculated relative to Line-height. A value of 0% is equivalent to baseline.
4. line-height
   Specifies the row height as a percentage, and the percentage is converted based on the font-size of the text. Negative values are not allowed.
5. text-size-adjust
   Use percentages to specify how the text size adjusts when the device size is different.

Telescopic box (flexible box) (new)

1. flex-basis
   Defines the width in percent. Negative values are not allowed.

Transform (Transform)

1. transform-origin
   Specifies the coordinate value in percent. Can be a negative value.
2. perspective-origin
   Specifies the pivot point coordinate value in percent, relative to the element width. Can be a negative value.

Summarize

2. When a,,, or a value in a position top right is a bottom left percentage, reference is made to the same direction as the containing block width or to the height calculated value
4. When the size and padding, and the height *-height width *-width value is a percentage, also refer to the same direction of the containing block width or height calculated value
6. In the case of dimensions and fillers, the padding margin horizontal (default) Writing mode is calculated with reference to its containing block, width meaning the same direction as the writing. (presumably because padding it is content-related and has no inheritance , it is easy to calculate values in the same writing direction)
8. The font font-size is based on the size of the font in the parent object (large is due to font-size inheritance)
10. The text is text-indent also calculated based on the containing block width (presumably the same direction of writing, verified to be true, when set writing-mode to vertical-lr , is calculated based on the containing block height )
12. The text line-height is based on the font-size calculation, and vertical-align it is based on the line-height calculation.

14. The background and the bounding rectangle background-position are based on the size of the container minus the background map (this is understood, because the value is 50%, which makes the image centered, that is)

    `background-position` = （容器尺寸-背景尺寸）/2

16. The background and border background-size are based on the background-origin area size (it is easy to zoom in or out of a graph, the following two graphs, respectively, are set to 50% and 33.3333% effect)
    
    

18. The width of the transform-origin horizontal axis reference element, the height of the ordinate reference element, when the value in the transformation is a percentage

One day practice-css CSS Percentage hundred points of use