A collection of CSS knowledge points

This article introduces a collection of CSS knowledge points

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

background-color:linear-gradient(100deg,#FFF,#111);/*由黑色向白色渐变 deg表示度数*/

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

border-collapse: collapse;/*前提：table的border=1或border="1"或border="1px"*/

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

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

<p id="pHeight"> 　　　
此p具有最小高度且高度可以随着内容的增高而自动伸展 
<br/>　　此p具有最小高度且高度可以随着内容的增高而自动伸展 
</p>

Set the minimum width and width to automatically stretch

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

4. Two ways to disable line breaks
Method 1:
Usually the document displayed on the browser will not reach the browser banner. Automatically wrap at the bottom, but if the text is contained in ~ tags, it will not wrap
Use the tag
Method 2:
Use CSS style

style="white-space:nowrap;"

UpdateTime--November 25, 2016 08:57:49
Set td to prohibit line breaks

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

UpdateTime--October 31, 2016 09:44:17
5.display style
inline Inline elements (occupies one line with other elements, No line wrapping, width and height cannot be set)
block Block level element (occupies one line alone, width and height can be set)
inline-block Inline block level element (occupies one line with other elements, but width and height can be set) High) (has the characteristics of both inline elements and block-level elements)
None Hide the element

document.getElementById("aa").style.display="";//表示的是：清除display样式，display将使用默认值（块元素会变成block，内联元素会变成inline）

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

/*屏蔽输入法，可以用来禁止录入中文*/
　　ime-mode:disabled; //IE兼容，chrome不兼容
　　<input type="text" name="mobile" style="ime-mode:disabled;" />
/*将输入的英文字母转全部换成大写字母*/
　　text-transform:uppercase;
　　<input type="text" name="mobile" style="text-transform:uppercase;" />
UpdateTime--2017年1月9日10:23:23
/*将输入的英文字母转全部换成小写字母*/
　　text-transform:lowercase;
　　<input type="text" style="text-transform:lowercase;"/>

Detailed introduction
ime-mode syntax: (This syntax is invalid on Google browser and needs to be controlled with js, see the "input text box input content control" file)
ime-mode: auto | active | inactive | disabled
Value:
auto: Default value. Does not affect the status of IME. Same as when the ime-mode attribute is not specified
Active: Specifies all characters entered using IME. That is to activate the local language input method. The user can still deactivate the IME
inactive : Specifies all characters that are not entered using the IME. That is to activate non-native languages. The user can still deactivate the IME
Disabled: Disables the IME completely. For focused controls (such as input boxes), users cannot activate IME
Text-transform syntax:
Text-transform: none | capitalize | uppercase | lowercase
Value:
None: Default value. No conversion occurs
Capitalize: Convert the first letter of each word to uppercase, and no conversion occurs for the rest
Uppercase: Convert to uppercase
Lowercase: Convert to lowercase
7. Set p in Automatic content wrapping
When the p box has a fixed height and width, the displayed content exceeds the width of p, and the content does not wrap beyond the width
Setting the css style

　　word-wrap:break-word;

8. When the content in p and li exceeds the width of the container, the excess part will be displayed in the form of ".."
Prerequisite: The width of p and li must be determined first
Add attributes

　　text-overflow:ellipsis;
　　white-space:nowrap;
　　overflow:hidden;

9. Text box and password box display style control in IE browser

/*去除IE浏览器文本框右侧出现叉号*/
　　#aa::-ms-clear {
　　　　display:none;
　　}
　　/*去除IE浏览器密码框右侧出现眼睛*/
　　#bb::-ms-reveal {
　　　　display:none;
　　}

<input id="aa" type="text"/><input id="bb" type="password"/>　

The above is the detailed content of A collection of CSS knowledge points. For more information, please follow other related articles on the PHP Chinese website!