css高階技巧 注釋快捷鍵ctrl+/
1.精靈圖:為了有效減少伺服器接收和傳送請求的次數，提高頁面
的載入速度。
使用精靈圖核心：
主要針對背景使用，把多個小背景整合到一張大中。
這個大也叫sprites 精靈圖 或者 雪碧圖。
移動背景位置，此時可以使用background-position.
移動的距離就是目標的x和y座標，注意網頁中的座標有所不同。
往上往左走都是負值。
使用精靈圖時需要精確測量，每個背景的大小和位置。
background-position: x y; 例如： background-position: -182px 0;
或者 background: url() no-repeat x y;
字型圖示：iconfont 展示的是圖示，本質是文字
優點：輕量級，靈活性，相容性。
icomoon字型檔 免費外國**
阿里iconfont字型檔
免費字型圖示的引入（引入到我們html頁面中）
一定注意字型檔案路徑的問題。將下面這段**貼上到css中，或者html檔案的中
@font-face
複製貼上的小框
字型圖示的追加（以後新增新的小圖示）
css三角：
width：0；
height：0；
/為了照顧相容性
line-height: 0;
font-size: 0;/
border: 5px solid transparent;（透明）
border-bottom-color: pink;
css使用者介面樣式：
更改使用者的滑鼠樣式： 滑鼠樣式cursor
li 常見的滑鼠樣式： def ault 小白 預設
pointer 小手
move 移動
text 文字
not-allowed 禁止
輪廓線outline
取消搜尋框中的輪廓線： 給表單新增outline: 0;或者outline: none;就可以去掉藍色輪廓線。
防止拖拽文字域 resize
textarea
vertical-align: 用於設定或者表單（行內塊元素）和文字垂直對齊。只針對行內元素或者行內塊元素。
vertical-align: baseline | top | middle | bottom；
baseline 預設。元素放置在父元素的基線上。
top 把元素的頂端與行中最高元素的頂端對齊。
middle 把此元素放置在父元素的中部。
bottom 把元素的頂端與行中最低的元素的頂端對齊。
在的屬性中加入vertical-align: middle；
解決底部預設空白縫隙問題
溢位的文字省略號顯示
單行文字溢位顯示省略號。
必須滿足三個條件：
1. 先強制一行內顯示文字white-space: nowrap; （預設normal自動換行）
2. 超出部分隱藏：overflow:hidden;
3. 文字用省略號替代超出的部分:text-overflow: ellipsis;
2. 多行文字溢位顯示省略號
有較大相容性問題，適合webkit瀏覽器或移動端（移動端大部分是webkit核心）
overflow: hidden;
text-overflow: ellipsis;
/*彈性伸縮盒子模型顯示*/
display:-webkit-box;
/*限制在乙個塊元素顯示的文字的行數*/
-webkit-line-clamp:2;
/*設定或檢索伸縮盒物件的子元素的排列方式*/
-webkit-box-orient:vertical;
常見的布局技巧：
margin負值的運用
盒子邊框border:1px; 則讓每個盒子margin往左側移動-1px,正好壓住相鄰盒子邊框。
滑鼠經過某個盒子的時候，提高當前盒子的層級即可（如果沒有有定位，則加相對定位position:relative; border：1px solid blue;（保留位置），如果有定位，則加z-index: 1;）
（設定一排盒子，當滑鼠移動時出現邊框）
方法一：ul li
ul li: hover
方法二：
ul li
ul li: hover
文字圍繞浮動元素
例如設定乙個**和文字一行水平居中，將**的盒子設定浮動即可。
.pic
.pic img
行內塊的巧妙運用 不需要設定ul,li，margin等，直接轉換為行內塊元素（頁尾就可以運用此功能）
傾斜 */
/* 去掉li的小圓點 */ li
img/* 當我們滑鼠經過button按鈕時，滑鼠變成小手 */
button
/* 預設鏈結顏色，取消下劃線 */ a
/* 滑鼠經過變成紅色 */
a:hover
/* 指定字型 */
button,
input
body
/* 隱藏元素 */
.hide,
.none
/* 清除浮動 */
.clearfix:after{
visibility
: hidden;
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 隱藏物件 與...