Css隨堂筆記（三） 1 關於背景圖片 A 設置背景圖片：background-image：url(“圖片的路徑”)； B 背景圖片位置： background-position：1 方位名詞 背景位置： 1.如果只設置一個方位詞，另外一個預設居中 2.如果設置的值是兩個方位詞，與順序無關 2 數值 ...
Css隨堂筆記（三）
1 關於背景圖片
A 設置背景圖片：background-image：url(“圖片的路徑”)；
B 背景圖片位置： background-position：1 方位名詞 背景位置：
1.如果只設置一個方位詞，另外一個預設居中
2.如果設置的值是兩個方位詞，與順序無關
2 數值：背景位置：
1.如果設置的值是數字：
1.一個值得時候，表示水平方向的位移，垂直方向預設居中
2.兩個值得時候，第一個表示水平位移 第二個表示垂直方向的位移
C 背景圖片是否平鋪：background-repeat：1 no-repeat 背景圖片不平鋪
2 repeat-x x軸平鋪
3 repeat-y y軸平鋪
D背景附著：background-attachment：1 scroll（預設值。滾動）2 fixed（背景固定）
E 背景透明：rgba（n,n,n,m）n的取值：0-255； m的取值：0-1 a：代表的是alhpa
F 背景簡寫：background：url(“”) no-repeat position; 註意：背景簡寫的時候，background-image一定要有，其他可選，而且與順序無關
2 盒子模型
A 頁面佈局的本質：就是擺放盒子模型
B 盒子模型的組成：
1.content：內容
2.padding：內邊距 padding的值： 一個值：表示上右下左都是這內邊距
兩個值：第一個表示上下內邊距，第二個表示左右內邊距
三個值：第一個表示上內邊距，第二個表示左右內邊距，第三個表示下內邊距
四個值：分別表示上 右 下 左
3.border：邊框
4.margin：外邊距 margin的值： 一個值：表示上右下左都是這外邊距
兩個值：第一個表示上下外邊距，第二個表示左右外邊距
三個值：第一個表示上外邊距，第二個表示左右外邊距，第三個表示下外邊距
四個值：分別表示上 右 下 左
Margin’塌陷：垂直塌陷和包含垂直塌陷{
1 垂直塌陷，沒有解決方案，佈局的時候儘可能去避免
2 包含垂直塌陷 1 給父盒子添加個border
2 給父盒子加overflow：hidden 觸發了bfc 推薦使用
}
C 盒子模型的居中：margin: 0 auto;垂直方向加auto沒有作用
D 影響盒子模型大小的因素： 1 padding
2 border
計算盒子的大小： 盒子的真實寬度 = width + 左右padding + 左右border
盒子的真實高度 = height + 上下padding + 上下border
E 盒子陰影：box-shadow：h-shadow(水平陰影位置） v-shadow（垂直陰影位置） blur（模糊距離） spread（陰影大小） color（陰影顏色） outset（外陰影 預設） inset（內陰影）
註意：水平位置和垂直位置一定要寫。。。盒子陰影預設是外陰影，不需要設置outset。設置反而是錯誤的
3 浮動
A 頁面佈局的三大機制：1 普通流，標準流 2 浮動 3 定位
B 浮動：
1 設置了浮動屬性的元素會脫離標準流的控制
2 浮動最初的目的：文字環繞圖片
3 浮動的特點：浮動的特點：
1.脫標，不占原來的位置
2.浮動的元素以頂部對齊
3.浮動能改變元素的顯示方式（呈現出行內塊元素的特點）
4.如果有包含關係，子元素浮動，不會跑出父元素，而且不占據父元素中的paddjing和border的位置
5.如果浮動的元素前面是標準流，那麼浮動的元素跟在標準流的下麵，如果浮動的元素前面也是浮動的元素。那麼他們在一行顯示（寬度要足夠
C 清除浮動：1 清除浮動指的是清除浮動帶來的影響
2 清除浮動的方式：
1.給父盒子加overflow：hidden
2.使用額外標簽法，在有浮動後面添加一個沒有樣式的空盒子，然後給clear屬性（不建議）
3.使用偽元素清除浮動（強烈推薦使用
Ps：偽元素：::before ::after
偽元素清除浮動.clearfix::after{
content:''
clear：both; 清除浮動
display：block; 一定要塊元素才能清除浮動，所以我們將偽元素轉為塊級元素
visibility：hidden; 為了隱藏content中的.
height：0; 為了消除content中的.撐出來的高度
line-height: 0; 為了瀏覽器的相容
}
.clearfix {
*zoom: 1;為了相容IE6-7
}
為瞭解決低版本瀏覽器相容問題，最起碼都得加個點進去
雙為元素清除浮動：.clearfix::before,.clearfix::after {
content：'';
display: table
}
.clearfix::after {
clear:both
}
.clearfix {
*zoom: 1;
}
D 關於常見的三種佈局方式： 1 版心佈局 版心：寬度占頁面的一半，在瀏覽器中居中顯示
2 通欄佈局 寬度和瀏覽器一樣，高度不到頁面一半
3 3.分欄佈局（左右分欄）
4 定位
A 定位：定位=定位方式（定位模式） + 偏移量（邊偏移），將盒子定位在某方位
偏移量：偏移量：元素在頁面移動的水平距離和垂直距離
偏移量的表示： top:
left:
right：
bottom：
top和left的級別比bottom和right高
B 定位模式：
1 靜態定位 html標準流中的元素的定位模式就是靜態定位
靜態定位特點：1.不能設置有效偏移量，所以靜態定位的元素遵循標準流
2 相對定位 相對定位：position：relative
特點：
1.元素不脫標。在占標準流中的位置
2.相對定位不能改變元素的顯示方式
3.相對定位移動的是參照元素本身在標準流中的位置
3 絕對定位‘ 絕對定位：position：absolute；
特點：絕對定位要設置寬高，不然就沒有寬高了
1.脫標，不占標準流中的位置
2.改變元素的顯示方式
3.如果有包含關係，子元素絕對定位，父輩元素中所以的元素都是靜態定位的元素，那麼這個絕對定位的元素位置參照瀏覽器做位置移動，
4.如果父輩元素中有非靜態定位的元素，那麼這個絕對定位的元素參照這個非靜態定位的父輩元素做位置的移動，如果父輩元素有多個非靜態定位的元素，那麼這個絕對定位元素參照離自身最近的父輩元素做位置的移動（就近元素）
4 固定定位 position:fixed;
特點：
1.固定定位的元素脫標，不占位置
2.能改變元素的顯示方式
3.固定定位的元素始終都是參照瀏覽器的位置移動，與父輩元素的定位方式無關
C 定位的佈局方式：子絕父相的定位佈局方式：子元素絕對定位，父元素相對定位
D 元素的層級： z-index:'' （0-無限）
z-index層級只對非靜態定位的元素有效；
對於非靜態定位的元素，後面的元素的層級比前面的元素的層級高
費靜態定位的元素的層級高靜態定位的元素，如果非靜態定位的元素不設置層級，預設是0
position:relative(定位都行）
