為什麼需要精靈圖
有效減少伺服器接收和傳送請求的次數，提高頁面的載入速度，出現了css精靈技術（也稱）css sprites、css雪碧）
核心原理：將網頁中一些小背景影象整合到一張大圖中，這樣只需要一次請求即可
精靈圖使用：
使用ps切片選擇需要的切片
找到w、h、x、y屬性，用css實現
缺點檔案比較大
本身放大縮小會失真
一旦製作完畢想要更換比較複雜
字型圖示iconfont，展示的是，本質是文字
優點輕量級：比影象小，隨字型載入出來，減少了伺服器請求
靈活性：可以改變顏色、陰影、透明效果、旋轉等
相容性：幾乎支援所有瀏覽器
不能替代精靈技術，只是對工作中圖示部分技術的提公升和優化
使用
@font-face字型圖示的追加
把壓縮包裡的selection.json在網頁裡開啟
選擇新的圖示
讓盒子的長寬為0，四個邊框不為0，則會生成乙個正方形其中四個三角形
-->將其中乙個邊框設定顏色，其他位transparant，就會出現單獨的三角形
div滑鼠樣式
li預設選中輸入（input/textarea標籤）框的時候，會有個藍色的外框線
給表單新增outline:0/none
input預設文字框（textarea）拖動右下角是可以拉大的，會影響布局
textareavertical-align使用
經常用於設定或者表單和文字垂直對齊
vertical-align :baseline |top |middle |bottom底部空白縫隙
原因是行內塊元素會和文字基線對齊
把轉換成塊級元素display:block
溢位的文字省略號
單行文字溢位
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
多行文字溢位
有較大相容性問題，適合於webkit瀏覽器（谷歌）或移動端（移動端大多數是webkit核心）
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
可以用於解決相鄰盒子邊框重疊後變粗的問題
float要放在margin：-1前面
當滑鼠經過時改變邊框顏色，會出現邊框被其他邊框壓住的問題
-->如果沒有定位，加相對定位，如果有定位，則加z-index提高層級
文字圍繞浮動元素
浮動元素周圍的文字會自動圍繞該元素，可以用於實現左圖右文字的模組或者新聞中樣式
行內塊元素巧妙應用
頁碼的布局
行內塊預設有大小，且自帶距離，使用text-align：center即可水平居中對齊
.box
.box a
實現某些**標籤中的斜三角
.box不同瀏覽器對某些標籤的預設值是不同的，為了清除不同瀏覽器對html文字呈現的差異，照顧瀏覽器的相容性，需要初始化
unicode編碼字型：
把中文字型的名稱用相應的unicode編碼代替，有效的避免瀏覽器解釋css**時出現亂碼
"5b8b\4f53"表示宋體/黑體
京東初始化**：
/* 把我們所有標籤的內外邊距清零 */
* /* em 和 i 斜體的文字不傾斜 */
em,i
/* 去掉li 的小圓點 */
li img
button
a a:hover
button,
input
body
.hide,
.none
/* 清除浮動 */
.clearfix:after
.clearfix
CSS高階技巧
1.滑鼠樣式cursor 設定或檢索在物件上移動的滑鼠指標採用何種系統預定義的游標形狀。cursor default 小白 pointer 小手 move 移動 text 文字 2.溢位的文字隱藏 word break 自動換行 white space設定或檢索物件內文字顯示方式。通常我們使用於強制...
CSS高階技巧
所謂的介面樣式，就是更改一些使用者操作樣式，比如 更改使用者的滑鼠樣式，表單輪廓.防止表單域拖拽等。但是比如滾動條的樣式改動受到了很多瀏覽器的抵制。設定或檢索在物件上移動的滑鼠指標採用何種系統預定義的游標形狀。cursor default 小白 pointer 小手 move 移動 text 文字 ...
CSS高階技巧
在css中有三個顯示和隱藏的單詞比較常見，我們要區分開，他們分別是 display visibility 和 overflow。他們的主要目的是讓乙個元素在頁面中消失，但是不在文件原始碼中刪除。display 顯示 display 設定或檢索物件是否及如何顯示。display none 隱藏物件 與...