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

Css隨堂筆記（三）

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

?

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

?

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

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

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

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

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

????? ???????????????????????????????????????????????????????????????????????? ????????????????????? 1.一個(gè)值得時(shí)候，表示水平方向的位移，垂直方向默認(rèn)居中

????? ????????????????????????????????????????????????????????????????????????????? ???????????????? 2.兩個(gè)值得時(shí)候，第一個(gè)表示水平位移 第二個(gè)表示垂直方向的位移

?

C 背景圖片是否平鋪：background-repeat：1 no-repeat 背景圖片不平鋪

??????????????????????????? ????????????????????????????????????????? ?2 repeat-x x軸平鋪

????????????????????????????????????????????????????????????????????? ?3 repeat-y y軸平鋪

?

D背景附著：background-attachment：1 scroll（默認(rèn)值。滾動(dòng)）2 fixed（背景固定）

?

E 背景透明：rgba（n,n,n,m）n的取值：0-255； m的取值：0-1 a：代表的是alhpa

?

F 背景簡(jiǎn)寫：background：url(“”) no-repeat position; 注意：背景簡(jiǎn)寫的時(shí)候，background-image一定要有，其他可選，而且與順序無關(guān)

?

2 盒子模型

?

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

?

B 盒子模型的組成：

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

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

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

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

四個(gè)值：分別表示上 右 下 左

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

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

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

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

四個(gè)值：分別表示上 右 下 左

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

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

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

???????????????????????????????????????????????????????????????????????????????????????????????????? 　　2 給父盒子加overflow：hidden? 觸發(fā)了bfc? 推薦使用

}

C 盒子模型的居中：margin: 0 auto;垂直方向加auto沒有作用

?

D 影響盒子模型大小的因素： 1 padding

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 2 border

計(jì)算盒子的大?。?盒子的真實(shí)寬度 = width + 左右padding + 左右border

盒子的真實(shí)高度 = height + 上下padding + 上下border

?

E 盒子陰影：box-shadow：h-shadow(水平陰影位置） v-shadow（垂直陰影位置） blur（模糊距離） spread（陰影大小） color（陰影顏色） outset（外陰影 默認(rèn)） inset（內(nèi)陰影）

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

?

?

3 浮動(dòng)

?

A 頁(yè)面布局的三大機(jī)制：1 普通流，標(biāo)準(zhǔn)流 ?2 浮動(dòng) ?3 定位

?

B 浮動(dòng)：

　　1 設(shè)置了浮動(dòng)屬性的元素會(huì)脫離標(biāo)準(zhǔn)流的控制

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

??????? 3 浮動(dòng)的特點(diǎn)：浮動(dòng)的特點(diǎn)：

?????????? 1.脫標(biāo)，不占原來的位置

?????????? 2.浮動(dòng)的元素以頂部對(duì)齊

?????????? 3.浮動(dòng)能改變?cè)氐娘@示方式（呈現(xiàn)出行內(nèi)塊元素的特點(diǎn)）

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

5.如果浮動(dòng)的元素前面是標(biāo)準(zhǔn)流，那么浮動(dòng)的元素跟在標(biāo)準(zhǔn)流的下面，如果浮動(dòng)的元素前面也是浮動(dòng)的元素。那么他們?cè)谝恍酗@示（寬度要足夠

?

C 清除浮動(dòng)：1 清除浮動(dòng)指的是清除浮動(dòng)帶來的影響

?????????? ???? 2 清除浮動(dòng)的方式：

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

????? ??????????????????????????? 2.使用額外標(biāo)簽法，在有浮動(dòng)后面添加一個(gè)沒有樣式的空盒子，然后給clear屬性（不建議）

????? ??????????????????????????? 3.使用偽元素清除浮動(dòng)（強(qiáng)烈推薦使用

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

?

偽元素清除浮動(dòng).clearfix::after{

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

????? ??????????????????????????? clear：both;? 清除浮動(dòng)

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

????? ??????????????????????????? visibility：hidden;? 為了隱藏content中的.

????? ??????????????????????????? height：0;? 為了消除content中的.撐出來的高度

????? ??????????????????????????? line-height: 0; 為了瀏覽器的兼容

????? ??????????????????????????? }

?

????? ?????????? .clearfix {

?????????? ????????????????????? *zoom: 1;為了兼容IE6-7

}

為了解決低版本瀏覽器兼容問題，最起碼都得加個(gè)點(diǎn)進(jìn)去

?

雙為元素清除浮動(dòng)：.clearfix::before,.clearfix::after {

??????????????????????????? ???????????????? content：";

????????????????????? ????? ?????????? ????? display: table

????????????????????? ???????????????? }

.clearfix::after {

????????????????????? ????? ????? clear:both

}

.clearfix {

?????????? ???????????????? ????? *zoom: 1;

???????????????? ???????????????? }

D 關(guān)于常見的三種布局方式： ?1 版心布局 版心：寬度占頁(yè)面的一半，在瀏覽器中居中顯示

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

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

?

?

4 定位

?

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

????? 偏移量：偏移量：元素在頁(yè)面移動(dòng)的水平距離和垂直距離

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

left:

right：

bottom：

top和left的級(jí)別比bottom和right高

?

B 定位模式：

?

1 靜態(tài)定位 html標(biāo)準(zhǔn)流中的元素的定位模式就是靜態(tài)定位

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

?

2 相對(duì)定位 相對(duì)定位：position：relative

??????????????????????????? ?特點(diǎn)：

1.元素不脫標(biāo)。在占標(biāo)準(zhǔn)流中的位置

2.相對(duì)定位不能改變?cè)氐娘@示方式

3.相對(duì)定位移動(dòng)的是參照元素本身在標(biāo)準(zhǔn)流中的位置

3 絕對(duì)定位‘ 絕對(duì)定位：position：absolute；

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

1.脫標(biāo)，不占標(biāo)準(zhǔn)流中的位置

2.改變?cè)氐娘@示方式

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

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

4 固定定位 position:fixed;

???????????????? 特點(diǎn)：

1.固定定位的元素脫標(biāo)，不占位置

2.能改變?cè)氐娘@示方式

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

?

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

?

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

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

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

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

?

position:relative(定位都行）