CSS knowledge points and css knowledge points

CSS knowledge points and css knowledge points

CreateTime -- September 29, 2016 09:43:10
Author: Marydon
1. linear gradient of background color

Background-color: linear-gradient (100deg, # FFF, #111);/* indicates the degree of deg from black to white */

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

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

UpdateTime -- October 29, 2016 09:04:07
3. Set the div minimum height and height to automatically stretch

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

<Div id = "divHeight"> This div has the minimum height and the height can be automatically stretched as the content increases <br/> This div has the minimum height and the height can be increased as the content increases auto stretch </div>

Set the minimum width and width for auto Scaling

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

4. Two Ways to disable line breaks
Method 1:
Normally, documents displayed in the browser will automatically wrap when they reach the bottom of the browser's banner, but if the text is included in <nobr> ~ </Nobr> If the label is in, the line feed is not displayed.
Use the <nobr> </nobr> label
Method 2:
Use CSS styles

style="white-space:nowrap;"

UpdateTime -- November 25, 2016 08:57:49
Disable line feed for td

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

UpdateTime -- October 31, 2016 09:44:17
5. display style
Inline line element (occupies one line with other elements without line breaks, width and height cannot be set)
Block-level elements (occupying a single row, width and height can be set)
Inline-block the block-level element in a row (occupies one row with other elements, but the width and height can be set) (with the features of the line element and block-level element)
None hides this element

Document. getElementById ("aa "). style. display = ""; // indicates that the display style is cleared. The default value is used for display (the block element is changed to block, and the inline element is changed to inline)

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

/* Shielded input method, which can be used to disable Chinese Input */ime-mode: disabled; // compatible with IE, chrome is not compatible with <input type = "text" name = "mobile">/* replace all input English letters with uppercase letters */text-transform: uppercase; <input type = "text" name = "mobile">/* replace all the entered English letters with lowercase letters */text-transform: lowercase; <input type = "text"> details
Ime-mode Syntax: (this syntax is invalid on google browsers and requires JavaScript control. For details, see "input content control in the input text box)
Ime-mode: auto | active | inactive | disabled
Valid value:
Auto: default value. The IME status is not affected. Same as when the ime-mode attribute is not specified
Active: Specify all characters entered using IME. Activate the local language input method. You can still cancel IME activation.
Inactive: specifies all characters that do not use IME. Activate a non-local language. You can still cancel IME activation.
Disabled: Completely disable IME. For controls with focus (such as input boxes), you cannot activate IME.
Text-transform Syntax:
Text-transform: none | capitalize | uppercase | lowercase
Valid value:
None: default value. No conversion occurred
Capitalize: converts the first letter of each word into uppercase letters, and the rest are not converted.
Uppercase: Convert to uppercase
Lowercase: Convert to lowercase
7. Set automatic line feed for content in the div
When the div box is fixed with the height and width, the displayed content exceeds the div width and does not wrap the content.
Set css styles
　　word-wrap:break-word;
8. Implement div. When the content in li exceeds the container width, the excess content is displayed "..".
Premise: you must first determine the width of the div and li
Add attribute
　　text-overflow:ellipsis;　　white-space:nowrap;　　overflow:hidden;
9. Text Box and Password box display style Control in IE browser
/* Remove the cross sign on the right of the IE browser text box */# aa:-ms-clear {display: none;}/* remove the eyes on the right of the IE browser Password box */# bb :: -ms-reveal {display: none ;}
<input id="aa" type="text"/><input id="bb" type="password"/>