13、定位（position）、CSS Sprites技術及絕對定位盒子居中
阿新 • • 發佈：2021-02-03
2.18 定位（定位屬性：position，以下屬性都需要top、bottom、left、right配合使用）
1、Absoulute：絕對定位特點：（1）以頁面的左上角為原點 （2）不保留原來的位置 （3）z-index調節圖層的順序
......
<style type="text/css">
#a,#b,#c{
width:200px;
height:200px;
background-color:#FF0000;
}
#b{
background-color:#0000FF;
position: 2、relative:相對定位
特點：（1）以自己的左上角為原點（2）保留原來的位置（3）z-index調節圖層位置順序
3、fixed:固定
將盒子固定在指定地方（一般用來做廣告的顯示）：CSS程式碼如下：
#a{
width:100px;
height:100px;
background-color:#FF0000;
position:fixed; /*固定在右下角2px處*/
right:2px;
bottom:2px;
}
1.19 CSS Sprites技術
利用CSS Sprites能很好地減少網頁的http請求，從而大大提高頁面的效能，這也是CSS Sprites最大的優點。對於當前網路流行的速度而言，不高於200KB的單張圖片的所需載入時間基本差不多。Sprites技術利用的背景的定位來實現。將很多小圖拼接成一張大圖，然後通過CSS的定位來實現不同盒子使用不同的背景。這樣減少http需求的次數。
位置定位的引數有兩個，第一個是表示左右移動，第二個表示上下移動，向頁面裡面移動是正數，向頁面外面移動是負數。
2.20 絕對定位盒子居中
第一步：絕對定位，距左距離為50%，距上距離為50%第二步：將盒子的左邊界移動-100px，上邊界移動-100px。這樣盒子就居於瀏覽器的中心了。
#win{
width:200px;
height:200px;
background-color:#333333;
position:absolute;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-100px;
}
2.21 綜合例題
拿到一張效果圖的時候，先看一看效果圖的尺寸，將效果圖的尺寸調整到主流瀏覽器的尺寸再做切片。為了切片準確，可以調出標尺，通過標尺拉出輔助線，在FW中，顯示/隱藏標尺快捷鍵是ctrl+alt+R。
將整個網站公用的CSS樣式寫在外部樣式中。
在頁面中，寫當前頁面的樣式。
Ctrl+T調出快速標籤。
基線的定義：
在<li>裡面放的圖片預設情況下是基線對齊（下面還有一個白色的底）。
佈局總結：
1、 能不用絕對定位和相對定位解決的事情，就不要用定位。
2、 能用標準流解決就儘量用標準流解決。
3、 標準流不能解決就用浮動。
4、 前兩者如果都不能解決再選擇定位方式。