user-select的详细用法和outline:none

user-select的详细用法

做网页的时候,有些文字我们需要能被选中,有些我们不要能被选中,那么这就需要用到一个css属性了,那就是 user-select

user-select: none|auto|text|contain|all;
 
/*firefox浏览器*/
-moz-user-select: none|text|all;
 
/*safari、chrome浏览器*/
-webkit-user-select: none|text|all; /*Safari中不支持该属性值,只能使用none或者text,或者是在html的标签属性中使用*/
 
/*ie浏览器*/
-ms-user-select: none|text|element;
 
属性值:
none :  元素和子元素的文本将无法被选中

text :  文本可以被选中

auto :  文本将根据浏览器的默认属性进行选择

all  :  当所有内容作为一个整体时可以被选择。如果双击或者在上下文上点击子元素,那么被选择的部分将是以该子元素向上回溯的最高祖先元素

contain、element :  可以选择文本,但选择范围受元素边界的约束,也就是选择的文本将包含在该元素的范围内。只支持Internet Explorer
注意:
浏览器实现之间的区别之一是继承。在Firefox中,-moz-user-select不是由绝对定位的元素继承的,但在Safari和Chrome中,-webkit-user-select却是由绝对定位的元素继承而来的。

outline:none

CSS outline:none;表示使outline属性无效bai,使绘制于元素周围的du一条线无效。zhi

outline属性包括:outline-color、outline-style、outline-width:

outline-color :设置元dao素轮廓的颜色,其取值与border-color类似。只有当outline-style不为none时才有效。默认为transparent。

outline-style :设置元素轮廓的格式,其取值与border-style类似,但没有hidden值。默认为none,无轮廓。

outline-width:设置元素轮廓的宽度,其取值与border-width类似。只有当outline-style不为none时才有效。

因此,CSS设置 outline:none时,outline-color、outline-style、outline-width都会无效,即元素轮廓的颜色、元素轮廓的格式、元素轮廓的宽度都无效,即达到不显示元素轮廓的效果。

当元素获得焦点的时候,焦点框为0.
比如说当前这个网页,你用tab键切换的时候,文字链接、搜索框、按钮等的外面会有一个虚线框(或高亮框),此时当前的元素就获得了焦点,你可以对它进行操作。
这个功能一般是为使用键盘操作的用户准备的。
有些链接——比如一个图片链接,你不想让他出现虚线框破坏设计感,就可以用此方法。

建议一般不要去掉,只在一些影响设计美感的地方用。毕竟这个焦点框对键盘用户是很有帮助的。
 
 
原文地址:https://www.cnblogs.com/xiejn/p/13962931.html