最近讀了張鑫旭的新書《CSS世界》收獲了不少奇技淫巧和對CSS的深度理解

也正值個(gè)人在公司內(nèi)部進(jìn)行部分章節(jié)的內(nèi)容分享，于是順帶著直接把我即將分享的內(nèi)容先給大家過過目了，就當(dāng)省去了大家買了書后，無暇顧及觀看的尷尬吧！

本書的最后三章分別是：

• 元素的顯示與隱藏

• 用戶界面樣式

• 流向的改變

下面我就直接進(jìn)入主題，開始對每一章節(jié)進(jìn)行一個(gè)非系統(tǒng)的分享了

元素的顯示與隱藏

使用CSS讓元素不可見的方法很多，剪裁、定位到屏幕外、透明度變化等都是可以的。雖然它們都是肉眼看不見，但背后卻在多個(gè)維度上都有差別

下面是總結(jié)的一些比較好的隱藏實(shí)踐，大家一起來根據(jù)實(shí)際開發(fā)場景來選擇合適的使用

比較好的隱藏實(shí)踐

• 不占空間，不渲染 使用script

• 不占空間，資源可以加載，DOM可訪問 使用display:none

• 不占空間，隱藏顯示時(shí)有transition效果

• 占空間，不能點(diǎn)擊 visibility: hidden

• 不占空間，不能點(diǎn)擊，鍵盤能訪問 clip裁切

• 占空間，不能點(diǎn)擊，鍵盤能訪問 relative

• 占空間，可以點(diǎn)擊 opacity

• 隱藏文字 使用text-indent

根據(jù)實(shí)際的隱藏場景選擇合適的隱藏方法，這里就不再多說了，接著往下看吧

display與元素的顯隱

我們都知道display如果值為none，則該元素以及所有后代元素都隱藏，反之如果值是非none的情況，則都為顯示了

display可以說是web顯隱交互中出場頻率最高的一種隱藏方式，是真正意義上的隱藏，干凈利落，不留痕跡

none做到了無法點(diǎn)擊、無法使用屏幕閱讀器等輔助設(shè)備訪問，不占空間，其實(shí)不僅僅是這樣，更應(yīng)該知道的是

me: 我有酒，那么別說你沒有故事

我知道display:none你才不是一個(gè)沒有故事的女同學(xué)

display: none的元素的background-image圖片根據(jù)不同瀏覽器的情況加載情況不一

1、在Firefox瀏覽器下，display:none的background-image圖片不加載，包括父元素display:none也是如此

2、在Chrome和Safari瀏覽器，則根據(jù)父元素是否是否為none來影響圖片加載情況，父元素帶有display:none，圖片不加載。

父元素不帶有display:none,而自身有背景圖元素帶的話，那也照樣加載

3、在IE瀏覽器下，無論怎么搞都會請求圖片資源，就是這么任性

因此，在實(shí)際開發(fā)的時(shí)候，例如頭圖輪播切換效果

那些默認(rèn)需要隱藏的圖片作為背景圖藏在display:none元素的子元素上，這樣的細(xì)小改動就可以明顯提升頁面的加載體驗(yàn)，也是非常實(shí)用的小技巧

whatever

上面說的興致盎然，但實(shí)際中不可能全部都是背景圖去加載圖片資源的

還有另外一個(gè)好朋友，img元素，然并卵的是，上面說了一大堆加載不加載的情況，對img來說沒個(gè)鳥用，人家不管你none不none的，依舊帶著勇闖天涯的氣概去請求著資源

活久見

都說display:none做事最純粹，最干凈，不能被點(diǎn)擊，觸碰到，然而下面這種情況又是什么鬼？

出來解釋解釋，我們都是文明人是絕對不會動武的！

隱藏的按鈕會觸發(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元素不會觸發(fā)錨點(diǎn)定位

• But：作者不推薦這么做，因?yàn)閟ubmit按鈕會丟失鍵盤可訪問性

很多都是純天然的

HTML中有很多標(biāo)簽和屬性天然自帶display:none

