css中颇有用的属性

　　有些css属性很实用，但不经常使用也就被忘记。

　　这里纪录了本身在项目中用过的一些。

　　

html,body{
  -webkit-tap-highlight-color:transparent;
}

这个的用途是：手机端用a标签或是表单的地方，点击时候有闪烁，用户体验很很差。加上它就能够啦~

 

html,body{
 user-select：none;
}

user-select有4个值，
none：文本不能被选择
all：全部内容做为一个总体时能够被选择
text：能够先择文本
element：能够选择文本，但选择范围受元素边界的约束

input:-webkit-autofill {
  -webkit-box-shadow : 0 0 0 100px white inset ;
}

去掉chorme浏览器input表单保存帐号密码后默认填充的黄色背景。

 

 

div{
        word-break: keep-all;
        white-space:nowrap;
    }

规定自动换行的处理方法，在table中可能用得多一点。

word-break: normal | break-all | keep-all;
分别是使用浏览器默认换行规则，容许在单词内换行，只能在半角空格或连字符处换行。

white-space：normal | pre | nowrap | pre-wrap | pre-line | inherit
分别是 默认。空白会被浏览器忽略。 | 空白会被浏览器保留 | 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止 | 保留空白符序列，可是正常地进行换行。 | 合并空白符序列，可是保留换行符。 | 规定应该从父元素继承 white-space 属性的值。

没有添加前

添加这两个属性后

 

resize : none | both | horizontal | vertical:

分别是：没法调整大小，可调整宽度和高度，可调整宽度，可调整高度

使用后可以让div想textarea那样被拉大，缩小。不过通常都不会用到。

 

object-fit CSS 属性指定替换元素的内容应该如何适应到其使用的高度和宽度肯定的框。

适用于替换元素，如图片。

 object-fit: fill / contain / cover / none / scale-down

对比使用后效果，分别用固定大小div，宽高不定div作了测试，用到了横图和长图，cover真好用，不再用担忧图片过长太高后显示不正常了！

 

 

 

 

 

暂时只遇到了这些，项目中有新发现再来补充。。。