01-定位

作用：靈活的改變盒子在網(wǎng)頁中的位置

實現(xiàn)：

1.定位模式：position

2.邊偏移：設(shè)置盒子的位置

• left

• right

• top

• bottom

相對定位

position: relative

特點：

• 不脫標(biāo)，占用自己原來位置

• 顯示模式特點保持不變

• 設(shè)置邊偏移則相對自己原來位置移動

div {position: relative;top: 100px;left: 200px;
}  

絕對定位

position: absolute

使用場景：子級絕對定位，父級相對定位（子絕父相）

特點：

• 脫標(biāo)，不占位

• 顯示模式具備行內(nèi)塊特點

• 設(shè)置邊偏移則相對最近的已經(jīng)定位的祖先元素改變位置

• 如果祖先元素都未定位，則相對瀏覽器可視區(qū)改變位置

.father {position: relative;
}
?
.father span {position: absolute;top: 0;right: 0;
}

定位居中

實現(xiàn)步驟：

1. 絕對定位

2. 水平、垂直邊偏移為 50%

3. 子級向左、上移動自身尺寸的一半

• 左、上的外邊距為 –尺寸的一半

• transform: translate(-50%, -50%)

img {position: absolute;left: 50%;top: 50%;
?/* margin-left: -265px;margin-top: -127px; */
?/* 方便： 50% 就是自己寬高的一半 */transform: translate(-50%, -50%);
}

固定定位

position: fixed

場景：元素的位置在網(wǎng)頁滾動時不會改變

特點：

• 脫標(biāo)，不占位

• 顯示模式具備行內(nèi)塊特點

• 設(shè)置邊偏移相對瀏覽器窗口改變位置

div {position: fixed;top: 0;right: 0;
?width: 500px;
}

堆疊層級z-index

默認(rèn)效果：按照標(biāo)簽書寫順序，后來者居上

作用：設(shè)置定位元素的層級順序，改變定位元素的顯示順序

屬性名：z-index

屬性值：整數(shù)數(shù)字（默認(rèn)值為0，取值越大，層級越高）

.box1 {background-color: pink;/* 取值是整數(shù)，默認(rèn)是0，取值越大顯示順序越靠上 */z-index: 1;
}
?
.box2 {background-color: skyblue;left: 100px;top: 100px;
?z-index: 2;
}

02-高級技巧

CSS精靈

CSS 精靈，也叫 CSS Sprites，是一種網(wǎng)頁圖片應(yīng)用處理方式。把網(wǎng)頁中一些背景圖片整合到一張圖片文件中，再background-position 精確的定位出背景圖片的位置。

優(yōu)點：減少服務(wù)器被請求次數(shù)，減輕服務(wù)器的壓力，提高頁面加載速度

實現(xiàn)步驟：

1. 創(chuàng)建盒子，盒子尺寸與小圖尺寸相同

2. 設(shè)置盒子背景圖為精靈圖

3. 添加 background-position 屬性，改變背景圖位置

3.1 使用 PxCook 測量小圖片左上角坐標(biāo)

3.2 取負(fù)數(shù)坐標(biāo)為 background-position 屬性值（向左上移動圖片位置）

案例-京東服務(wù)

HTML結(jié)構(gòu)

<div class="service"><ul><li><h5></h5><p>品類齊全，輕松購物</p></li><li><h5></h5><p>多倉直發(fā)，極速配送</p></li><li><h5></h5><p>正品行貨，精致服務(wù)</p></li><li><h5></h5><p>天天低價，暢選無憂</p></li></ul>
</div>

CSS樣式

