Day10 學習筆記
3月12號學習的內容是CSS的兩個常用樣式：背景屬性background和定位屬性position。第一次接觸到定位屬性這個概念，需要配合程式碼練習進行理解，雖然分為相對定位、絕對定位和固定定位這三種，但我認為要比浮動容易理解一些，只不過一些細節需要分清。
照例先放目錄，下面是學習筆記。分為兩個部分：一個是根據影片錄播做的截圖筆記（已製作為PDF檔案），另一部分是重點筆記（內容更精簡）。下面全部分享出來，一方面督促自己學習，另一方面歡迎大家交流分享~
截圖筆記2021_03_12。pdf重點筆記20210312。pdf
背景屬性background
背景屬性可以分為五個單一屬性，分別是：
背景圖片background-image
background-image： url（）；
背景重複background-repeat
background-repeat： no-repeat/repeat-x/repeat-y；（預設repreat）
背景定位background-position
background-position： left/center/right top/center/bottom； 或者是background-position： 100px 50px；（預設載入位置是瀏覽器視窗左上角頂點）
背景附著background-attachment
background-attachment： fixed；（預設scroll）
背景顏色background-color
background-color： 顏色名/rgb/十六進位制；
也可以合寫為一個綜合屬性background，屬性值之間用空格隔開，可以互換位置。這一點要注意與font綜合屬性相區別：
font綜合屬性
font綜合屬性值有一定的順序，且必須要用有字號和字型。
font： bold italic 字號/行高 字型font： bold italic 字號/行高 字型
background綜合屬性
background綜合屬性值之間可以互換位置
這裡比較重要的是
背景應用
，需要配合程式碼練習，有以下幾個應用場景：
替換插入圖
：SEO最佳化，解決
標籤中插入logo圖片後就無法書寫搜尋關鍵字的問題，方法是在標籤中書寫標籤內的關鍵字，然後給標籤設定背景圖為logo圖，接著隱藏文字（text-indent： -15em； overflow： hidden；）padding區域背景圖
：無序列表中每行前面的圖示設定，方法是用padding擠出位置用來載入背景圖
padding區域背景圖
3。
CSS精靈圖（CSS雪碧/CSSSprites）技術
：是一種處理網頁背景影象的方式。用來修飾網頁的零星背景圖會被集中到一張大圖中去，這張大圖就叫做精靈圖。它的作用是會減少伺服器接受和傳送請求的次數，提高頁面載入速度。
有很多線上的精靈圖生成工具，生成精靈圖後根據FW軟體中對精靈圖的切片，然後利用背景定位background-position將切片的寬高和x、y值進行對應設定。（用FW切片，切片的寬高就是子盒子的寬高，切片在FW原圖中對應的x、y值
取負數
，就是background-position畫素值x、y的值）
CSS3新增背景屬性
背景半透明：rgba模式（a代表不透明度，取值在0-1之間，0代表完全透明，1代表不透明，0。5表示半透明）
背景顏色設定rgba
文字和邊框也可以設定rgba
2。背景縮放background-size
bckground-size的屬性值
3。多背景：
先寫的背景壓蓋後寫的背景圖片
多背景
定位屬性position
定位型別
屬性值
參考元素
參考點
對比點
性質
應用場景
相對定位
relative
標籤載入的原始位置
\
\
不脫標，不讓位，元素穩定
子絕父相；佔位的情況下進行微調
絕對定位
absolute
距離最近的有定位的祖先元素，如果祖先元素沒有定位，參考
情況一：
為參考元素時（見下圖1）：情況二：祖先級為參考點時（見下圖2）盒子的所有盒模型屬性最外面的左上角/右下角
脫離標準流，讓出位置
製作壓蓋效果更徹底
固定定位
fixed
瀏覽器視窗
\
\
脫離標準流，讓出位置
固定在瀏覽器底部的返回頂部的箭頭
圖1
圖2
關於絕對定位的參考點和對比點，如下圖所示：
left top
參考點為瀏覽器視窗的左上角頂點
對比點為所有盒模型的左上角點
right top
參考點為瀏覽器視窗的左上角頂點
對比點為所有盒模型的右上角點
left bottom
參考點為瀏覽器視窗首屏的左下角頂點
對比點為所有盒模型的左下角點
right bottom
參考點為瀏覽器視窗首屏的右下角頂點
對比點為所有盒模型的右下角點
定位屬性的應用
壓蓋
2。居中：不論子元素是否寬於父元素，都可以實現居中效果。
（這部分對於margin-left的屬性值設定為負數的效果理解不夠，還需再思考一下）
3。壓蓋順序：
預設情況：定位的元素都會去壓蓋標準流或浮動的元素；都是定位的元素的話，後寫的定位壓蓋先寫的定位。
自定義壓蓋順序：z-index屬性。屬性值數字大的壓蓋數字小的，設定了z-index的壓蓋沒有設定的；屬性值數字相同的話，後寫的壓蓋先寫的；父子盒模型中，存在“從父效應”。
從父效應
總結：我認為，就頁面元素的佈局壓蓋效果來說，定位>浮動>標準流。
padding區域背景圖
：無序列表中每行前面的圖示設定，方法是用padding擠出位置用來載入背景圖
padding區域背景圖
3。
CSS精靈圖（CSS雪碧/CSSSprites）技術
：是一種處理網頁背景影象的方式。用來修飾網頁的零星背景圖會被集中到一張大圖中去，這張大圖就叫做精靈圖。它的作用是會減少伺服器接受和傳送請求的次數，提高頁面載入速度。
有很多線上的精靈圖生成工具，生成精靈圖後根據FW軟體中對精靈圖的切片，然後利用背景定位background-position將切片的寬高和x、y值進行對應設定。（用FW切片，切片的寬高就是子盒子的寬高，切片在FW原圖中對應的x、y值
取負數
，就是background-position畫素值x、y的值）
CSS3新增背景屬性
背景半透明：rgba模式（a代表不透明度，取值在0-1之間，0代表完全透明，1代表不透明，0。5表示半透明）
背景顏色設定rgba
文字和邊框也可以設定rgba
2。背景縮放background-size
bckground-size的屬性值
3。多背景：
先寫的背景壓蓋後寫的背景圖片
多背景
定位屬性position
定位型別
屬性值
參考元素
參考點
對比點
性質
應用場景
相對定位
relative
標籤載入的原始位置
\
\
不脫標，不讓位，元素穩定
子絕父相；佔位的情況下進行微調
絕對定位
absolute
距離最近的有定位的祖先元素，如果祖先元素沒有定位，參考
情況一：
為參考元素時（見下圖1）：情況二：祖先級為參考點時（見下圖2）盒子的所有盒模型屬性最外面的左上角/右下角
脫離標準流，讓出位置
製作壓蓋效果更徹底
固定定位
fixed
瀏覽器視窗
\
\
脫離標準流，讓出位置
固定在瀏覽器底部的返回頂部的箭頭
圖1
圖2
關於絕對定位的參考點和對比點，如下圖所示：
left top
參考點為瀏覽器視窗的左上角頂點
對比點為所有盒模型的左上角點
right top
參考點為瀏覽器視窗的左上角頂點
對比點為所有盒模型的右上角點
left bottom
參考點為瀏覽器視窗首屏的左下角頂點
對比點為所有盒模型的左下角點
right bottom
參考點為瀏覽器視窗首屏的右下角頂點
對比點為所有盒模型的右下角點
定位屬性的應用
壓蓋
2。居中：不論子元素是否寬於父元素，都可以實現居中效果。
（這部分對於margin-left的屬性值設定為負數的效果理解不夠，還需再思考一下）
3。壓蓋順序：
預設情況：定位的元素都會去壓蓋標準流或浮動的元素；都是定位的元素的話，後寫的定位壓蓋先寫的定位。
自定義壓蓋順序：z-index屬性。屬性值數字大的壓蓋數字小的，設定了z-index的壓蓋沒有設定的；屬性值數字相同的話，後寫的壓蓋先寫的；父子盒模型中，存在“從父效應”。
從父效應
總結：我認為，就頁面元素的佈局壓蓋效果來說，定位>浮動>標準流。
