CSS漂亮盒子（上）

html文件中的所有元素都是由矩形盒子構成的——不管是包含頁面結構的容器元素，還是段落中的每行文字，歸根結底都是盒子。

設定頁面背景顏色。

body

簡寫屬性：

body

通過background可以一次性地設定與背景相關的多個屬性。

十六進製制表示法：

乙個#後面加上6位十六進製制數字構成的字串。

這個字串由3組數字（每組各2位）構成，每個數字的取值範圍是0~f。十六進製制的意思就是每個數字都可能有16種不同的值，因此除了0~9這10個數，還要用a~f補足第11~16位數。

3組數字分別表示顏色中的紅、綠、藍（rgb）通道的值。每種顏色通道的值有256種可能，也就是2位十六進製制數所能表示的可能性（16×16=256）。

如果3組數字中每組的2位數字相同，可以簡寫成3位數字。

顏色值也可以用預定義的關鍵字表示（比如red、green、blue等等）。

rgb()函式式表示法：

rgb的每個值可以是乙個十進位制數值，取值範圍為0~255，也可以是乙個百分比值，取值範圍為0%~100%。

body

hsl()函式式表示法：

色相-飽和度-亮度（hue-saturation-lightness），即hsl模型。

body

注意，使用哪種表示法來表示顏色沒有本質區別，它們只是表示同一事物的不同方法而已。

rgba()函式式表示法：

末尾的a表示alpha，是用於控制透明度的阿爾法通道。

body

css提供另一種方式來控制透明度。

.box

使用opacity讓整個元素都變透明了，包括元素中包含的內容。

使用opacity把乙個元素設定為透明後，將無法再讓其子元素變得不那麼透明。

.profile-box

background-repeat的預設值（repeat）決定了會平鋪到整個元素盒子，即背景要沿x軸和y軸重複。

.profile-box

使用url()函式載入可以使用相對路徑，也可以使用絕對路徑，還可以使用的base64編碼資料。

background-image: url(img/big-cat.jpg);

位圖意味著檔案會包含每個畫素的資料，擁有內在的維度（寬度和高度）。

svg圖形包含的是如何在螢幕上繪製圖形的指令，它可以任意縮放，也可以在任意畫素密度的螢幕上清晰呈現。

背景的位置由background-position屬性控制。

background-position屬性既可以使用關鍵字，也可以使用畫素、em或百分比。最簡單的情況下，可以只給兩個值：乙個表示相對於左側的偏移量，乙個表示相對於頂部的偏移量。

.profile-box

如果使用畫素或em單位來設定背景的位置，那麼的左上角會相對於元素的左上角定位，也就是會偏移指定的數值。如果設定背景的位置時使用了百分比，定位的是中對應的點。如果水平或垂直方向都設定為20%，那麼你定位的實際上是距左邊和上邊各20%的點，而這個點會與距離父元素左邊和上邊各20%的點重合。

使用關鍵字來對齊背景，要在x軸上用left、center或right，在y軸上用top、center或bottom。順序一般都是先x軸後y軸。

.profile-box

在只使用兩個關鍵字的情況下，規範並沒有限定順序（如可以使用top left）。

新語法允許給background-position新增外邊空宣告，先寫邊界關鍵字，再寫長度值。

activate flux capacitor

.link-with-icon

使用calc()函式可以讓瀏覽器替你計算任何數值（角度、畫素、百分比，等等），甚至還支援動態計算的混合單位。

.link-with-icon

預設情況下，背景是繪製在元素邊框以內的。如果把背景定位到邊框下方，而邊框又被設值為半透明，那麼邊緣就會出現半透明的邊框。使用background-clip屬性可以改變這個行為。

background-clip屬性的預設值為border-box。

.profile-box

使用background-origin屬性控制背景定位預設的原點的位置。

背景會附著在指定元素的後面，如果你滾動頁面，那麼背景也會隨著元素移動而移動。可以通過background-attachment屬性改變這種行為。

.profile-box

使用background-size屬性可以設定大小，也可以讓它隨元素大小縮放而縮放（不管頁面如何縮放，都讓內容保持自己的寬高比）。要讓隨元素縮放而縮放，則必須使用百分比值。不過要注意，百分比值並不是相對於固有大小，而是相對於容器大小。

.profile-box

使用關鍵字contain讓瀏覽器盡可能保持最大化，同時不改變的寬高比，避免被裁切。

.profile-box

使用background這個簡寫屬性要注意，它會把所有沒有明確指出的屬性都重置為其預設值。一般而言，明確的**更不容易出錯，而且也更容易讓人理解。

.profile-box