CSS世界中那些說(shuō)起來(lái)很冷的知識(shí)，你聽(tīng)過(guò)幾個(gè)？
最近讀了張?chǎng)涡竦男聲?shū)《CSS世界》收獲了不少奇技淫巧和對(duì)CSS的深度理解
也正值個(gè)人在公司內(nèi)部進(jìn)行部分章節(jié)的內(nèi)容分享，于是順帶著直接把我即將分享的內(nèi)容先給大家過(guò)過(guò)目了，就當(dāng)省去了大家買(mǎi)了書(shū)后，無(wú)暇顧及觀看的尷尬吧！
本書(shū)的最后三章分別是
元素的顯示與隱藏
用戶界面樣式
流向的改變
下面我就直接進(jìn)入主題，開(kāi)始對(duì)每一章節(jié)進(jìn)行一個(gè)非系統(tǒng)的分享了
元素的顯示與隱藏
使用CSS讓元素不可見(jiàn)的方法很多，剪裁、定位到屏幕外、透明度變化等都是可以的。雖然它們都是肉眼看不見(jiàn)，但背后卻在多個(gè)維度上都有差別
下面是總結(jié)的一些比較好的隱藏實(shí)踐，大家一起來(lái)根據(jù)實(shí)際開(kāi)發(fā)場(chǎng)景來(lái)選擇合適的使用
比較好的隱藏實(shí)踐
不占空間，不渲染 使用script
<script type="text/html"> ?
?<!-- 圖片是不會(huì)發(fā)送請(qǐng)求的 --> ?
??<img src="1.jpg" />?
?? ?<!-- 如果想嵌套需要借助textarea了 --> ?
??<textarea style="display: none;"> ? ??
? ?<img src="2.png" /> ?
??</textarea>?
</script>
.out {?
?? ?position: relative; ??
?left: -999em; } .clip {?
?? ?position: absolute; ?
??clip: rect(0, 0, 0, 0);
?} <div class="clip"> ?
??<div class="out">青花瓷</div>?
</div>
display與元素的顯隱
我們都知道display如果值為none，則該元素以及所有后代元素都隱藏，反之如果值是非none的情況，則都為顯示了
display可以說(shuō)是web顯隱交互中出場(chǎng)頻率最高的一種隱藏方式，是真正意義上的隱藏，干凈利落，不留痕跡
none做到了無(wú)法點(diǎn)擊、無(wú)法使用屏幕閱讀器等輔助設(shè)備訪問(wèn)，不占空間，其實(shí)不僅僅是這樣，更應(yīng)該知道的是
me: 我有酒，那么別說(shuō)你沒(méi)有故事
我知道display:none你才不是一個(gè)沒(méi)有故事的女同學(xué)
display: none的元素的background-image圖片根據(jù)不同瀏覽器的情況加載情況不一
在Firefox瀏覽器下，display:none的background-image圖片不加載，包括父元素display:none也是如此
在Chrome和Safari瀏覽器，則根據(jù)父元素是否是否為none來(lái)影響圖片加載情況，父元素帶有display:none，圖片不加載。
父元素不帶有display:none,而自身有背景圖元素帶的話，那也照樣加載
在IE瀏覽器下，無(wú)論怎么搞都會(huì)請(qǐng)求圖片資源，就是這么任性
因此，在實(shí)際開(kāi)發(fā)的時(shí)候，例如頭圖輪播切換效果
那些默認(rèn)需要隱藏的圖片作為背景圖藏在display:none元素的子元素上，這樣的細(xì)小改動(dòng)就可以明顯提升頁(yè)面的加載體驗(yàn)，也是非常實(shí)用的小技巧
whatever
上面說(shuō)的興致盎然，但實(shí)際中不可能全部都是背景圖去加載圖片資源的
還有另外一個(gè)好朋友，img元素，然并卵的是，上面說(shuō)了一大堆加載不加載的情況，對(duì)img來(lái)說(shuō)沒(méi)個(gè)鳥(niǎo)用，人家不管你none不none的，依舊帶著勇闖天涯的氣概去請(qǐng)求著資源
活久見(jiàn)
都說(shuō)display:none做事最純粹，最干凈，不能被點(diǎn)擊，觸碰到，然而下面這種情況又是什么鬼？
出來(lái)解釋解釋，我們都是文明人是絕對(duì)不會(huì)動(dòng)武的！
<form action="/index.php"> ?
??<input type="submit"
id="hi" style="display: none;"> ??
?<label for="hi">提交</label>?
</form>
隱藏的按鈕會(huì)觸發(fā)click,觸發(fā)表單提交，此現(xiàn)象出現(xiàn)在時(shí)髦的瀏覽器中(IE9+，現(xiàn)代標(biāo)準(zhǔn)瀏覽器中）
既然有這種例外情況那加了display:none的意義又是什么呢？
意義在于：當(dāng)按鈕和label元素不在一個(gè)水平線上的時(shí)候，點(diǎn)擊label元素不會(huì)觸發(fā)錨點(diǎn)定位
But：作者不推薦這么做，因?yàn)閟ubmit按鈕會(huì)丟失鍵盤(pán)可訪問(wèn)性
很多都是純天然的
HTML中有很多標(biāo)簽和屬性天然自帶display:none
標(biāo)簽：style, script, dialog
屬性：
對(duì)于ol有序列表來(lái)說(shuō)，如果子元素li有一項(xiàng)被設(shè)置了display:none，那么原本有10相的元素，最后總計(jì)數(shù)會(huì)被計(jì)算成9項(xiàng)，設(shè)置display:none的那項(xiàng)被后面的兄弟給取代了
還有一點(diǎn)就是display:none其實(shí)并不會(huì)影響css3 animation動(dòng)畫(huà)的實(shí)現(xiàn)，而只是會(huì)影響transition過(guò)渡效果的執(zhí)行，因此transition和visibility屬性關(guān)系更好 （老鐵扎心了）
既然說(shuō)到了visibility了，那么就趕緊邀請(qǐng)visibility閃亮登場(chǎng)吧
visibility與元素的顯隱
visibility要為自己正名，不僅僅是保留空間這么簡(jiǎn)單
看點(diǎn)多多：
繼承性(最有意思的一個(gè)特點(diǎn)，不是我說(shuō)的)
父元素設(shè)置visibility:hidden，子元素也繼承了該屬性，也是看不見(jiàn)的
不過(guò)本質(zhì)區(qū)別在于，父元素設(shè)置了hidden后，子元素設(shè)置visible后，子元素是可以被看都的
這點(diǎn)父元素設(shè)置了display:none，子元素就永遠(yuǎn)看不到了
2. 與css計(jì)數(shù)器
visibility:hidden雖然讓元素不可見(jiàn)了，但是不影響其計(jì)數(shù)效果，不會(huì)重新計(jì)算結(jié)果
3. 與transition
設(shè)置了visibility:hidden的元素，可以很好的展現(xiàn)transition過(guò)渡效果
這是因?yàn)閠ransition支持的css屬性中有visibility(果然是兄弟)，而并沒(méi)有display屬性
與JS
visibility:hidden除了對(duì)transition友好外，對(duì)js來(lái)說(shuō)也很友好
在實(shí)際開(kāi)發(fā)中，需要對(duì)隱藏元素進(jìn)行尺寸和位置的獲取，來(lái)實(shí)現(xiàn)布局精確定位的交互
此時(shí)，就建議使用visibility:hidden
作者：chenhongdong
鏈接：https://juejin.cn/post/6844903635248218126
來(lái)源：掘金
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
想要了解更多可以點(diǎn)擊了解更多哦~
