摘要：隨堂筆記三關(guān)于背景圖片設(shè)置背景圖片圖片的路徑背景圖片位置方位名詞背景位置如果只設(shè)置一個方位詞，另外一個默認居中如果設(shè)置的值是兩個方位詞，與順序無關(guān)數(shù)值背景位置如果設(shè)置的值是數(shù)字一個值得時候，表示水平方向的位移，垂直方向默認居中兩個值得

Css隨堂筆記（三）

1 關(guān)于背景圖片

?

A 設(shè)置背景圖片：background-image：url(“圖片的路徑”)；

?

B 背景圖片位置： background-position：1 方位名詞 背景位置：???

????? ???????????????????????????????????????????????????????????????????????? 1.如果只設(shè)置一個方位詞，另外一個默認居中

????? ???????????????????????????????????????????????????????????????????????? 2.如果設(shè)置的值是兩個方位詞，與順序無關(guān)

?????????????????????????????????????????????????????????????? ?? 2 數(shù)值：背景位置：

　　　　　　　　　　　　　　　　　　　　　　1.如果設(shè)置的值是數(shù)字：

????? ???????????????????????????????????????????????????????????????????????? ????????????????????? 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一定要有，其他可選，而且與順序無關(guān)

?

2 盒子模型

?

A 頁面布局的本質(zhì)：就是擺放盒子模型

?

B 盒子模型的組成：

???????????????? ?????????? 1.content：內(nèi)容

???????????????? ?????????? 2.padding：內(nèi)邊距 padding的值： 一個值：表示上右下左都是這內(nèi)邊距

兩個值：第一個表示上下內(nèi)邊距，第二個表示左右內(nèi)邊距

三個值：第一個表示上內(nèi)邊距，第二個表示左右內(nèi)邊距，第三個表示下內(nèi)邊距

四個值：分別表示上 右 下 左

???????????????? ?????????? 3.border：邊框

???????????????? ?????????? 4.margin：外邊距 margin的值：??? 一個值：表示上右下左都是這外邊距

兩個值：第一個表示上下外邊距，第二個表示左右外邊距

三個值：第一個表示上外邊距，第二個表示左右外邊距，第三個表示下外邊距

四個值：分別表示上 右 下 左

??????????????????????????? ????? Margin’塌陷：垂直塌陷和包含垂直塌陷{

????????????????????????????????????????????????????????????????????????????? 1 垂直塌陷，沒有解決方案，布局的時候盡可能去避免

????????????????????????????????????????????????????????????????????????????? 2 包含垂直塌陷? ? ?1? 給父盒子添加個border

???????????????????????????????????????????????????????????????????????????????????????????????????? 　　2 給父盒子加overflow：hidden? 觸發(fā)了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（內(nèi)陰影）

　　　　　　注意：水平位置和垂直位置一定要寫。。。盒子陰影默認是外陰影，不需要設(shè)置outset。設(shè)置反而是錯誤的

?

?

3 浮動

?

A 頁面布局的三大機制：1 普通流，標準流 ?2 浮動 ?3 定位

?

B 浮動：

　　1 設(shè)置了浮動屬性的元素會脫離標準流的控制

??????? 2 浮動最初的目的：文字環(huán)繞圖片

??????? 3 浮動的特點：浮動的特點：

?????????? 1.脫標，不占原來的位置

?????????? 2.浮動的元素以頂部對齊

?????????? 3.浮動能改變元素的顯示方式（呈現(xiàn)出行內(nèi)塊元素的特點）

?????????? 4.如果有包含關(guān)系，子元素浮動，不會跑出父元素，而且不占據(jù)父元素中的paddjing和border的位置

5.如果浮動的元素前面是標準流，那么浮動的元素跟在標準流的下面，如果浮動的元素前面也是浮動的元素。那么他們在一行顯示（寬度要足夠

?

C 清除浮動：1 清除浮動指的是清除浮動帶來的影響

?????????? ???? 2 清除浮動的方式：

????? ??????????????????????????? 1.給父盒子加overflow：hidden

????? ??????????????????????????? 2.使用額外標簽法，在有浮動后面添加一個沒有樣式的空盒子，然后給clear屬性（不建議）

????? ??????????????????????????? 3.使用偽元素清除浮動（強烈推薦使用

Ps：偽元素：::before?? ::after

?

偽元素清除浮動.clearfix::after{

????? ??????????????????????????? content:"

????? ??????????????????????????? clear：both;? 清除浮動

????? ??????????????????????????? display：block;? 一定要塊元素才能清除浮動，所以我們將偽元素轉(zhuǎn)為塊級元素

????? ??????????????????????????? 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 關(guān)于常見的三種布局方式： ?1 版心布局 版心：寬度占頁面的一半，在瀏覽器中居中顯示

????????????????????????????????????????? ?? ??2 通欄布局 寬度和瀏覽器一樣，高度不到頁面一半

???????????????????????????????????????????????? ?3 3.分欄布局（左右分欄）

?

?

4 定位

?

A 定位：定位=定位方式（定位模式） + 偏移量（邊偏移），將盒子定位在某方位

????? 偏移量：偏移量：元素在頁面移動的水平距離和垂直距離

?????? 偏移量的表示：? top:

left:

right：

bottom：

top和left的級別比bottom和right高

?

B 定位模式：

?

1 靜態(tài)定位 html標準流中的元素的定位模式就是靜態(tài)定位

???????????????? ??????????? 靜態(tài)定位特點：1.不能設(shè)置有效偏移量，所以靜態(tài)定位的元素遵循標準流

?

2 相對定位 相對定位：position：relative

??????????????????????????? ?特點：

1.元素不脫標。在占標準流中的位置

2.相對定位不能改變元素的顯示方式

3.相對定位移動的是參照元素本身在標準流中的位置

3 絕對定位‘ 絕對定位：position：absolute；

???????????????? 特點：絕對定位要設(shè)置寬高，不然就沒有寬高了

1.脫標，不占標準流中的位置

2.改變元素的顯示方式

3.如果有包含關(guān)系，子元素絕對定位，父輩元素中所以的元素都是靜態(tài)定位的元素，那么這個絕對定位的元素位置參照瀏覽器做位置移動，

4.如果父輩元素中有非靜態(tài)定位的元素，那么這個絕對定位的元素參照這個非靜態(tài)定位的父輩元素做位置的移動，如果父輩元素有多個非靜態(tài)定位的元素，那么這個絕對定位元素參照離自身最近的父輩元素做位置的移動（就近元素）

4 固定定位 position:fixed;

???????????????? 特點：

1.固定定位的元素脫標，不占位置

2.能改變元素的顯示方式

3.固定定位的元素始終都是參照瀏覽器的位置移動，與父輩元素的定位方式無關(guān)??

?

C 定位的布局方式：子絕父相的定位布局方式：子元素絕對定位，父元素相對定位

?

D 元素的層級： z-index:" （0-無限）

?????????????????????????????????????? z-index層級只對非靜態(tài)定位的元素有效；

對于非靜態(tài)定位的元素，后面的元素的層級比前面的元素的層級高

費靜態(tài)定位的元素的層級高靜態(tài)定位的元素，如果非靜態(tài)定位的元素不設(shè)置層級，默認是0

?

position:relative(定位都行）