CSS style Sheets (iii)

Summary of CSS styles commonly used by front-end personnel in the learning development process:

"Margin"

Margin retrieves or sets the epitaxial margins of four edges of an object

Margin-top retrieves or sets the epitaxial margins of the top edge of an object

Margin-right retrieves or sets the extended margins on the right side of the object

Margin-bottom retrieves or sets the epitaxial margins at the bottom edge of an object

Margin-left retrieves or sets the outer margin of the left edge of the object

Argin: Retrieves or sets the epitaxial margins of the four edges of an object.

If you provide all four parameter values, the top, right, bottom, and left orders are used for four edges.

If only one is provided, it will be used for all four sides.

If two is provided, the first one is for top, bottom, and second for left and right.

If three is supplied, the first one is used on, the second one is for left, right, and the third is for the next.

Inline objects can use this property to set the outer patches on the left and right sides; To set up an outer patch on the upper and lower sides, you must first make the object appear as a block-level or inline block-level.

The extended margins are always transparent.

Some adjacent margin will merge, which we call margin folding:

Margin Folding general Cognition:

Margin folding occurs only on block-level elements;

The margin of a floating element does not collapse with any margin;

A block-level element that has an attribute overflow and whose value is not visible will not have a margin collapse with its child elements;

The margin of an absolutely positioned element does not collapse with any margin;

The margin of the root element does not collapse with any other margin;

Auto: value is set to the value of the relative edge

: Use the length value to define the outer filler. Can be a negative value

: Use a percentage to define the outer filler. Can be a negative value

※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※

"Padding"

padding retrieves or sets the internal margins for four sides of an object

Padding-top retrieves or sets the inner margin of the top edge of an object

Padding-right retrieves or sets the inner margin to the right of the object

Padding-bottom retrieves or sets the inner margin of the bottom edge of an object

Padding-left retrieves or sets the internal padding to the left of the object

padding: Retrieves or sets the internal margins of the four edges of an object.

If you provide all four parameter values, the top, right, bottom, and left orders are used for four edges.

If only one is provided, it will be used for all four sides.

If two is provided, the first one is for top, bottom, and second for left and right.

If three is supplied, the first one is used on, the second one is for left, right, and the third is for the next.

Inline objects can use this property to set the inner patches on the left and right sides, and to set the inner patches on the upper and lower sides, you must first make the object appear as a block-level or inline block-level.

: Use the length value to define the inner filler. Negative values are not allowed

: Defines the inner filler with a percentage. Negative values are not allowed

※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※

"Text"

Text-transform retrieves or sets the case of text in an object

White-space to set or retrieve the handling of spaces within an object

Tab-size retrieves or sets the length of a tab in an object

Word-wrap Sets or retrieves whether a line break occurs when the content exceeds the bounds of the specified container

Word-break to set or retrieve word wrap behavior in text within an object

Text-align to set or retrieve the horizontal alignment of content in an object

Text-align-last Sets or retrieves the last row within a block, including only one line of text within a block, at which point the first and last line

Or the alignment of the line that was forced to break

Text-justify to set or retrieve the alignment used for adjusting text within an object

Word-spacing retrieves or sets the minimum, maximum, and optimal gap between words in an object

Letter-spacing retrieves or sets the minimum, maximum, and optimal clearance between characters in an object

Text-indent retrieves or sets the indentation of text in an object

Vertical-align Sets or retrieves the vertical alignment of an object's contents

Line-height retrieves or sets the row height of the object. That is, the distance between the bottom of the font and the top of the font

※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※

Letter-spacing: Retrieves or sets the minimum, maximum, and optimal clearance between characters in an object.

This property adds the specified interval to each text (including each letter within the word);

Letter-spacing cannot be applied to the beginning and end of a line;

Normal: Default interval

: Specify the interval with a length value. Can be a negative value.

: Specifies the interval in percent. Can be a negative value.

※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※

Line-height: Retrieves or sets the row height of the object. That is, the distance between the bottom of the font and the top of the font.

Default value: Normal

Normal: Allows the content to open or overflow the specified container boundary.

: Specifies the row height with the length value. Can be a negative value.

: Specifies the row height in percent, and the percentage value is based on the height size of the font. Can be a negative value.

: Specifies the row height with the product factor. Can be a negative value.

※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※

Text-align: Sets or retrieves the horizontal alignment of content in an object.

The text of a block-level element is some stacked wireframe

In order to make the justify of text-align effective, it is necessary to insert a blank between Chinese characters, such as space;

The last line of text within the block, including the case where there is only one line in the block, both the first and last lines, and the rows that are forcibly interrupted, are justified by using Text-align-last;

IE browser, if text-align-last to take effect, must first define text-align for justify;

The single-line justification effect becomes simpler:

Li{overflow:hidden;width:200px;height:21px;text-align:justify;text-align-last:justify;}