• 標(biāo)簽：style, script, dialog

• 屬性：

• HTML5中新增了hidden這個(gè)布爾屬性，可以讓元素天生隱藏起來

• 對于ol有序列表來說，如果子元素li有一項(xiàng)被設(shè)置了display:none，那么原本有10相的元素，最后總計(jì)數(shù)會被計(jì)算成9項(xiàng)，設(shè)置display:none的那項(xiàng)被后面的兄弟給取代了

• 還有一點(diǎn)就是display:none其實(shí)并不會影響css3 animation動畫的實(shí)現(xiàn)，而只是會影響transition過渡效果的執(zhí)行，因此transition和visibility屬性關(guān)系更好 （老鐵扎心了）

既然說到了visibility了，那么就趕緊邀請visibility閃亮登場吧

visibility與元素的顯隱

visibility要為自己正名，不僅僅是保留空間這么簡單

看點(diǎn)多多：

1、繼承性(最有意思的一個(gè)特點(diǎn)，不是我說的)

• 父元素設(shè)置visibility:hidden，子元素也繼承了該屬性，也是看不見的

• 不過本質(zhì)區(qū)別在于，父元素設(shè)置了hidden后，子元素設(shè)置visible后，子元素是可以被看都的

• 這點(diǎn)父元素設(shè)置了display:none，子元素就永遠(yuǎn)看不到了

2、與css計(jì)數(shù)器

visibility:hidden雖然讓元素不可見了，但是不影響其計(jì)數(shù)效果，不會重新計(jì)算結(jié)果

3、與transition

設(shè)置了visibility:hidden的元素，可以很好的展現(xiàn)transition過渡效果

這是因?yàn)閠ransition支持的css屬性中有visibility(果然是兄弟)，而并沒有display屬性

4、與JS

visibility:hidden除了對transition友好外，對js來說也很友好

在實(shí)際開發(fā)中，需要對隱藏元素進(jìn)行尺寸和位置的獲取，來實(shí)現(xiàn)布局精確定位的交互

此時(shí)，就建議使用visibility:hidden

好了以上內(nèi)容要告一段落了，我們繼續(xù)開始新的征程吧，哈哈

用戶界面樣式

用戶界面樣式指的是CSS世界中用來幫助用戶進(jìn)行界面交互的一些CSS樣式，主要有outline和cursor等屬性

和border形似的outline屬性

outline表示元素的輪廓，語法也和border一樣，分為寬度、類型和顏色三個(gè)值

樣式表示上相同，但是設(shè)計(jì)的初衷卻是不太相同的，這一點(diǎn)天地日月可鑒

outline是一個(gè)和用戶體驗(yàn)密切相關(guān)的屬性，與focus狀態(tài)以及鍵盤訪問密切相關(guān)

對于按鈕或鏈接，通常的鍵盤操作是：Tab鍵按次序不斷focus控件元素(鏈接、按鈕、輸入框等表單元素)，或者focus設(shè)置了tabindex的普通元素，然后按Shift+Tab是反向訪問

重點(diǎn)來了！

默認(rèn)狀態(tài)下，對于處于focus狀態(tài)的元素，瀏覽器會通過發(fā)光or虛框的形式進(jìn)行區(qū)分和提示，這是友好的用戶體驗(yàn)，很有必要，不然用戶很難知道自己當(dāng)前聚焦在了哪個(gè)元素上面，會迷失自我

元素如果聚焦到了a鏈接上，按下回車鍵就會跳轉(zhuǎn)到相應(yīng)鏈接，以上的交互都是基于鍵盤訪問的，這就是為什么outline和鍵盤訪問如此親密了

不專業(yè)的行為

很多時(shí)候直接在reset樣式的時(shí)候，寫成如下形式是非常不可取的

這樣直接一竿子打死一群鴨子的做法是不對的，更多的時(shí)候是因?yàn)闉g覽器內(nèi)置的focus效果和設(shè)計(jì)風(fēng)格格格不入，才需要重置，而且要使用專門的類名

