css常用样式和不常用样式

---

1、hover鼠标变小手

cursor: pointer

2、ul去除点

ul { list-style: none; } 

3、文字溢出显示省略号

（1）一行文字溢出显示省略号

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

（2）多行文字溢出显示省略号

.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、文字单词超出

（1）文字单词超出换行（word-wrap）

word-wrap
normal 只在允许的断字点换行（浏览器保持默认处理）。
break-word 在长单词或 URL 地址内部进行换行。

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

（2）文字单词超出换行(overflow-wrap)

overflow-wrap：用来设置浏览器是否应该在一个本来不能断开的字符串中插入换行符，以防止文本溢出其行向盒。
normal: 行只能在正常的单词断点（例如两个单词之间的空格）处换行。
anywhere: 为防止溢出，如果行中没有其他可接受的断点，则不可断的字符串（如长词或 URL）可能会在任何时候换行。在断点处不会插入连字符。在计算最小内容内在大小时，会考虑由单词换行引入的软换行机会。
break-word: 与 anywhere 值相同，如果行中没有其他可接受的断点，则允许在任意点将通常不可断的单词换行，但在计算最小内容内在大小时不考虑断字引入的软换行机会。

（3）CSS 英文、中文强制换行与不换行的代码（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、去除浮动

去除浮动常用的四种方法，前两种缺点明显，所以不详细举例

（1） 额外标签法： 给谁清除浮动，就在其后额外添加一个空白标签 。

优点： 通俗易懂，书写方便。（不推荐使用）
缺点： 添加许多无意义的标签，结构化比较差。

（2） 父级添加overflow方法

可以通过触发BFC的方式，实现清楚浮动效果。必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度

（3）使用after伪元素清除浮动（常用）

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

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

（4）使用before和after双伪元素清除浮动（常用）

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

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

6、背景图片（常用：background-size： cover）

用法：background-size: length|percentage|cover|contain;
length 设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动)
percentage 将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度，各个值之间以空格 隔开指定高和宽，以逗号 , 隔开指定多重背景。如果只给出一个值，第二个是设置为"auto(自动)"
cover 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
contain 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

7、img图片按内容撑开 （常用：object-fit: cover/ couter）

fill 默认，不保证保持原有的比例，内容拉伸填充整个内容容器。 尝试一下 »
contain 保持原有尺寸比例。内容被缩放。 尝试一下 »
cover 保持原有尺寸比例。但部分内容可能被剪切。 尝试一下 »
none 保留原有元素内容的长度和宽度，也就是说内容不会被重置。 尝试一下 »
scale-down 保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。

8、首行缩进两个汉字

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

9、 文本框文本域的光标颜色

主要就是使用caret-color，不一定要和下面一样使用标签选择器，也可以使用类名

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

参考文章：
word-wrap 属性： https://www.runoob.com/cssref/css3-pr-word-wrap.html
object-fit 属性： https://www.runoob.com/cssref/pr-object-fit.html
推荐写的object-fit 写的比较好的文章： https://blog.csdn.net/Kindergarten_Sir/article/details/110477105