Li:after{display:inline-block;overflow:hidden;width:100%;height:0;content: ';}

Left: Content is aligned to the right.

Center: Content Center-aligned.

Right: the content is justified.

Justify: Content is justified on both sides.

Start: Content snaps to the start boundary. (CSS3)

End: Content aligns to the end boundary. (CSS3)

: The string must be a single character, otherwise the declaration will be invalid. (CSS3)

Match-parent: This value is consistent with inherit, except that the start or end keyword inherited by this value is calculated for the parent's direction value, and the computed value can be left and right. (CSS3)

Start end: Specify start on Zidi line and any forced break lines; End aligns all remaining rows unaffected by Text-align-last.

※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※

Several points to note:

All major browsers support Text-align's justify attribute values;

Text-align does not handle the line that forces the break, nor does it handle the last line within the block, in other words, if there is only one line of text in the block (which is both the first and last line), then only the text-align:justify cannot justify the line;

The text-align-last is used to handle the last line within the block and the forced break lines, so when you want to set a single line of text to justify, use text-align-last;

Non-Firefox browser in order to make the two sides to take effect, you need to insert space between the text, such as space (if there is only 2 characters in a row, Firefox also need to insert a blank between);

Chrome23, Safari5.1.7, Opera12.5 not yet support text-align-last;

According to the above points, to achieve single-line two-way alignment, you can go 2 directions:

Since all browsers support Text-align's justify property values, but not all text-align-last, we can generate additional content for non-IE and IE7 browsers using pseudo-objects (IE7 and the following browsers do not support pseudo-objects. with text-align-last processing), placed in the second row and hidden, the first line of text (that is, the single line to be aligned) can be aligned using text-align:justify

Support Text-align-last browser, such as IE, Firefox using text-align-last processing, unsupported browser use as described above method of processing;

So in the present situation, the first option is relatively simple, can be easily compatible with ie5.5-10, Firefox, Chrome, Safari, Opera

※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※

Text-align-last: Sets or retrieves the last row within a block, including only one line of text within a block, at which point is both the first and last line

Or the alignment of the line that was forced to break

If a row is also the first row in the block or the first row but followed by a forced line break, the Text-align-last will overwrite the text-align unless the specified text-align first line alignment (value ' Start end ') is displayed;

If the auto value is specified, the content alignment will be based on the Text-align setting, unless Text-align is set to justify;

As one of the private properties of IE, IE5.5 took the lead in realizing Text-align-last, which was adopted as standard attribute in the later period.

IE7 and the following browsers implement only the alignment of the last line within the block, and do not handle the alignment of rows that are forced to break, starting with IE8, both forms of line alignment are supported;

IE browser, if text-align-last to take effect, must first define text-align for justify;

Auto: No special alignment.

Left: Content is aligned to the right.

Center: Content Center-aligned.

Right: the content is justified.

Justify: Content is justified on both sides.

Start: Content snaps to the start boundary.

End: Content aligns to the end boundary.

※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※

Text-indent: Retrieves or sets the indentation of text in an object.

Inline object to use this property must first make the object appear as a block-level or inline block-level.

Hanging and Each-line keywords are immediately followed by indent values

Div{text-indent:2em Each-line;}

: Specifies the indentation of the text with a length value. Can be a negative value.

: Specifies the indentation of the text in percent. Can be a negative value.

Each-line: Defines the indentation effect on the first line of a block container or inside each forced wrap, with soft-wrap not affected. (CSS3)

Hanging: Reverses all rows that are indented.

※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※

Text-transform: Retrieves or sets the case of the text in the object.

None: No conversion

Capitalize: Converts the first letter of each word to uppercase

Uppercase: Convert each word to uppercase

Lowercase: convert each word to lowercase

Full-width: Converts all characters to fullwidth form. If the character does not have a corresponding fullwidth form, it will remain intact. This value is typically used to format ideographic symbols such as Latin characters and numbers.

※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※

Vertical-align: Sets or retrieves the inline element's vertical alignment within the row box.

Baseline: Aligns the contents of objects that support the valign feature with the baseline

Sub: subscript for vertical aligned

Super: Superscript of vertical aligned aligned

Top: Aligns the contents of objects that support the valign attribute with the top of the object

Text-top: Aligns the text of an object that supports the valign attribute with the top of the object

Middle: Aligns the contents of objects that support the valign attribute with the middle of the object

Bottom: Aligns the text of the object that supports the valign attribute to the bottom of the object

Text-bottom: Aligns the text of an object that supports the valign attribute with the top of the object

: Specifies the offset from the baseline as a percentage. Can be a negative value. The baseline is 0% for a percentage.

: Specifies the offset from the baseline with the length value. Can be a negative value. The baseline is 0 for numeric values.

※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※

Word-break: Sets or retrieves the word wrapping behavior of text within an object.

Break-all should be used to resolve the layout of long characters that prevent consecutive meaningless occurrences in the page;

As one of the private properties of IE, IE5.5 took the lead in realizing Word-break, which was adopted as standard attribute in the later period.

Normal: Allows line wrapping in words according to the text rules in Asian and non-Asian languages.

Keep-all: Same as normal for all non-Asian languages. For Chinese, Korean, Japanese, word break is not allowed. Suitable for non-Asian text containing small amounts of Asian text.

Break-all: The behavior is the same as in Asian languages. Also allows non-Asian-language text lines to be broken within any word. This value is suitable for Asian text that contains some non-Asian text, such as making continuous English letters discontinuous.

※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※

Word-wrap: Sets or retrieves whether a line break occurs when the content exceeds the bounds of the specified container.

Normal: Allows the content to open or overflow the specified container boundary.

Break-word: Content will be wrapped within the boundary. If necessary, word breaks are allowed inside words.

　　

　Ai Chong Class-professional front-end HTML5 training organization

Love to create class adhering to the pure dry goods, not the attitude of the focus on the front-end training, so that each 0 of the basic students can really from the beginner to proficient.

Friends who want to learn the front end can click on the word "↑".

　　Love to create a front-end interest tribe, pure dry share　

　

CSS style Sheets (iii)