最后再強(qiáng)調(diào)一遍：萬萬不可在全局設(shè)置outline: 0 none;

這樣的操作會造成鍵盤訪問的時(shí)候用戶找不到當(dāng)前焦點(diǎn)，容易產(chǎn)生困擾的，為了大家好，收斂一下吧

下面來點(diǎn)干貨: 在實(shí)際開發(fā)中，有時(shí)候需要讓普通元素代替表單控件元素有outline效果

舉個(gè)栗子：submit按鈕來完成UI設(shè)計(jì)是非常麻煩的，所以使用label元素來移花接木，通過for屬性和這些原生的表單控件相關(guān)聯(lián)。

真正的不占據(jù)空間的outline及其應(yīng)用

outline是一個(gè)真正意義上不占任何空間的屬性，Amazing

頭像剪裁的矩形鏤空效果

先來看個(gè)效果圖

上圖就是矩形鏤空效果，那么下面直接上代碼，滿滿的干貨

用一個(gè)大大的outline來實(shí)現(xiàn)周圍半透明的黑色遮罩，因?yàn)閛utline無論設(shè)置多么多么大，都不會占據(jù)空間影響布局，至于超出的部分，直接給父元素設(shè)置一個(gè)overflow:hidden就搞定了 注意：

• 因?yàn)榭紤]到IE8不支持rgba，所以上面借助了filter設(shè)置了透明度為一半效果

• 但是由于IE9支持rgba，再借助:root來進(jìn)行重置，不使用filter

• 再加上IE10針對鏤空元素會有點(diǎn)擊穿透問題，所以再給background設(shè)置看不見的背景內(nèi)容就可以解決

自動填滿屏幕剩余空間的應(yīng)用技巧

開發(fā)中很多時(shí)候，由于頁面內(nèi)容不夠多，導(dǎo)致底部footer會出現(xiàn)尷尬的剩余空間，解決方法往往也有很多種，在此我們還是依然利用outline的功能來完美實(shí)現(xiàn)一下

關(guān)鍵的css就是設(shè)置一個(gè)超大輪廓范圍的outline屬性，如給個(gè)9999px，保證無論屏幕多高，輪廓顏色都能覆蓋

值得注意的是，outline無法指定方位，它是直接向四周發(fā)散的，所以需要配合clip剪裁來進(jìn)行處理,以左邊和上邊為邊界進(jìn)行裁剪

光標(biāo)屬性

光標(biāo)屬性cursor我們真的是最熟悉的陌生人啊

為什么這么說呢，因?yàn)樵诒姸嗟膶傩灾得媲?，我們似乎只用到了pointer(手形)(最常用的，沒有之一)，move(移動)，default(系統(tǒng)默認(rèn))這幾樣

在cursor的世界里，遠(yuǎn)比我們想象的要豐富很多，下面按照功能特性來對其進(jìn)行分類吧

琳瑯滿目的cursor屬性值

友情不友情的小提示：☆（表示常用）

• 常規(guī)

• cursor: auto; 默認(rèn)值

• 輸入框表現(xiàn)是cursor: text (文本光標(biāo))

• href屬性的鏈接表現(xiàn)為cursor: pointer (手形光標(biāo))

• button表現(xiàn)為cursor: default (默認(rèn)箭頭)

• ☆ cursor: default; 系統(tǒng)默認(rèn)光標(biāo)

• 誤區(qū)產(chǎn)生的小故事：

• 由于瀏覽器原生按鈕樣式兼容方面無法完善，尤其是IE盛行的年代，黑框、寬高不一致等問題層出不窮， 于是大家就使用a標(biāo)簽來模擬按鈕，在每次hover上去的時(shí)候都會有一個(gè)手型效果，省去了額外添加， 所以久而久之就成了業(yè)內(nèi)約定俗成的做法了

• cursor: none; 這是讓光標(biāo)隱藏不見

• what??有何用？它的作用在看視屏的時(shí)候，全屏后鼠標(biāo)靜止不動3秒鐘，就設(shè)置隱藏光標(biāo)效果

• IE8不支持，還要通過自定義光標(biāo)來處理