<style>* {margin: 0;padding: 0;box-sizing: border-box;}
?li {list-style: none;}
?.service {margin: 100px auto;width: 1190px;height: 42px;/* background-color: pink; */}
?.service ul {display: flex;}
?.service li {display: flex;padding-left: 40px;width: 297px;height: 42px;/* background-color: skyblue; */}
?.service li h5 {margin-right: 10px;width: 36px;height: 42px;/* background-color: pink; */background: url(./images/sprite.png) 0 -192px;}
?.service li:nth-child(2) h5 {background-position: -41px -192px;}
?.service li:nth-child(3) h5 {background-position: -82px -192px;}
?.service li:nth-child(4) h5 {background-position: -123px -192px;}
?.service li p {font-size: 18px;color: #444;font-weight: 700;line-height: 42px;}
</style>

字體圖標(biāo)

字體圖標(biāo)：展示的是圖標(biāo)，本質(zhì)是字體

作用：在網(wǎng)頁中添加簡單的、顏色單一的小圖標(biāo)

優(yōu)點

• 靈活性：靈活地修改樣式，例如：尺寸、顏色等

• 輕量級：體積小、渲染快、降低服務(wù)器請求次數(shù)

• 兼容性：幾乎兼容所有主流瀏覽器

• 使用方便：先下載再使用

下載字體

iconfont 圖標(biāo)庫：iconfont-阿里巴巴矢量圖標(biāo)庫

登錄 → 素材庫 → 官方圖標(biāo)庫 → 進(jìn)入圖標(biāo)庫 → 選圖標(biāo)，加入購物車 → 購物車，添加至項目，確定 → 下載至本地

使用字體

1. 引入字體樣式表（iconfont.css）

1. 標(biāo)簽使用字體圖標(biāo)類名

   • iconfont：字體圖標(biāo)基本樣式（字體名，字體大小等等）

   • icon-xxx：圖標(biāo)對應(yīng)的類名

上傳矢量圖

作用：項目特有的圖標(biāo)上傳到 iconfont 圖標(biāo)庫，生成字體

上傳步驟：上傳 → 上傳圖標(biāo) → 選擇 svg 矢量圖，打開 → 提交 → 系統(tǒng)審核

03-CSS修飾屬性

垂直對齊方式

屬性名：vertical-align

過渡

作用：可以為一個元素在不同狀態(tài)之間切換的時候添加過渡效果

屬性名：transition（復(fù)合屬性）

屬性值：過渡的屬性 花費時間 (s)

提示：

• 過渡的屬性可以是具體的 CSS 屬性

• 也可以為 all（兩個狀態(tài)屬性值不同的所有屬性，都產(chǎn)生過渡效果）

• transition 設(shè)置給元素本身

img {width: 200px;height: 200px;transition: all 1s;
}
?
img:hover {width: 500px;height: 500px;
}

透明度opacity

作用：設(shè)置整個元素的透明度（包含背景和內(nèi)容）

屬性名：opacity

屬性值：0 – 1

• 0：完全透明（元素不可見）

• 1：不透明

• 0-1之間小數(shù)：半透明

光標(biāo)類型cursor

作用：鼠標(biāo)懸停在元素上時指針顯示樣式

屬性名：cursor

04-綜合案例-輪播圖

圖片效果

HTML結(jié)構(gòu)

<div class="banner"><!-- 圖: ul > li --><ul><li><a href="#"><img src="./images/banner1.jpg" alt=""></a></li><li><a href="#"><img src="./images/banner2.jpg" alt=""></a></li><li><a href="#"><img src="./images/banner3.jpg" alt=""></a></li></ul>
</div>

CSS樣式

* {margin: 0;padding: 0;box-sizing: border-box;
}
?
li {list-style: none;
}
?
.banner {position: relative;margin: 100px auto;width: 564px;height: 315px;/* background-color: pink; */overflow: hidden;
}
?
/* 圖片 */
.banner img {width: 564px;border-radius: 12px;vertical-align: middle;
}
?
.banner ul {display: flex;
}

箭頭

HTML結(jié)構(gòu)

<!-- 箭頭 -->
<!-- 上一張 prev -->
<a href="#" class="prev"><i class="iconfont icon-zuoce"></i>
</a>
<!-- 下一張 next -->
<a href="#" class="next"><i class="iconfont icon-youce"></i>
</a>

CSS樣式

/* 箭頭 */
.banner .prev,
.banner .next {/* 隱藏 */display: none;position: absolute;top: 50%;transform: translateY(-50%);
?width: 20px;height: 30px;background-color: rgba(0,0,0, 0.3);
?text-decoration: none;color: #fff;line-height: 30px;
}
?
/* 鼠標(biāo)滑到banner區(qū)域，箭頭要顯示 display:block */
.banner:hover .prev,
.banner:hover .next {display: block;
}
?
.banner .prev {left: 0;border-radius: 0 15px 15px 0;
}
?
.banner .next {right: 0;border-radius: 15px 0 0 15px;text-align: center;
}

圓點

HTML結(jié)構(gòu)

<!-- 圓點 -->
<ol><li></li><li class="active"></li><li></li>
</ol>

CSS樣式

/* 圓點 */
.banner ol {position: absolute;bottom: 20px;left: 50%;transform: translateX(-50%);height: 13px;background-color: rgba(255,255,255,0.3);
?display: flex;
?border-radius: 10px;
}
?
.banner ol li {margin: 3px;width: 8px;height: 8px;background-color: #fff;border-radius: 50%;cursor: pointer;
}
?
/* 橙色的li */
.banner ol .active {background-color: #ff5000;
}