例

使 <h2> 元素不可見：

h2

{

visibility:hidden;

}

屬性定義及使用說明

visibility屬性指定一個元素是否是可見的。

提示:即使不可見的元素也會占據頁面上的空間。請使用 "display" 屬性來創建不占據頁面空間的不可見元素。

瀏覽器支持

所有主流瀏覽器都支持visibility屬性。

注意： ：Internet Explorer（包括IE8）沒有版本支持屬性值"inherit"或"collapse"。

屬性值

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

$("#company").css("display","none");
$("#company").css("display","block");

isplay:none

不為被隱藏的對象保留其物理空間，即該對象在頁面上徹底消失，通俗來說就是看不見也摸不到。

visible:hidden

使對象在網頁上不可見，但該對象在網頁上所占的空間沒有改變，通俗來說就是看不見但摸得到。

書使我快樂-哈哈

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

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

本書的最后三章分別是

• 元素的顯示與隱藏
• 用戶界面樣式
• 流向的改變

下面我就直接進入主題，開始對每一章節進行一個非系統的分享了

元素的顯示與隱藏

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

下面是總結的一些比較好的隱藏實踐，大家一起來根據實際開發場景來選擇合適的使用

比較好的隱藏實踐

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

<script type="text/html">
 <!-- 圖片是不會發送請求的 -->
 <img src="1.jpg" />
 <!-- 如果想嵌套需要借助textarea了 -->
 <textarea style="display: none;">
 <img src="2.png" />
 </textarea>
</script>
復制代碼

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

<div id="box">成都</div>
 <script>
 let oBox = document.getElementById('box');
 console.log(oBox); // <div id="box">成都</div>
 </script>

• 不占空間，隱藏顯示時有transition效果

.hidden {
 position: absolute;
 visibility: hidden;
}
<div class="div hidden">一杯敬朝陽 一杯敬月光</div>

• 占空間，不能點擊 visibility: hidden

.vh {
 visibility: hidden;
}

• 不占空間，不能點擊，鍵盤能訪問 clip裁切

.out {
 position: relative;
 left: -999em;
}
.clip {
 position: absolute;
 clip: rect(0, 0, 0, 0);
}
<div class="clip">
 <div class="out">青花瓷</div>
</div>

• 占空間，不能點擊，鍵盤能訪問 relative

<div style="position: relative;top: -999em;">獅子座</div>

• 占空間，可以點擊 opacity

<div style="opacity: 0; filter: alpha(opacity=0);">透明度</div>

• 隱藏文字 使用text-indent

<p style="text-indent: -999999px;">天下無雙</p>

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

display與元素的顯隱

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

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

none做到了無法點擊、無法使用屏幕閱讀器等輔助設備訪問，不占空間，其實不僅僅是這樣，更應該知道的是

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

我知道display:none你才不是一個沒有故事的女同學

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

1. 在Firefox瀏覽器下，display:none的background-image圖片不加載，包括父元素display:none也是如此
2. 在Chrome和Safari瀏覽器，則根據父元素是否是否為none來影響圖片加載情況，父元素帶有display:none，圖片不加載。

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

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

因此，在實際開發的時候，例如頭圖輪播切換效果

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

whatever

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

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

活久見

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

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

<form action="/index.php">
 <input type="submit" id="hi" style="display: none;">
 <label for="hi">提交</label>
</form>

