css common style and uncommon style

---

1. The hover mouse becomes smaller

cursor: pointer

2. ul removal point

ul {
    
     list-style: none; } 

3. Text overflow shows ellipsis

(1) A line of text overflows and displays an ellipsis

.div{
    
    
	width: 100px;
	height: 20px;
	border: 1px solid red;
	white-space: nowrap;/* 强制文本在一行中显示 */
	overflow: hidden;/* 隐藏文本的超出部分 */
	text-overflow: ellipsis;/* 使用省略号代替文本超出部分 */
}

(2) Multi-line text overflows and displays an ellipsis

.div{
    
    
 overflow: hidden;
  text-overflow: ellipsis;
  width: 200px;
  /* 将对象作为弹性伸缩盒子模型显示 */
  display: -webkit-box;
  /* 限制在一个块元素显示的文本的行数 */
  /* -webkit-line-clamp 其实是一个不规范属性，使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；*/
  -webkit-line-clamp: 2;
  /* 设置或检索伸缩盒对象的子元素的排列方式 */
  -webkit-box-orient: vertical;
}

4. Text words exceed

(1) Text words beyond line breaks (word-wrap)

word-wrap
normalonly wraps at allowed breakpoints (browsers keep the default handling).
break-word Line breaks inside long words or URL addresses.

.div{
    
    
	word-wrap:break-word;
}

(2) The text word exceeds the line break (overflow-wrap)

overflow-wrap: Used to set whether the browser should insert line breaks in an otherwise unbreakable string to prevent the text from overflowing its line box.
normal: Lines can only break at normal word breaks (such as spaces between two words).
anywhere: To prevent overflow, unbreakable strings such as long words or URLs may wrap at any time if there are no other acceptable breakpoints in the line. Hyphens are not inserted at breakpoints. The chance of soft wrapping introduced by word wrapping is taken into account when calculating the minimum content intrinsic size.
break-word: Same as the anywhere value, allows normally unbreakable words to wrap at any point if there are no other acceptable breakpoints in the line, but does not take into account soft-wrap opportunities introduced by wordbreaks when computing the minimum content intrinsic size.

(3) CSS English and Chinese codes for forced line breaks and non-line breaks (word-break)

1. word-break:break-all; 只对英文起作用，以字母作为换行依据
2. word-wrap:break-word; 只对英文起作用，以单词作为换行依据
3. white-space:pre-wrap; 只对中文起作用，强制换行
4. white-space:nowrap; 强制不换行，都起作用
5. white-space:nowrap; overflow:hidden; text-overflow:ellipsis; 不换行，超出部分隐藏且以省略号形式出现

5. Remove floating

Four commonly used methods to remove floating, the first two have obvious disadvantages, so no detailed examples

(1) Extra label method: For someone who clears the float, add an additional blank label after it.

Advantages: Easy to understand and easy to write. (Not recommended)
Disadvantages: Many meaningless tags are added, and the structure is relatively poor.

(2) The parent adds the overflow method

A clear floating effect can be achieved by triggering the BFC. Width or zoom:1 must be defined, and height cannot be defined at the same time. When overflow:hidden is used, the browser will automatically check the height of the floating area

(3) Use the after pseudo-element to clear the float (commonly used)

将类名clearfix 放到要去除浮动的父盒子上即可

/*伪元素是行内元素 正常浏览器清除浮动方法*/
.clearfix:after{
    
    
  content: "";
    display: block;
    height: 0;
    clear:both;
    visibility: hidden;
}
.clearfix{
    
    
    *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}

(4) Use before and after double pseudo-elements to clear floats (commonly used)

将类名clearfix 放到要去除浮动的父盒子上即可

.clearfix:after,.clearfix:before{
    
    
   content: "";
    display: block;
    clear: both;
}

6. Background image (commonly used: background-size: cover)

Usage: background-size: length|percentage|cover|contain;
length sets the height and width of the background image. The first value sets the width, and the second value sets the height. If only one value is given, the second is set to auto (automatic)
percentage will calculate the percentage of the positioning area relative to the background. The first value sets the width, and the second value sets the height. Each value is separated by a space to specify the height and width, and separated by a comma, to specify multiple backgrounds. If only one value is given, the second is set to "auto"
cover which maintains the aspect ratio of the image and scales the image to the smallest size that will completely cover the background positioning area.
contain then maintains the image's aspect ratio and scales the image to the largest size that will fit within the background positioning area.

7. The img image is stretched according to the content (commonly used: object-fit: cover/ couter)

fill default, does not guarantee to maintain the original ratio, the content is stretched to fill the entire content container. Try it out »
contain Keeps the original size ratio. The content is scaled. Try it out »
cover Keeps original size ratio. However, some content may be cut. Try it out »
none keeps the length and width of the original element content, ie the content will not be reset. Try it out »
scale-down keeps the original size ratio. The size of the content is the same as either none or contain, whichever of the two results in a smaller object size.

8. The first line is indented with two Chinese characters

/* 字体x，text-indent 是字体的两倍就是缩进两个汉字 */
.div {
    
    
 font-size: 16px; 
 text-indent: 32px;
}

9. The cursor color of the text field of the text box

The main thing is to use caret-color, you don’t have to use the label selector as below, you can also use the class name

/*设置文本框的光标位置*/
input[type=text] {
    
    
  caret-color: red;
}
/*设置文本区的光标位置*/
textarea {
    
    
  caret-color: red;
}

Reference article:
word-wrap property: https://www.runoob.com/cssref/css3-pr-word-wrap.html
object-fit property: https://www.runoob.com/cssref/pr-object- fit.html
recommends writing better articles written by object-fit: https://blog.csdn.net/Kindergarten_Sir/article/details/110477105