(創(chuàng)作不易，感謝有你，你的支持，就是我前行的最大動力，如果看完對你有幫助，請留下您的足跡）
目錄
定位
相對定位?
絕對定位
定位居中
固定定位
堆疊層級 z-index?
定位-總結(jié)?
高級技巧
CSS 精靈
字體圖標
字體圖標 – 下載字體
字體圖標 – 使用字體?
CSS 修飾屬性??
垂直對齊方式 vertical-align
過渡 transition
透明度 opacity?
光標類型 cursor?
定位
作用：靈活的改變盒子在網(wǎng)頁中的位置
實現(xiàn)：
1. 定位模式：position
2. 邊偏移：設(shè)置盒子的位置
? left
? right
? top
? bottom
相對定位?
position: relative
特點：
? 不脫標，占用自己原來位置
? 顯示模式特點保持不變
? 設(shè)置邊偏移則相對自己原來位置移動
拓展：很少單獨使用相對定位，一般是與其他定位方式配合使用
絕對定位
position: absolute
使用場景：子級絕對定位，父級相對定位（子絕父相）
特點：
? 脫標，不占位
? 顯示模式具備行內(nèi)塊特點
? 設(shè)置邊偏移則相對最近的已經(jīng)定位的祖先元素改變位置
? 如果祖先元素都未定位，則相對瀏覽器可視區(qū)改變位置
定位居中
實現(xiàn)步驟：
1. 絕對定位
2. 水平、垂直邊偏移為 50%
3. 子級向左、上移動自身尺寸的一半
? 左、上的外邊距為 –尺寸的一半
? transform: translate(-50%, -50%)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img
{
position: absolute;
left: 50%;
top: 50%;
margin-left: -265px;
margin-top: -127px;
}
</style>
</head>
<body>
<img src="./images/login.webp" alt="">
</body>
</html>網(wǎng)頁顯示為：? ? ? ? ? ? ? ? ? ? ? ? ?
?
固定定位
position: fixed
場景：元素的位置在網(wǎng)頁滾動時不會改變特點：
? 脫標，不占位
? 顯示模式具備行內(nèi)塊特點
? 設(shè)置邊偏移相對瀏覽器窗口改變位置
堆疊層級 z-index?
默認效果：按照標簽書寫順序，后來者居上
作用：設(shè)置定位元素的層級順序，改變定位元素的顯示順序
屬性名：z-index
屬性值：整數(shù)數(shù)字（默認值為0，取值越大，層級越高）
定位-總結(jié)?
高級技巧
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 測量小圖片左上角坐標
????????3.2 取負數(shù)坐標為 background-position 屬性值（向左上移動圖片位置）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div
{
width: 112px;
height: 110px;
background-image: url(./images/abcd.jpg);
/* 在圖片中找到n的位置并輸出 */
background-position: -256px -276px;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>例：? ? ? ? ? ? ? ?在圖片
中輸出
???
字體圖標
字體圖標：展示的是圖標，本質(zhì)是字體
作用：在網(wǎng)頁中添加簡單的、顏色單一的小圖標
優(yōu)點
????????靈活性：靈活地修改樣式，例如：尺寸、顏色等
????????輕量級：體積小、渲染快、降低服務(wù)器請求次數(shù)
????????兼容性：幾乎兼容所有主流瀏覽器
????????使用方便：先下載再使用
字體圖標 – 下載字體
iconfont 圖標庫：https://www.iconfont.cn/
下載字體
登錄 → 素材庫 → 官方圖標庫 → 進入圖標庫 → 選圖標，加入購物車 → 購物車，添加至項目，確定 → 下載至本地
字體圖標 – 使用字體?
1. 引入字體樣式表（iconfont.css）
2. 標簽使用字體圖標類名
????????1. iconfont：字體圖標基本樣式（字體名，字體大小等等）
????????2. icon-xxx：圖標對應(yīng)的類名
CSS 修飾屬性??
垂直對齊方式 vertical-align
瀏覽器給圖片對齊時會默認基線對齊，此時圖片和文字因為空白間距導(dǎo)致并沒有完全對齊，那么這種情況如何解決呢？
屬性名：vertical-align?
屬性值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div
{
border: 1px solid;
}
img
{
vertical-align: middle;
}
</style>
</head>
<body>
<div>
<img src="./images/1.webp" alt="">
嘿嘿嘿,貓貓可愛嗎？
</div>
</body>
</html>網(wǎng)頁顯示為：? ? ? ? ? ? ? ? ? ? ? ??
過渡 transition
作用：可以為一個元素在不同狀態(tài)之間切換的時候添加過渡效果
屬性名：transition（復(fù)合屬性）
屬性值：過渡的屬性 花費時間 (s)
提示：
? 過渡的屬性可以是具體的 CSS 屬性
? 也可以為 all（兩個狀態(tài)屬性值不同的所有屬性，都產(chǎn)生過渡效果）
? transition 設(shè)置給元素本身
透明度 opacity?
作用：設(shè)置整個元素的透明度（包含背景和內(nèi)容）
屬性名：opacity
屬性值：0 – 1
? 0：完全透明（元素不可見）
? 1：不透明
? 0-1之間小數(shù)：半透明
光標類型 cursor?
作用：鼠標懸停在元素上時指針顯示樣式
屬性名：cursor文章來源：http://www.zghlxwxcb.cn/news/detail-508573.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-508573.html
到了這里，關(guān)于前端web入門-CSS-day07的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
