outline小技巧

浠ラ箍發布于2019-08-29 11:12 / 1337人閱讀

摘要：是干什么的定義輪廓是繪制于元素周圍的一條線，位于邊框邊緣的外圍，可起到突出元素的作用。以上是但上說明。但我的理解是，它跟是一樣是元素的邊框，但是它又有別于他的大小不會計算到元素上，不會影響布局，而是會的。

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小技巧

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/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