A collection of CSS knowledge points

This article introduces a collection of CSS knowledge points

createtime--2016 September 29 09:43:10
Author:marydon
1. Background color linear gradient

Background-color:linear-gradient (100deg, #FFF, #111); */* from black to white gradient deg for degrees */

updatetime--2016 October 25 11:37:53
updatetime--2016 November 23 09:53:46
2. Set the border of the table to be merged into a single border

border-collapse:collapse;/* premise: Table border=1 or border= "1" or border= "1px" */

updatetime--2016 October 29 09:04:07
3. Set p minimum height and height automatic stretching

#pHeight {height:auto;min-height:5px;width:800px; background: #bbeeeb; margin:0 auto;}

<p id= "Pheight" > this P has a minimum height and height can be automatically extended as the content increases <br/> this p has a minimum height and height can be automatically stretched as the content increases </p>

Set the minimum width and width for automatic stretching

width:auto;min-width:5px;height:800px;

4. Two ways to prohibit line breaks
Way One:
A document that is typically displayed on a browser wraps itself when it reaches the bottom of the browser's banner, but does not wrap if the text is included in the <nobr>~</nobr> tag.
Use <nobr></nobr> tags
Way two:
Using CSS Styles

Style= "WHITE-SPACE:NOWRAP;"

updatetime--2016 November 25 08:57:49
Set TD to Prohibit line wrapping

<TD nowrap= "nowrap" ></td>

updatetime--2016 October 31 09:44:17
5.display style
Inline in-line elements (one row with other elements, no wrapping, no width and height)
Block-level elements (single row, can be set width and height)
Inline-block inline block-level elements (one row with other elements, but can be set and high) (with features of inline and block-level elements)
None hides the element

document.getElementById ("AA"). style.display= "";//means: Clear display style, display will use default value (block element will become block, inline element will become inline)

updatetime--2016 November 24 11:44:31
6.ime-mode syntax and text-transform syntax
updatetime--2016 December 15 19:52:16

/* Shielding Input method, can be used to prohibit entry in Chinese * * ime-mode:disabled;　　IE compatible, chrome is not compatible <input type= "text" name= "mobile" style= "ime-mode:disabled;"/>/* converts the English letter entered into uppercase letters */　　Text-transform:uppercase; <input type= "text" name= "mobile" style= "text-transform:uppercase;/>updatetime--2017 year January 9 10:23:23/*　　Converts the English letter entered into lowercase letters */text-transform:lowercase; <input type= "text" style= "text-transform:lowercase;" />

Detailed Introduction
Ime-mode Syntax: (this syntax is not valid on Google Browser, you need to use JS control, see "Input text Box import content control" file)
Ime-mode:auto | active | Inactive | Disabled
Value:
Auto: Default value. Does not affect the state of the IME. Same as do not specify Ime-mode property
Active: Specifies all characters that are entered using the IME. The local language input method is activated. Users can still revoke the activation IME
Inactive: Specifies all characters that do not use IME input. The non-native language is activated. Users can still revoke the activation IME
Disabled: Disables the IME entirely. The user cannot activate the IME for a control that has focus (such as an input box)
Text-transform Syntax:
Text-transform:none | Capitalize | Uppercase | lowercase
Value:
None: Default value. No conversion occurs
Capitalize: Converts the first letter of each word to uppercase, and the remaining no conversions occur
Uppercase: Convert to uppercase
Lowercase: Convert to lowercase
7. Set content in p to wrap
When the P-box is fixed to a height width, the contents of the display exceed the width of p, which is beyond the line-wrapping problem
Set CSS Styles

Word-wrap:break-word;

8. When the content in the P,li exceeds the width of the container, the part "..." is exceeded. form display
Prerequisite: The width of the p,li must be determined first
Add Property

Text-overflow:ellipsis;　　White-space:nowrap; Overflow:hidden;

9. text box and Password box display style control in IE browser

/* Remove the cross on the right side of the IE browser text box */#aa::-ms-clear {display:none;　　*/* Remove IE browser password box to the right of the eye */#bb::-ms-reveal {display:none; }

<input id= "AA" type= "text"/><input id= "BB" type= "Password"/>