outline小技巧

浠ラ箍发布于2019-08-29 11:12 / 1276人阅读

摘要：是干什么的定义轮廓是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。以上是但上说明。但我的理解是，它跟是一样是元素的边框，但是它又有别于他的大小不会计算到元素上，不会影响布局，而是会的。

outline是干什么的

定义
outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

以上是但w3c上说明。但我的理解是，它跟border是一样是元素的边框，但是它又有别于border：outline 他的大小不会计算到元素上，不会影响布局，而border是会的。
如：

.box{width:300px; outline:3px solid #eee;}/*这里的的box的宽度为300*/
.bod{ width:330px; border:3px solid #eee}/*这里的box的宽度为306*/

怎么用

相信你已经知道怎么用了，就跟border一样的用。语法如下

outline: [  ||  ||  ] | inherit

也可以像border那样分开写

.box{
  outline-width: 1px;
  outline-style: dashed;
  outline-color: red;
}

使用场景

看了其它例子一般用在元素的:active 上，用来标明突出元素正在被点击。但其它可以用它代替掉border的。
像这种.active状态，当前状态的图片加一个边框，如果使用border加的话，会改变原来布局。但使用outline完全没问题

.]

支持程度

firefox下的特殊性

这东西好用是好用，代替个border也没什么问题，但是我发现这货在firfox搞特殊，
其它浏览器是以设置了outline的元素的高度（宽度）上添加的边框
在火狐下，是以设置了的outline的元素的所有子元素，包含隐藏的元素的高度（宽度）上添加边框
不太好理解哈？看例子链接描述
其它浏览器都这样

firefox下却多了一大截大底部。

outline是把元素的所有子孙元素最大的那个为基准来定的高宽，像上面这个例子ul.w-select-ul已经设置了absolute，但outline还是为它预留高度
而其它浏览器则是以元素实际的高度设置

这种情况避免使用outline，或者为元素加上overflow: hidden;

GPU云服务器云服务器小技巧小技巧全集 PowerShell小技巧 ios小技巧

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111498.html

你所不知道的 CSS 负值技巧与细节

摘要：大家最为熟知的就是负，使用负的，可以用来实现类似多列等高布局垂直居中等等。那还有没有其他一些有意思的负值使用技巧呢下文就再介绍一些负值有意思的使用场景。但是希望无论左侧内容较多还是右侧内容较多，两栏的高度始终保持一致。写本文的起因是，一天在群里有同学说误打误撞下，使用负的 outline-offset 实现了加号。嗯？好奇的我马上也动手尝试了下，到底是如何使用负的 outline-o...

FrozenMap 2019-08-30 15:44 评论0 收藏0
Flutter — 加快开发速度的 IDE 快捷操作#yyds干货盘点#

摘要：夏天加快开发速度的快捷操作干货盘点快捷方式你可以用做更多神奇的事情选项返回这是您在中加快开发速度的魔杖。加快开发速度的快捷操作干货盘点选项卡不喜欢小部件用魔术棒取下它。 Flutter — 加快开发速度的 IDE 快捷方式上一个关于vscode 的插件推荐大家看的过瘾不，今天继续给大家带来一些关于android s...

番茄西红柿 2021-11-24 09:39 评论0 收藏2637
哪些你知道或不知道的css，在这里或许都齐全

摘要：简单就意味着更快的开发速度，更小的维护成本，同时往往具有更好的体验下面我介绍哪些或许你不知道小技巧。默认为，此时阴影与元素同样大。如果没有指定，则由浏览器决定通常是的值，不过目前取透明。首先，我们要明白这里的最小宽度值是什么意思。暑假实习的时候带我的师傅，告诉我要注重基础，底层实现原理。才能在日新月异的技术行业站住脚跟，以不变应万变，万丈高楼平地起，所以我们应该不断的去学习，去交流。...

Jackwoo 2019-08-30 13:50 评论0 收藏0
哪些你知道或不知道的css，在这里或许都齐全

摘要：简单就意味着更快的开发速度，更小的维护成本，同时往往具有更好的体验下面我介绍哪些或许你不知道小技巧。默认为，此时阴影与元素同样大。如果没有指定，则由浏览器决定通常是的值，不过目前取透明。首先，我们要明白这里的最小宽度值是什么意思。暑假实习的时候带我的师傅，告诉我要注重基础，底层实现原理。才能在日新月异的技术行业站住脚跟，以不变应万变，万丈高楼平地起，所以我们应该不断的去学习，去交流。...

Bryan 2019-08-21 17:13 评论0 收藏0
哪些你知道或不知道的css，在这里或许都齐全

摘要：简单就意味着更快的开发速度，更小的维护成本，同时往往具有更好的体验下面我介绍哪些或许你不知道小技巧。默认为，此时阴影与元素同样大。如果没有指定，则由浏览器决定通常是的值，不过目前取透明。首先，我们要明白这里的最小宽度值是什么意思。暑假实习的时候带我的师傅，告诉我要注重基础，底层实现原理。才能在日新月异的技术行业站住脚跟，以不变应万变，万丈高楼平地起，所以我们应该不断的去学习，去交流。...

fai1017 2019-08-01 17:51 评论0 收藏0