冷門小知識 01
div 的僞類 後面用一個 ： 和用兩個：： 效果相同。
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: black;
position: relative;
/* word-wrap: break-word;
word-break: break-all; */
}
/* div::after{ */
div:after{
content: '';
width: 100px;
height: 100px;
background-color: red;
position:absolute;
left: 100%;
/* float: left; */
}
/* 可覆蓋前面 */
div::after{
content: 'testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest';
word-wrap: break-word;
word-break: break-all;
}
/* after的hover 需要先寫hover 在寫after */
div:hover::after{
background-color: chartreuse;
}
div::first-line{
color: darkgoldenrod;
}
div::first-letter{
color: white;
background: violet;
}
</style>
冷門小知識 02
一個div 三種 色塊
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: black;
position:absolute;
left: 0px;
top:0px;
right: 0px;
bottom: 0px;
margin: auto;
border-top:100px solid blue ;
border-bottom:100px solid brown ;
}
div::before{
content: 'before';
width: 100px;
height: 100px;
background-color: red;
position:absolute;
left:-100%;
border-top:100px solid pink ;
border-bottom:100px solid palevioletred ;
}
div::after{
content: 'after';
width: 100px;
height: 100px;
background-color: yellow;
position:absolute;
left: 100%;
border-top:100px solid green ;
border-bottom:100px solid goldenrod ;
}
</style>
不知道 爲什麼運行完 成了這個鬼樣子~~~ after 和 before 的 border 爲什麼 會 跑到下面去了
另一種方法 是 使用 box shadow 來解決~~~
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: black;
position:absolute;
left: 0px;
top:0px;
right: 0px;
bottom: 0px;
margin: auto;
box-shadow: 100px 0 0 0px goldenrod
,200px 0 0 0px greenyellow
,300px 0 0 0px firebrick ;
}
</style>
冷門小知識 03
::selection{
color: fuchsia;
}
這個 比較 鬼馬 ~~~
input::placeholder{
color:violet;
}
冷門小知識 04
視頻播放的時候，可以設置全屏背景色
冷門小知識 05
css 可以用變量麼
css var 小度小度~~
冷門小知識 06
雪碧圖
精靈圖
https://www.toptal.com/developers/css/sprite-generator
冷門小知識 07
![]()
1.js 裏面 只有 控制檯打印輸出 1
所以 如果沒有defer="defer" 的場合，輸出順序是 1 2
但如果有defer="defer" 的場合，輸出順序是 2 1
defer="defer"東西 會改變 js的加載順序，應該是全部都加載完成之後，纔會去加載，帶有defer="defer"關鍵字的js引用。
答案是 321
2 是因爲只要 有 定時器 就會有延時
沒有定時器的時候 還是 會先執行 2的
1 是最後 纔會加載的
另外 defer 只能用於外部引用js 不能用於類似 2 的那種。
冷門小知識 08
![]()
綁定點擊事件的方式
事件委派 事件 委託~~
獲取元素，添加屬性~
冷門小知識 09
c是20,或運算的特性
另一個，js 有自己真值 假值
關於真值假值問題，上面這個帖子 提到過。。。
結果是 20
回調函數的調用。。。
調用a的時候後，給a函數傳進去了一個函數參數，這個時候，執行a 參數fn 爲 穿進去的那個 參數函數，於是參數
fn = function(){alert(1);}
那麼 fn && fn();
fn 就不是 undefined 是個真值，所以是true
所以 && 運算 便會執行 && 後面的語句
即 fn();
於是 可以 彈出來 1 。以上！
而 另外 調用a的時候 ，如果沒有傳參，那麼也不會報錯，因爲&&運算的 前面 是 false的時候，不執行&&之後的語句，所以就不會報錯。
冷門小知識 10
js中的[]中括號可以完全代替.
div.onclick
等價於
div['onclick']
'onclick' 可以字符串化 ，於是 可以 被噹噹做 參數 傳入~
這個 被綁定的事件 你就可以 換了呀~~
有點 類似 java 裏面 反射機制 ，可以根據字符串化的 類名 ，而實例化出來具體的對象之類的。
![]()
代替 . 的寫法，箭頭函數~~
冷門小知識 11
顯示圖片的N種方式
img
background-image
![]()
border-image
不好 不採用
input 圖片域
這種 可以 表單 上傳~~
僞類 ：：after 來實現
content 除了可以放文字 ，還可以 放圖片
c 其實 是 css 的意思
這 這 這 空格 很重要。。。
但是 不能放 本地圖片 ，可以放 網上圖片 。。
運行出來以後
能在 控制檯 輸出來 一個 圖片
我噻~~~ 好神奇 ！！！
冷門小知識 12
![]()
log 看不到 div1的屬性 ，但是 dir 可以看到。。。
冷門小知識 13
移動端 兼容的一些小知識
10 vw 是 10/1000 百分比
我猜啊 是 最大 最小 啥的那種東西。。
啊 猜錯了
這個 東西 是被用在 在手機上 測試 橫屏 豎屏
window.innerHeight
冷門小知識 14
列表元素 去點點 功能
這樣 也能 去 點點 這個 比較神奇
冷門小知識 15
老師的網站
這個東西 需要用服務器 ，如果 不用 服務器，。。。
這個東西呢，比如 暫時沒有後臺真是數據返回來，就可以在本服務器先暫時做一些臨時文件，demmy數據，dummy json文件那種，先進行着前端頁面的佈局與調試什麼的。
僅供參考吧~~
冷門小知識 16
![]()
冷門小知識 17
innerHTML 是可以改變元素的內容
而 outerHTML 是可以連元素的本身都可以改變
這個感覺像是在瀏覽器的那個 element 元素那裏 選中 啊 ，改變啊的感覺~
元素.outerHTML = ''
這個比較重要啊，這個就相當於 這個元素 把自己給 remove 了。
這兩個是等價於的。。。
remove 貌似 兼容性差~~
一般會找到父類級別，然後 刪除自己的子節點。。。
![]()
冷門小知識 18
瀏覽器的地址欄 居然可以直接寫js代碼
這 這 這 就能運行。。。
冷門小知識 19
放 HTML 也行 驚訝~~~
這個也超級 鬼馬 ~~~
data:text/html,<html contenteditable>
冷門小知識 20
3wschool 那效果 來了~
<!DOCTYPE html>
<html>
<head>
<title>01 PAGE</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<script type="text/javascript">
</script>
</head>
<body>
<style type="text/css" style="display:block" contenteditable="true">
div{
width: 100px;
height: 100px;
background-color: black;
/* transform: 7s; */
}
</style>
<div></div>
</body>
</html>
冷門小知識 21
入力框 焦點 獲得 有陰影效果
<!DOCTYPE html>
<html>
<head>
<title>01 PAGE</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style type="text/css">
/* div{
width: 100px;
height: 100px;
background-color: black;
} */
input{
transition: .7s;
}
input:focus{
box-shadow: 0 0 10px gray;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<input type="" name="">
<div></div>
</body>
</html>
好像 div 如果 可編輯的狀態以後，可以設置facus的css。
冷門小知識 22
網頁 鼠標 消失 效果
冷門小知識 23
如何 讓 a 鏈接 失效
這是啥 阻止 冒泡 那個麼
重點事件 去除 不過 拖拽事件據說 也不管用了
冷門小知識 24
日語式 豎排式 排版
![]()
冷門小知識 25
a b swap 騷操作~ 不用 第三方變量
搞一個匿名數組，元素0 是 2 ，元素1 是
因爲 b 已經被用完了，所以 把a放給b
再從數組裏面取出來第0個元素，扔回給a ，完成交換。
冷門小知識 26
-- 箭頭 我猜 是 n-- n減一的自運算 箭頭 是 大於號 大於0的意思
x=x=》 箭頭函數
k《=5？：3 三目運算
