关于div的outline-offset属性和focus事件的接收

outline-offset属性设置轮廓框架在 border 边缘外的偏移.

Outlines在两个方面不同于边框：

Outlines 不占用空间
Outlines 可能非矩形

outline-offset越大，越容易向外偏移：

outline-offset越小，越容易向内偏移：

<html>
<style>
div {margin:20px;height: 70px;border: 1px solid green;outline: 1px solid red;outline-offset: 4px;
}
</style><body><div>1</div><div>2</div><div>3</div>
</body>
</html>

绿色的是border，红色的是offset：

offset从4px改成-4px：

默认本页面里只有button可以focus，div没办法接受focus：

给div添加tabindex="1"的属性后，就可以接收focus事件了：

tab键的focus会根据属性tabindex的值从小到大进行移动，tabindex = -1则无法接收tab focus事件。

更多Jerry的原创文章，尽在：“汪子熙”:

关于div的outline-offset属性和focus事件的接收相关推荐

CSS轮廓（outline）属性详解及 outline 与 border 的区别
轮廓(outline) 轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用. 在浏览器里,当鼠标点击或使用Tab键让一个链接或者一个radio获得焦点的时候,该元 ...
Js之offset属性与style属性的区别
Js之offset属性 offset翻译过来就是偏移量, 我们使用 offset 系列相关属性可以动态的得到该元素的位置.大小等. 如果元素没有父级元素或者父级元素没有定位(祖先元素也可以),则以bo ...
CSS的outline轮廓属性：轮廓属性
outline (轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用. 注释:轮廓线不会占据空间,也不一定是矩形. outline 简写属性在一个声明中设置所有的轮廓属性. 可以 ...
教你玩转CSS 轮廓（outline）属性
目录 CSS 轮廓(outline) 所有CSS 轮廓(outline)属性 CSS 轮廓(outline) 轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用. ...
jxls向右循环为什么会间隔单元格_VBA中单元格的Offset属性，你是否能灵活的利用呢？...
大家好,我们今日继续讲解VBA代码解决方案的第122讲内容:如何在VBA中使用单元格Offset 属性.其实这讲的内容非常的简单,只是有很多的朋友要求再详细的讲一下,顺便再引申一下.谈到Offset属 ...
JQuery框架2.位置属性|筛选方法|事件
1.位置属性 jquery的css position获取匹配元素相对父元素的偏移位置:offset获取匹配元素在当前视口的相对偏移,返回的对象包含两个整型属性:top 和 left $("p ...
js 捕获子元素的 focus 事件
focus 事件可以绑定任何元素,但只有可编辑元素才可以触发 focus 事件.且 focus 事件不会冒泡. 所以不能在父元素监听子元素的 focus 事件. focusin 事件与 focus 一 ...
用户表单事件(focus事件)
以前做用户系统的时候经常用到表单验证,正则表达式事件来处理和绑定事件和进行事件,这里说的其实只是一小部分,也不是很值得写,但是今天遇到了还是写一下,毕竟基础还是蛮重要的,就算懂的童鞋,巩固一下也是好的 ...
reactinput聚焦事件_React focus 事件的坑
React 的 focus 事件实现有问题 React 的 focus 事件会冒泡,但是原生 DOM 的 focus 事件是不冒泡的: 原生 DOM 的 focusin 事件是会冒泡的,但是现在 Re ...

关于div的outline-offset属性和focus事件的接收

关于div的outline-offset属性和focus事件的接收相关推荐

最新文章

热门文章