在css中有三個顯示和隱藏的單詞比較常見，我們要區分開，他們分別是 display visibility 和 overflow。他們的主要目的是讓乙個元素在頁面中消失，但是不在文件原始碼中刪除。
display 顯示
display 設定或檢索物件是否及如何顯示。
display : none 隱藏物件 與它相反的是 display:block 除了轉換為塊級元素之外，同時還有顯示元素的意思。
特點： 隱藏之後，不再保留位置。
visibility 可見性
設定或檢索是否顯示物件。
visible : 物件可視
hidden : 物件隱藏
特點： 隱藏之後，繼續保留原有位置。（停職留薪）
overflow 溢位
檢索或設定當物件的內容超過其指定高度及寬度時如何管理內容。
visible : 不剪下內容也不新增滾動條。
auto : 超出自動顯示滾動條，不超出不顯示滾動條
hidden : 不顯示超過物件尺寸的內容，超出的部分隱藏掉
scroll : 不管超出內容否，總是顯示滾動條
滑鼠樣式cursor
設定或檢索在物件上移動的滑鼠指標採用何種系統預定義的游標形狀。
cursor : default 小白 | pointer 小手 | move 移動 | text 文字
outline : outline-color ||outline-style || outline-width
但是我們都不關心可以設定多少，我們平時都是去掉的。
最直接的寫法是 ： outline: 0; 或者 outline: none;
防止拖拽文字域
resize：none 這個單詞可以防止 火狐 谷歌等瀏覽器隨意的拖動 文字域。
右下角可以拖拽：
右下角不可以拖拽：
文字居中對齊，是 text-align: center;
vertical-align 垂直對齊， 這個看上去很美好的乙個屬性， 實際有著不可捉摸的脾氣，否則我們也不會這麼晚來講解。
vertical-align : baseline |top |middle |bottomvertical-align 不影響塊級元素中的內容對齊，它只針對於 行內元素或者行內塊元素，特別是行內塊元素，通常用來控制/表單與文字的對齊。
所以我們可以通過vertical-align 控制和文字的垂直關係了。 預設的會和文字基線對齊。
去除底側空白縫隙
或者表單等行內塊元素，他的底線會和父級盒子的基線對齊。這樣會造成乙個問題，就是底側會有乙個空白縫隙。
解決的方法就是：
2、給img新增diaplay：block，轉換為塊級元素就不會存在問題了
white-space
white-space設定或檢索物件內文字顯示方式。通常我們使用於強制一行顯示內容
normal : 預設處理方式 nowrap : 強制在同一行內顯示所有文字，直到文字結束或者遭遇br標籤物件才換行。
可以處理中文
text-overflow 文字溢位
text-overflow : clip | ellipsis
設定或檢索是否使用乙個省略標記（...）標示物件內文字的溢位
clip : 不顯示省略標記（...），而是簡單的裁切
ellipsis : 當物件內文字溢位時顯示省略標記（...）
注意一定要首先強制一行內顯示，再次和overflow屬性 搭配使用
white-space: nowrap;
/*1.強制在同一行內顯示所有文字，直到文字結束或者遭遇br標籤物件才換行*/
overflow: hidden; /* 2. 超出的部分 隱藏*/
text-overflow: ellipsis; /* 3. 溢位的部分用省略號替代*/
CSS高階技巧
1.滑鼠樣式cursor 設定或檢索在物件上移動的滑鼠指標採用何種系統預定義的游標形狀。cursor default 小白 pointer 小手 move 移動 text 文字 2.溢位的文字隱藏 word break 自動換行 white space設定或檢索物件內文字顯示方式。通常我們使用於強制...
CSS高階技巧
所謂的介面樣式，就是更改一些使用者操作樣式，比如 更改使用者的滑鼠樣式，表單輪廓.防止表單域拖拽等。但是比如滾動條的樣式改動受到了很多瀏覽器的抵制。設定或檢索在物件上移動的滑鼠指標採用何種系統預定義的游標形狀。cursor default 小白 pointer 小手 move 移動 text 文字 ...
CSS高階技巧
css高階技巧 注釋快捷鍵ctrl 1.精靈圖 為了有效減少伺服器接收和傳送請求的次數，提高頁面 的載入速度。使用精靈圖核心 主要針對背景使用，把多個小背景整合到一張大中。這個大也叫sprites 精靈圖 或者 雪碧圖。移動背景位置，此時可以使用background position.移動的距離就是...