元素的顯示與隱藏

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;
        }

  <div class="demo">
        <i></i>
    </div>

用戶的界面樣式

 <ul>
        <li style="cursor:default;">我是默認的小白滑鼠樣式</li>
        <li style="cursor:pointer;">我是滑鼠小手樣式</li>
        <li style="cursor:move;">我是滑鼠移動樣式</li>
        <li style="cursor:text;">我是滑鼠文本樣式</li>
        <li style="cursor:not-allowed;">我是滑鼠禁止樣式</li>
    </ul>
​
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;
        }
​
  <div>
        <img src="images/ldh.jpg" alt="">
    </div>

單行文字溢出省略號 顯示 （背過!）

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;
        }
​
<div> </div>