隱藏的按鈕會觸發click,觸發表單提交，此現象出現在時髦的瀏覽器中(IE9+，現代標準瀏覽器中）

既然有這種例外情況那加了display:none的意義又是什么呢？

• 意義在于：當按鈕和label元素不在一個水平線上的時候，點擊label元素不會觸發錨點定位
• But：作者不推薦這么做，因為submit按鈕會丟失鍵盤可訪問性

很多都是純天然的

HTML中有很多標簽和屬性天然自帶display:none

• 標簽：style, script, dialog
• 屬性：

<input type="hidden" name="id" value="1" />
// 專門用來放置類似token或id這些隱藏信息的
// 所以說，表單元素的顯隱并不影響數據的提交
// 其真正影響的是disabled屬性
復制代碼

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

<div hidden>看不見我</div>
// IE11及現代標準瀏覽器都支持，如果做兼容需要這樣寫下即可
[hidden] {
 display: none;
}
復制代碼

• 對于ol有序列表來說，如果子元素li有一項被設置了display:none，那么原本有10相的元素，最后總計數會被計算成9項，設置display:none的那項被后面的兄弟給取代了
• 還有一點就是display:none其實并不會影響css3 animation動畫的實現，而只是會影響transition過渡效果的執行，因此transition和visibility屬性關系更好 （老鐵扎心了）

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

visibility與元素的顯隱

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

看點多多：

1. 繼承性(最有意思的一個特點，不是我說的)

• 父元素設置visibility:hidden，子元素也繼承了該屬性，也是看不見的
• 不過本質區別在于，父元素設置了hidden后，子元素設置visible后，子元素是可以被看都的
• 這點父元素設置了display:none，子元素就永遠看不到了

<ul style="visibility: hidden;">
 <li style="visibility: visible;">1</li>
 <li>2</li>
 <li>3</li>
 <li style="visibility: visible;">4</li>
</ul>
復制代碼

2. 與css計數器visibility:hidden雖然讓元素不可見了，但是不影響其計數效果，不會重新計算結果

3. 與transition設置了visibility:hidden的元素，可以很好的展現transition過渡效果

這是因為transition支持的css屬性中有visibility(果然是兄弟)，而并沒有display屬性

1. 與JS

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

在實際開發中，需要對隱藏元素進行尺寸和位置的獲取，來實現布局精確定位的交互

此時，就建議使用visibility:hidden

.hidden {
 position: absolute;
 visibility: hidden;
}
let ele = document.getElementById('demo');
console.log('clientWidth: ' + ele.clientWidth);
console.log('clientHeight: ' + ele.clientHeight);
console.log('left: ' + ele.clientLeft);
console.log('top ' + ele.clientTop);
console.dir(ele.getBoundingClientRect());
復制代碼

好了以上內容要告一段落了，我們繼續開始新的征程吧，哈哈

用戶界面樣式

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

和border形似的outline屬性

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

.outline {
 height: 60px;
 width: 60px;
 outline: 2px dashed #0c9;
}
復制代碼

樣式表示上相同，但是設計的初衷卻是不太相同的，這一點天地日月可鑒

outline是一個和用戶體驗密切相關的屬性，與focus狀態以及鍵盤訪問密切相關

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

重點來了！

默認狀態下，對于處于focus狀態的元素，瀏覽器會通過發光or虛框的形式進行區分和提示，這是友好的用戶體驗，很有必要，不然用戶很難知道自己當前聚焦在了哪個元素上面，會迷失自我

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

不專業的行為

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

* { outline: 0 none; }
或
a { outline: 0 none; }
復制代碼

這樣直接一竿子打死一群鴨子的做法是不對的，更多的時候是因為瀏覽器內置的focus效果和設計風格格格不入，才需要重置，而且要使用專門的類名

例如：
.input {
 outline: 0;
}
// 但是，必須把focus狀態樣式加上
.input:focus {
 border-color: Highlight
}
復制代碼

最后再強調一遍：萬萬不可在全局設置outline: 0 none;

這樣的操作會造成鍵盤訪問的時候用戶找不到當前焦點，容易產生困擾的，為了大家好，收斂一下吧

下面來點干貨: 在實際開發中，有時候需要讓普通元素代替表單控件元素有outline效果

舉個栗子：submit按鈕來完成UI設計是非常麻煩的，所以使用label元素來移花接木，通過for屬性和這些原生的表單控件相關聯

[type="submit"] {
 position: absolute;
 clip: rect(0, 0, 0, 0);
}
.btn {
 display: inline-block;
 padding: 2px 12px;
 background-color: #19b955;
 color: #fff;
 font-size: 14px;
 cursor: pointer;
}
:focus + label.btn {
 outline: 1px dashed hotpink;
 outline: 3px auto -webkit-focus-ring-color;
}
<div class="panel">
 <input type="submit" id="box">
 <label for="box" class="btn">提交</label>
</div>
復制代碼

真正的不占據空間的outline及其應用

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

頭像剪裁的矩形鏤空效果

先來看個效果圖

上圖就是矩形鏤空效果，那么下面直接上代碼，滿滿的干貨核心css是
.crop {
 overflow: hidden;
}
.crop .crop-area {
 width: 80px;
 height: 80px;
 outline: 256px solid #000;
 outline: 256px solid rgba(0, 0, 0, .5);
 background: url(about:blank);
 background: linear-gradient(to top, transparent, transparent);
 filter: alpha(opacity=50);
 cursor: move;
}
:root .crop-area {
 filter: none;
}
復制代碼

用一個大大的outline來實現周圍半透明的黑色遮罩，因為outline無論設置多么多么大，都不會占據空間影響布局，至于超出的部分，直接給父元素設置一個overflow:hidden就搞定了 注意：

• 因為考慮到IE8不支持rgba，所以上面借助了filter設置了透明度為一半效果
• 但是由于IE9支持rgba，再借助:root來進行重置，不使用filter
• 再加上IE10針對鏤空元素會有點擊穿透問題，所以再給background設置看不見的背景內容就可以解決

自動填滿屏幕剩余空間的應用技巧

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

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

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

.footer {
 height: 50px;
}
.footer > p {
 position: absolute;
 left: 0;
 right: 0;
 text-align: center;
 padding: 15px 0;
 background-color: #00a1f5;
 outline: 9999px solid #00a1f5;
 color: #fff;
 clip: rect(0, 9999px, 9999px, 0);
}
<div class="footer">
 <p>沒錯，我就是footer</p>
</div>
復制代碼

光標屬性

光標屬性cursor我們真的是最熟悉的陌生人啊

為什么這么說呢，因為在眾多的屬性值面前，我們似乎只用到了pointer(手形)(最常用的，沒有之一)，move(移動)，default(系統默認)這幾樣

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

琳瑯滿目的cursor屬性值

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

• 常規
• cursor: auto; 默認值
• 輸入框表現是cursor: text (文本光標)
• href屬性的鏈接表現為cursor: pointer (手形光標)
• button表現為cursor: default (默認箭頭)
• ☆ cursor: default; 系統默認光標
• 誤區產生的小故事：
• 由于瀏覽器原生按鈕樣式兼容方面無法完善，尤其是IE盛行的年代，黑框、寬高不一致等問題層出不窮， 于是大家就使用a標簽來模擬按鈕，在每次hover上去的時候都會有一個手型效果，省去了額外添加， 所以久而久之就成了業內約定俗成的做法了
• cursor: none; 這是讓光標隱藏不見
• what? 有何用？它的作用在看視屏的時候，全屏后鼠標靜止不動3秒鐘，就設置隱藏光標效果
• IE8不支持，還要通過自定義光標來處理

// 自定義光標
.cur-none {
 cursor: url(transparent.cur), auto;
}
:root .cur-none { // IE9+
 cursor: none
}
復制代碼

• 鏈接和狀態
• ☆ cursor: pointer; 手形
• cursor: help; 幫助光標
• 用在幫助鏈接或者提示信息的問號小圖標上
• 不過目前很少在網頁上看到，更多的是使用cursor:pointer手形處理
• cursor: progress; 進行中
• 一個適用場景是網頁加載js的情況，網絡不好時，加載js時間過長

body {
 cursor: progress;
},
// 當js加載完成后再將光標cursor設為auto;
// 增加了用戶體驗
document.addEventListener('DOMContentLoaded', () => {
 document.body.style.cursor = 'auto';
});
復制代碼

• cursor: wait;
• 沒用的光標，有個沙漏的樣子
• cursor: context-menu;
• 上下文菜單，兼容性很復雜，汽油桶形狀，用處不大
• 選擇
• ☆ cursor: text; 文字可被選中
• input默認光標表現就是cursor:text
• 但是如果設置了disabled后，光標會自動變成cursor:default
• 還有如果在現代瀏覽器中不允許文字選中的情況下，設置了user-select:none后，還要把對應的光標改變為cursor:default

p {
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 cursor: default;
}
<p>弱水三千</p>
// 不過現在最新版的瀏覽器都自動設置了cursor:default
復制代碼

• cursor: vertical-text;
• 垂直選中，文字排版是垂直情況的時候，基本沒機會用到
• cursor: crosshair;
• 十字光標，它比較適合取色工具的場景中，平時用不到
• cursor: cell;
• 單元格光標，適合開發類似Excel表格的網頁使用
• 而且IE8還不支持，需要自定義，也是沒機會表現了
• 拖拽
• ☆ ccursor: move;
• 移動光標，表示當前元素是可移動的
• 常用的彈窗組件給標題欄加上cursor:move，讓用戶知道是可以拖動的
• cursor: copy;
• 復制光標，表示當前元素可以復制，IE8不支持，需自定義，無實用
• cursor: alias;
• 別名光標，表示當前元素可以創建別名或快捷方式，同上copy一樣，沒個卵用
• cursor: no-drop與cursor: not-allowed;
• 樣式相同，都表示禁止的
• 值得注意的是：
• 不要給禁用按鈕加cursor: not-allowed
• 因為它的狀態只與拖拽行為相關
• 所以禁用按鈕光標還是用default更合適
• 都是CSS3新增的光標類型
• 縮放
• cursor: zoom-in; 放大
• cursor: zoom-out; 縮小
• 抓取
• cursor: grab; 五指張開的手
• cursor: grabbing; 五指收起的手
• Chrome下還需要加-webkit前綴生效
• 這里QQ音樂PC端做了這樣的cursor處理，如下圖框選的位置

• 
  
• 自定義光標
• 遇到一些IE8不支持的光標類型，可以通過自定義的手段來實現兼容
• chrome等瀏覽器可以直接使用png圖片作為光標
• IE不行，它還是要用專門的.cur格式
• 而自定義光標最大的作用其實是根據業務需求對光標進行樣式上的自定義
• 不過現在用的真是不多了

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

流向的改變

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

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

direction

僅僅兩個值：

• direction: ltr; 默認值
• ltr -> left-to-right(從左到右)
• 東亞、歐美文字書寫都是屬于ltr模式的
• direction: rtl;
• rtl -> right-to-left(從右到左)
• 阿拉伯語、希伯來語的書寫屬于rtl模式

當然看到這里你可能會感覺，這些說起來都沒什么鳥用，因為大招是不輕易放出的，而真正有用的地方在于改變網頁布局的時候

direction屬性默認有一個特性

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

舉個栗子：顛倒順序

<div class="box" dir="rtl">
 <p>我是第2名</p>
 <p>我是第一名</p>
</div>
<p dir="rtl">
 <img src="../1.jpg" alt="貓">
 <img src="../2.png" alt="狗">
</p>
復制代碼

再舉個栗子：比如制作彈窗組件的時候，確認和取消按鈕有的時候會根據用戶的使用行為會顯示在不同的位置

下面來看看這種特性的表現在實際開發中的作用

windows用戶看到的樣子：

mac用戶看到的樣子：

好了，direction的話題就告一段落，接下來介紹最后一個知識了，堅持住，快休息了writing-mode

改變CSS世界縱橫規則的writing-mode，如此強大的功能，居然沒有被大家發掘和廣發應用起來，實屬遺憾了，話不多說，往下看

writing-mode作用及真正需要關注的屬性值

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

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

writing-mode: horizontal-tb; 默認值
 文本流是水平方向的
writing-mode: vertical-rl; 
 文本是垂直方向的，閱讀順序從右向左(古詩的順序)
writing-mode: vertical-lr;
 文本垂直方向，閱讀順序從左到右(水平變成了垂直展示)
復制代碼

IE語法：

IE的writing-mode多達11個，真正有用的記住兩個就好了
-ms-writing-mode: lr-tb; 初始值
 lr-tb對應的是CSS3語法中的horizontal-tb
-ms-writing-mode: tb-rl;
 tb-rl對應的是CSS3語法中的vertical-rl
-ms-writing-mode: tb-lr;
 tb-lr對應的是CSS3語法中的vertical-lr
復制代碼

針對實戰版來整理一份writing-mode是這樣的

writing-mode: lr-tb | tb-rl | tb-lr (IE8+)
writing-mode: horizontal-tb | vertical-rl | vertical-lr;
復制代碼

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

水平方向也能margin合并

我們都知道兩個相鄰的元素垂直的margin會合并，當元素變為垂直流的時候，水平的margin也會合并

.vertical-mode {
 writing-mode: tb-rl;
 -webkit-writing-mode: vertical-rl;
 writing-mode: vertical-rl;
}
<div class="div vertical-mode">
 <div class="list" style="margin-left: 20px;">one</div>
 <div class="list" style="margin-right: 50px;">two</div>
</div>
復制代碼

普通塊元素可以使用margin: auto實現垂直居中

img {
 display: block;
 margin: auto 0;
}
<div class="box vertical-mode">
 <img src="../1.jpg" alt="">
</div>
<div class="box vertical-mode" style="text-align: -center;background: gray;">
 <div class="demo">青花瓷</div>
 <!-- <img src="../2.png" alt=""> -->
</div>
復制代碼

上面分別是圖片元素和普通塊元素實現的垂直居中代碼，眼見為實，看圖

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

<div class="box vertical-mode" style="text-align: center;">
 <img src="../2.png" alt="">
</div>
復制代碼

使用text-indent實現文字下沉效果

核心css

.btn:active {
 text-indent: 2px;
}
<a href="javascript：;" class="btn vertical-mode">領</a>
復制代碼

這種文字下沉效果只能適合中文，因為在垂直流排版的時候中文是不會旋轉的

而且這種效果只適合一個字的情景

實現全兼容的icon fonts圖標旋轉效果

老IE下讓小圖標旋轉很麻煩，writing-mode把文檔變成垂直流的時候，英文、數字和字符號都天然的轉了90°

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

<span class="icon-play vertical-mode">剪頭朝下</span>
復制代碼

好了，這就是《CSS世界》里最后三章的全部內容了，終于寫完了，哈哈，希望大家有收獲一些冷知識，另外看書還是要買正版的，地址我就不發了，大家還請支持張鑫旭老師的作品簡單說兩句

做個個人的小總結吧：

css有很多奇妙的地方，在某些特性當初被設計出來的時候可能只是為了某些圖文排版而生

但是我們可以利用它們帶來的特性發揮自己的創造力，實現其他很多意想不到的效果，因此，上面所講述的所有知識點，盡管很多內容都有點奇技淫巧以悅婦孺的過程

但這也給我們開發的過程中，提供了一些很出奇的妙招，值得我們好好學習領悟

感謝個位的觀看了，再見了，哈哈