• 鏈接和狀態(tài)

• ☆ cursor: pointer; 手形

• cursor: help; 幫助光標(biāo)

• 用在幫助鏈接或者提示信息的問號小圖標(biāo)上

• 不過目前很少在網(wǎng)頁上看到，更多的是使用cursor:pointer手形處理

• cursor: progress; 進(jìn)行中

• 一個(gè)適用場景是網(wǎng)頁加載js的情況，網(wǎng)絡(luò)不好時(shí)，加載js時(shí)間過長

• cursor: wait;

• 沒用的光標(biāo)，有個(gè)沙漏的樣子

• cursor: context-menu;

• 上下文菜單，兼容性很復(fù)雜，汽油桶形狀，用處不大

• 選擇

• ☆ cursor: text; 文字可被選中

• input默認(rèn)光標(biāo)表現(xiàn)就是cursor:text

• 但是如果設(shè)置了disabled后，光標(biāo)會自動變成cursor:default

• 還有如果在現(xiàn)代瀏覽器中不允許文字選中的情況下，設(shè)置了user-select:none后，還要把對應(yīng)的光標(biāo)改變?yōu)閏ursor:default

• cursor: vertical-text;

• 垂直選中，文字排版是垂直情況的時(shí)候，基本沒機(jī)會用到

• cursor: crosshair;

• 十字光標(biāo)，它比較適合取色工具的場景中，平時(shí)用不到

• cursor: cell;

• 單元格光標(biāo)，適合開發(fā)類似Excel表格的網(wǎng)頁使用

• 而且IE8還不支持，需要自定義，也是沒機(jī)會表現(xiàn)了

• 拖拽

• ☆ ccursor: move;

• 移動光標(biāo)，表示當(dāng)前元素是可移動的

• 常用的彈窗組件給標(biāo)題欄加上cursor:move，讓用戶知道是可以拖動的

• cursor: copy;

• 復(fù)制光標(biāo)，表示當(dāng)前元素可以復(fù)制，IE8不支持，需自定義，無實(shí)用

• cursor: alias;

• 別名光標(biāo)，表示當(dāng)前元素可以創(chuàng)建別名或快捷方式，同上copy一樣，沒個(gè)卵用

• cursor: no-drop與cursor: not-allowed;

• 樣式相同，都表示禁止的

• 值得注意的是：

• 不要給禁用按鈕加cursor: not-allowed

• 因?yàn)樗臓顟B(tài)只與拖拽行為相關(guān)

• 所以禁用按鈕光標(biāo)還是用default更合適

• 都是CSS3新增的光標(biāo)類型

• 縮放

• cursor: zoom-in; 放大

• cursor: zoom-out; 縮小

• 抓取

• cursor: grab; 五指張開的手

• cursor: grabbing; 五指收起的手

• Chrome下還需要加-webkit前綴生效

• 這里QQ音樂PC端做了這樣的cursor處理，如下圖框選的位置

• 自定義光標(biāo)

• 遇到一些IE8不支持的光標(biāo)類型，可以通過自定義的手段來實(shí)現(xiàn)兼容

• chrome等瀏覽器可以直接使用png圖片作為光標(biāo)

• IE不行，它還是要用專門的.cur格式

• 而自定義光標(biāo)最大的作用其實(shí)是根據(jù)業(yè)務(wù)需求對光標(biāo)進(jìn)行樣式上的自定義

• 不過現(xiàn)在用的真是不多了

以上內(nèi)容就介紹完了用戶界面樣式的全部內(nèi)容了，還有最后一章的冷知識，大家不要方，繼續(xù)看下去，了解一下，了解一下，了解一下

流向的改變

說出來你可能不信，direction可以改變水平流向，盡管知道或者使用過的人少之又少，但并不妨礙它的發(fā)光發(fā)熱

而且屬性簡單好記，值少，兼容極好ie6支持，可以來挖掘一下它的神奇功效

direction

僅僅兩個(gè)值：

• direction: ltr; 默認(rèn)值

• ltr -> left-to-right(從左到右)

