******* Common CSS properties *********
【margin】
margin Retrieve or set the extended margins on the four sides of the object
margin-top Retrieve or set the extended margins of the top edge of the object
margin-right Retrieve or set the extended margins on the right side of the object
margin-bottom Retrieve or set the extended margin of the bottom edge of the object
margin-left Retrieve or set the extended margin of the left side of the object
argin: Retrieves or sets the outer margins of the object's four sides.
If all four parameter values are provided, they will be applied to the four sides in the order of upper, right, lower, and left.
If only one is provided, it will be used for all four sides.
If two are provided, the first one is for up and down, and the second one is for left and right.
If three are provided, the first one is for top, the second one is for left and right, and the third one is for bottom.
Inline objects can use this attribute to set the outer patches on the left and right sides; if you want to set the outer patches on the upper and lower sides, you must first make the object appear as block level or inline block level.
Extended margins are always transparent.
Some adjacent margins will merge, which we call margin folding:
General knowledge of margin folding:
Margin folding only Occurs on block-level elements;
The margin of a floating element does not collapse with any margin;
A block-level element that has the attribute overflow set and the value is not visible will not overlap with its children. The margin of the element is collapsed;
The margin of the absolutely positioned element does not collapse with any margin;
The margin of the root element does not collapse with any other margin;
auto: The value is set to the value of the opposite edge
: Use the length value to define the outer padding. Can be negative
: Use percentage to define outer padding. Can be negative
---------------------------------- --------------------------------------------------
****************************************** *************************************************** *********************
【padding】
padding Search Or set the internal padding on the four sides of the object
padding-top Retrieve or set the internal padding on the top edge of the object
padding-right Retrieve or set the internal padding on the right side of the object
padding-bottom Retrieve or set the internal padding of the bottom edge of the object
padding-left Retrieve or set the internal padding of the left side of the object
padding: Retrieve or set the object Internal margins on all four sides.
If all four parameter values are provided, they will be applied to the four sides in the order of upper, right, lower, and left.
If only one is provided, it will be used for all four sides.
If two are provided, the first one is for up and down, and the second one is for left and right.
If three are provided, the first one is for top, the second one is for left and right, and the third one is for bottom.
Inline objects can use this attribute to set the inner patches on the left and right sides; if you want to set the inner patches on the upper and lower sides, you must first make the object appear as block level or inline block level.
: Use length value to define inner padding. Negative values are not allowed
: Use percentage to define inner padding. Negative values are not allowed
---------------------------------- --------------------------
************ *************************************************** *******************************************
【text】
text-transform Retrieve or set the case of the text in the object
white-space Set or retrieve the processing of spaces in the object Method
tab-size Retrieve or set the length of the tab character in the object
word-wrap Set or retrieve whether the line is broken when the content exceeds the boundary of the specified container
word -Bream settings or retrieved objects in the text in the text in the text
Text-Align Set or retrieve the level of content in the retrieval object
Text-Align-Last setting or retrieve a block in a block The last line (including the case where there is only one line of text in the block, which is both the first and last line)
or the alignment of the line that is forcibly interrupted
text-justify or Retrieve the alignment used to adjust text within the object
WORD-SPACING Retrieval or Set the Smaller between the words in the objects, the maximum and best gap
Letter-Spacing retrieval or set the minimum, maximum and best gap
text-indent # row height. That is, the distance between the bottom of the font and the top of the inside of the font
------------------------- --------------------------
letter-spacing: Retrieve or set the spacing between characters in the object Minimum, maximum and optimal gaps.
This attribute adds the specified spacing after each letter (including each letter within the word);
letter-spacing cannot be applied to the beginning of a line and end;
normal: Default interval
: Specify the interval with a length value. Can be negative.
: Specify the interval in percentage. Can be negative.
----------------------------------------- --------------------------
line-height: Retrieve or set the line height of the object . That is, the distance between the bottom of the font and the top of the inside of the font.
Default value: normal
normal: Allow content to push or overflow the specified container boundaries.
: Use the length value to specify the line height. Can be negative.
: Use a percentage to specify the line height, and the percentage value is based on the height size of the font. Can be negative.
: Use the product factor to specify the row height. Can be negative.
----------------------------------------- -----------------------
text-align: Sets or retrieves the horizontal alignment of the content in the object.
The text of block-level elements is some stacked wireframes
To make text-align's justify alignment take effect, you need to insert spaces between Chinese characters, such as Space;
The last line of text in the block (including the case where there is only one line of text in the block, which is both the first and last line) and the line that is forcibly interrupted, need to use text to align both ends -align-last;
Under IE browser, if text-align-last is to take effect, text-align must be defined as justify;
The alignment effect of both ends of a single line becomes relatively simple:
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 left aligned.
center: The content is centered.
right: The content is right aligned.
justify: Align the content on both ends.
start: The content is aligned to the starting boundary. (CSS3)
end: Content alignment end boundary. (CSS3)
: The string must be a single character, otherwise the declaration will be invalid. (CSS3)
match-parent: This value behaves the same as inherit, except that the start or end keyword inherited by this value is calculated against the parent's direction value. The calculated values can be left and right. (CSS3)
start end: Specify start to align the first line and any forced interruption lines; end aligns all remaining lines and is not affected by text-align-last.
++++++++++++++++++++++++++++++++++++ ++++++++++++++++++++++++++++++++++++++++++++++++ +++++++++
A few points to note:
All major browsers support the justify attribute of text-align Value;
text-align does not process forcibly broken lines, nor does it process the last line in the block. In other words, if there is only one line of text in the block (the line is both the One line is also the last line), then just setting text-align:justify cannot align both ends of the line;
text-align-last is used to process the last line in the block and forcedly interrupted lines, so when you want to set the alignment of a single line of text at both ends, you need to use text-align-last;
Non-Firefox browsers must enable alignment at both ends. Spaces need to be inserted between the text, such as spaces (if there are only 2 Chinese characters in a line, Firefox also needs to insert spaces between them);
Chrome23, Safari5.1.7, Opera12.5 are still Text-align-last is not supported;
According to the above points, to achieve alignment of both ends of a single line, you can go in two directions:
Since all browsers support The justify attribute value of text-align does not fully support text-align-last. We can use pseudo objects to generate additional content for non-IE and IE7 and above browsers (IE7 and below browsers do not support pseudo objects, use text-align- last processing), place it on the second line and hide it. At this time, the first line of text (that is, the single line of text to be aligned) can be aligned using text-align:justify
Browsers that support text-align-last, such as IE and Firefox, use text-align-last processing, and browsers that do not support it use the above method;
So based on the current situation, use The first solution is relatively simple and can be easily compatible with IE5.5-10, Firefox, Chrome, Safari, Opera
++++++++++++ ++++++++++++++++++++++++++++++++++++++++++++++++ +++++++++++++++++++++++++++++++++++++++++++++++
text-align-last: Set or retrieve the last line in a block (including the case where there is only one line of text in the block, in which case it is both the first and last line)
or the alignment of lines that are forcibly interrupted
If a line is also the first line in the block or the first line but is followed by a forced line break, unless it is displayed Specify text-align first line alignment (value 'start end'), otherwise text-align-last will override text-align;
If the auto value is specified, the content alignment will be based on text -align setting, unless text-align is set to justify;
As one of IE's private attributes, IE5.5 was the first to implement text-align-last, which was later adopted as a standard attribute by w3c;
IE7 and below browsers only implement the alignment of the last line in the block, and do not handle the alignment of forcibly interrupted lines. Starting from IE8, both forms of line alignment are supported;
Under IE browser, if text-align-last is to take effect, text-align must first be defined as justify;
auto: No special alignment.
left: The content is left aligned.
center: The content is centered.
right: The content is right aligned.
justify: Align the content on both ends.
start: The content is aligned to the starting boundary.
end: Content alignment end boundary.
----------------------------------------- ---------
text-indent: Retrieve or set the indent of the text in the object.
To use this property on an inline object, you must first make the object appear as block level or inline block level.
The hanging and each-line keywords follow the indentation value
div{text-indent:2em each-line;}
: Use the length value to specify the indentation of the text. Can be negative.
: Specifies the indentation of the text using percentages. Can be negative.
each-line: Define the indentation to be applied to the first line of the block container or the first line of each forced line break inside. Soft line breaks are not affected. (CSS3)
hanging: Reverse all indented lines.
----------------------------------------- -------------------------------------------------- -----------
text-transform: Retrieve or set the case of the text in the object.
none: No conversion
capitalize: Convert the first letter of each word to uppercase
uppercase: Convert each word to Uppercase
lowercase: Convert each word to lowercase
full-width: Convert all characters to fullwidth form. If a character does not have a corresponding fullwidth form, it will be left intact. This value is commonly used for typesetting ideographic symbols such as Latin characters and numbers.
----------------------------------------- -------------------------------------------------- ------------------
vertical-align: Sets or retrieves the vertical alignment of inline elements within the line box.
baseline: Align the content of the object that supports the valign feature to the baseline
sub: Vertically align the subscript of the text
super: Vertically align the text The superscript
top: Align the content of the object that supports the valign feature to the top of the object
text-top: Align the text of the object that supports the valign feature to the top of the object
middle: Align the content of an object that supports the valign feature to the middle of the object
bottom: Align the text of an object that supports the valign feature to the bottom of the object
text-bottom: Will support the valign feature Align the object's text to the top of the object
: Use a percentage to specify the offset from the baseline. Can be negative. The baseline for percentages is 0%.
: Use the length value to specify the offset from the baseline. Can be negative. The baseline is 0 for numeric values.
----------------------------------------- -------------------------------------------------- ------------
word-break: Set or retrieve the word-break behavior of the text within the object.
To solve the problem of preventing continuous meaningless long characters in the page from breaking the layout, break-all should be used;
As one of the private attributes of IE, IE5.5 It was the first to implement word-break, which was later adopted as a standard attribute by w3c;
normal: According to the text rules of Asian languages and non-Asian languages, line breaks within words are allowed.
keep-all: Same as normal for all non-Asian languages. For Chinese, Korean, and Japanese, word breaks are not allowed. Good for non-Asian text that contains a small amount of Asian text.
break-all: This behavior is the same as normal in Asian languages. Breaks within any word of a line of non-Asian language text are also allowed. This value is suitable for Asian text that contains some non-Asian text, such as making consecutive English letters break lines.
-------------------------------------------------- ---------------
word-wrap: Sets or retrieves whether to break lines when the content exceeds the boundaries of the specified container.
normal: Allow content to push or overflow the specified container boundaries.
break-word: Content will break within boundaries. Line breaks are allowed within words if necessary.
----------------------------------------- ----------------------------
The above is the content of summary three of common CSS properties. Please pay attention to more related content. PHP Chinese website (m.sbmmt.com)!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
