元素的顯示與隱藏

display -- block;(轉換為塊元素&& 顯示) none(隱藏 && 不保留原來的位置) -- 重要！

visibility -- visible(顯示) hidden (隱藏 && 保留原來的位置 )

復習：overflow:hidden; 1.之前解決父子關系垂直嵌套的合并塌陷問題。2.清除浮動

overflow -- hidden 內容超出的部分隱藏(重點的) scroll(強制出現滾動條樣式) auto(根據內容多少來判斷是否出現滾動條 )

精靈技術

目的：為了有效地減少服務器接受和發送請求的次數，提高頁面的加載速度

實現原理： 只請求一張圖 --只是展示不同位置的小圖。

案例使用：

background-image 背景圖片

background-repeat 是否平鋪

background-position 背景定位

小小注意點：

1.精靈技術主要針對背景圖片，插入的img不需要這個技術

2.需要測量每個小背景圖片的大小和位置

3.給盒子指定小的背景圖片時，背景定位基本都是負值

##

字體圖標

優勢：瀏覽器支持性比較好，靈活性大；體積小，加載速度快，節省帶寬流量；減輕服務器壓力。

注意：字體圖標是字體 不是圖片

使用字體圖標

1.把包包里面的font文件夾復制出來一份，放在我們項目根目錄。

2.在html文件標簽里面添加結構

3.在html文件樣式style里面聲明字體：告訴代碼和別人使用我們自己自定義的字體(一定注意路徑問題)

4.給盒子設置字體即可

追加字體圖標

原來的不能刪除，繼續使用，此時我們需要這樣做

把壓縮包里面的selection.json 從新上傳，然后，選中自己想要新的圖標，從新下載壓縮包，替換原來文件夾即可。

重新導入selection.json 生成 新的字體包--》追加選擇字體 --》點擊下載 --》把之前項目中fonts刪除--》替換成新的字體包里面的fonts文件夾

css三角形

本質：還是利用了盒子的邊框

做法：

1.寬高為 零

2.四個邊都要的，只保留我們需要的邊框顏色，其他的 顏色透明即可。

3.為了照顧兼容問題，設置：line-height:0; font-size:0;

三角形案例： ? ?.demo { ? ? ? ? ? ?position: relative; ? ? ? ? ? ?width: 200px; ? ? ? ? ? ?height: 100px; ? ? ? ? ? ?background-color: pink; ? ? ? } ? ? ? ? ? ? ? ?i { ? ? ? ? ? ?position: absolute; ? ? ? ? ? ?top: 35px; ? ? ? ? ? ?left: 200px; ? ? ? ? ? ?width: 0; ? ? ? ? ? ?height: 0; ? ? ? ? ? ?border: 15px solid transparent; ? ? ? ? ? ?border-left-color: hotpink; ? ? ? }

用戶的界面樣式

? ? ? 我是默認的小白鼠標樣式 ? ? ? 我是鼠標小手樣式 ? ? ? 我是鼠標移動樣式 ? ? ? 我是鼠標文本樣式 ? ? ? 我是鼠標禁止樣式 ? ?cursor:pointer; -- 記住！cursor:move; --記住！cursor:not-allowed; --記住！

輪廓線

outline: 0/ none; ----- 去掉輪廓線

防止文本域拖拽

resize:none;

vertical-align 垂直對齊方式

• 如果讓單行文本垂直居中 -- 使用line-height，如果處理圖片和文本的垂直對齊方式，line-height=高 不可以實現！
• 注意：只針對行內元素和 行內塊起作用。
• 通常用于 -- 圖片和文本對齊問題和去除圖片底部空白縫隙問題。
• 去除圖片底部空白讓圖片白不要和 基線對齊 --- vertical-align:top middle bottom轉換為塊元素 -- display:block;

? ?div { ? ? ? ? ? ?border: 2px solid red; ? ? ? } ? ? ? ? ? ? ? ?img { ? ? ? ? ? ?/* 這個屬性加給圖片本身，千萬不要加給圖片的父級盒子 */ ? ? ? ? ? ?vertical-align: middle; ? ? ? }? ? ? ? ?

單行文字溢出省略號 顯示 (背過!)

1.必須強制一行顯示 white-space:nowrap;

2.超出部分隱藏 overflow:hidden;

3.文字省略號代替超出的文本 text-overflow:ellipsis;

多行文本省略號顯示

? ?overflow: hidden; ? ? ? ? ? ?/*文字省略號代替*/ ? ? ? ? ? ?text-overflow: ellipsis; ? ? ? ? ? ?/* 彈性伸縮盒子模型顯示 */ ? ? ? ? ? ?display: -webkit-box; ? ? ? ? ? ?/* 限制在一個塊元素顯示的文本的行數 */ ? ? ? ? ? ?-webkit-line-clamp: 3; ? ? ? ? ? ?/* 設置或檢索伸縮盒對象的子元素的排列方式 */ ? ? ? ? ? ?-webkit-box-orient: vertical;

margin負值運用(練習！)

前置知識點：

relative -- 相對定位占位置

absolute --- 絕對定位不占位置

float ---- 浮動不占位置

文字環繞效果

浮動 -- 壓不住下面標流的圖片和文字。

行內塊可以單獨設置寬高一排顯示

text-align:center --- 給父親元素添加，可以讓子盒子(行內塊/行內元素)水平居中。

京東三角形巧妙運用

div { ? ? ? ? ? ?/* 1.寬高為0 */ ? ? ? ? ? ?width: 0; ? ? ? ? ? ?height: 0; ? ? ? ? ? ?/* 2.只保留需要的邊框顏色 */ ? ? ? ? ? ?border-color: transparent transparent red transparent; ? ? ? ? ? ?/* 3.邊框是實線 */ ? ? ? ? ? ?border-style: solid; ? ? ? ? ? ?/* 4.保留需要的邊框大小，剩下的為 0 */ ? ? ? ? ? ?border-width: 0 0 100px 50px; ? ? ? }?

總結

以上是生活随笔為你收集整理的css鼠标变成小手_技巧篇：CSS高级技巧详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。