• 東亞、歐美文字書寫都是屬于ltr模式的

• direction: rtl;

• rtl -> right-to-left(從右到左)

• 阿拉伯語、希伯來語的書寫屬于rtl模式

當(dāng)然看到這里你可能會感覺，這些說起來都沒什么鳥用，因?yàn)榇笳惺遣惠p易放出的，而真正有用的地方在于改變網(wǎng)頁布局的時(shí)候

direction屬性默認(rèn)有一個(gè)特性

可以改變替換元素(img,input,textarea,select)或inline-block/inline-table元素的水平呈現(xiàn)順序

舉個(gè)栗子：顛倒順序

再舉個(gè)栗子：

比如制作彈窗組件的時(shí)候，確認(rèn)和取消按鈕有的時(shí)候會根據(jù)用戶的使用行為會顯示在不同的位置

下面來看看這種特性的表現(xiàn)在實(shí)際開發(fā)中的作用

windows用戶看到的樣子：

mac用戶看到的樣子：

好了，direction的話題就告一段落，接下來介紹最后一個(gè)知識了，堅(jiān)持住，快休息了

writing-mode

改變CSS世界縱橫規(guī)則的writing-mode，如此強(qiáng)大的功能，居然沒有被大家發(fā)掘和廣發(fā)應(yīng)用起來，實(shí)屬遺憾了，話不多說，往下看

writing-mode作用及真正需要關(guān)注的屬性值

writing-mode可以改變排版，變成垂直流，如下圖所示

在使用語法上，也是需要記兩套的，一套是IE私有屬性，一套是CSS3規(guī)范屬性

CSS3語法：

IE語法：

針對實(shí)戰(zhàn)版來整理一份writing-mode是這樣的

對于垂直排版來說，實(shí)際開發(fā)是很少會遇到的，不過還是要說說writing-mode帶來的改變

水平方向也能margin合并

我們都知道兩個(gè)相鄰的元素垂直的margin會合并，當(dāng)元素變?yōu)?strong>垂直流的時(shí)候，水平的margin也會合并

普通塊元素可以使用margin: auto實(shí)現(xiàn)垂直居中

上面分別是圖片元素和普通塊元素實(shí)現(xiàn)的垂直居中代碼，眼見為實(shí)，看圖

text-align:center實(shí)現(xiàn)圖片垂直居中(同上實(shí)現(xiàn)的效果)

使用text-indent實(shí)現(xiàn)文字下沉效果

核心css

這種文字下沉效果只能適合中文，因?yàn)樵诖怪绷髋虐娴臅r(shí)候中文是不會旋轉(zhuǎn)的
而且這種效果只適合一個(gè)字的情景

實(shí)現(xiàn)全兼容的icon fonts圖標(biāo)旋轉(zhuǎn)效果

老IE下讓小圖標(biāo)旋轉(zhuǎn)很麻煩，writing-mode把文檔變成垂直流的時(shí)候，英文、數(shù)字和字符號都天然的轉(zhuǎn)了90°

@font-face的兼容性很好IE5.5就支持了，所以就算是IE6和IE7也沒問題

好了，這就是《CSS世界》里最后三章的全部內(nèi)容了，終于寫完了，哈哈，希望大家有收獲一些冷知識，另外看書還是要買正版的，地址我就不發(fā)了

做個(gè)個(gè)人的小總結(jié)吧：

css有很多奇妙的地方，在某些特性當(dāng)初被設(shè)計(jì)出來的時(shí)候可能只是為了某些圖文排版而生

但是我們可以利用它們帶來的特性發(fā)揮自己的創(chuàng)造力，實(shí)現(xiàn)其他很多意想不到的效果，因此，上面所講述的所有知識點(diǎn)，盡管很多內(nèi)容都有點(diǎn)奇技淫巧以悅婦孺的過程

但這也給我們開發(fā)的過程中，提供了一些很出奇的妙招，值得我們好好學(xué)習(xí)領(lǐng)悟

感謝個(gè)位的觀看了，再見了，哈哈