CSS定位和布局屬性課件_第1頁
CSS定位和布局屬性課件_第2頁
CSS定位和布局屬性課件_第3頁
CSS定位和布局屬性課件_第4頁
CSS定位和布局屬性課件_第5頁
已閱讀5頁，還剩125頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

CSS定位和布局屬性第13章CSS定位和布局屬性第13章113.1CSS定位屬性13.2CSS布局屬性13.3綜合案例——幼兒園頁面設(shè)計(jì)13.1CSS定位屬性13.2CSS布局屬性13.3綜合2CSS盒子布局和定位本章學(xué)習(xí)目標(biāo)：（1）理解網(wǎng)頁中BOX的正常流向。（2）會(huì)使用top、bottom、right和left屬性配合position屬性定義偏移量。（3）掌握CSS元素的定位方法，重點(diǎn)掌握static、relative和absolute定位，理解fixed和sticky定位。（4）盒子發(fā)生堆疊時(shí)，會(huì)使用z-index控制堆疊次序。（5）理解盒子內(nèi)容的裁切。（6）能控制盒子的可見性和溢出方式。（7）能夠使用display改變常見元素的顯示方式。（8）能夠使用float和clear控制浮動(dòng)定位。CSS盒子布局和定位本章學(xué)習(xí)目標(biāo)：313.1

CSS定位屬性CSS的定位方式可以幫助設(shè)計(jì)者使文檔更容易閱讀，CSS主要通過position屬性進(jìn)行定位。13.1CSS定位屬性CSS的定位方式413.1.1正常流向正常流向是預(yù)先設(shè)定的定位方式。默認(rèn)情況下網(wǎng)頁布局就是按文檔流的正常流向，即按HTML的結(jié)構(gòu)順序。由上而下、由左至右這樣的走向就是所謂的正常流向，瀏覽器也是依據(jù)這樣的走向來解譯我們的編碼。換個(gè)角度來說，在大部分的情況下，正常流向指的是網(wǎng)頁中元素標(biāo)記的方式。另外，多數(shù)的HTML元素都是屬于行內(nèi)元素或塊級(jí)元素。塊級(jí)元素里可以包含行內(nèi)元素和塊級(jí)元素，而行內(nèi)元素里不能包含有塊級(jí)元素。在正常流向中，塊級(jí)元素盒子會(huì)在其父對(duì)象盒子中自上而下排列，而行內(nèi)元素盒子則會(huì)按照由左至右的順序排列。13.1.1正常流向正常流向是預(yù)先設(shè)定的5【例13-1】正常流向（13-1.html）示例【例13-1】正常流向（13-1.html）示例6部分代碼如下：div{ width:200px; height:80px; margin:10px; padding:10px; border:2pxdashed#000; text-align:center;}#div1{ background:#ba9578; color:#FFF;}#div2{ background:#cef091; color:#000;}#div3{ background:#70c17f; color:#FFF;}部分代碼如下：div{713.1.2定位偏移屬性top、bottom、right、left基本語法：top:auto|長度|百分比;bottom:auto|長度|百分比;right:auto|長度|百分比;left:auto|長度|百分比;語法說明：auto：無特殊定位，根據(jù)HTML定位規(guī)則在文檔流中分配。長度：用長度值來定義偏移量，可以為負(fù)值。百分比：用百分比來定義偏移量，百分比參照包含塊的高度，可以為負(fù)值。13.1.2定位偏移屬性top、bottom、right813.1.3定位方式position基本語法：position:static|relative|absolute|fixed|center|page|sticky;

定位允許定義元素相對(duì)于其正常位置應(yīng)該出現(xiàn)的位置，或者相對(duì)于父元素、另一個(gè)元素甚至瀏覽器窗口的位置。CSS使用position屬性控制定位類型，并配合4個(gè)定位偏移屬性left、right、top和bottom控制偏移量。13.1.3定位方式position基本語法：posit9

靜態(tài)定位static，遵循正常文檔流，是所有元素默認(rèn)的定位方式，此時(shí)4個(gè)定位偏移屬性不會(huì)被應(yīng)用。一般不特別設(shè)定，除非要取消繼承其它元素的特別定位。

相對(duì)定位relative，遵循正常文檔流，基準(zhǔn)位置為其在正常文檔流中的位置，并通常需要top、bottom、right、left屬性配合完成，設(shè)定元素相對(duì)于原來位置的偏移量。設(shè)置為相對(duì)定位的元素會(huì)偏移某個(gè)距離，元素仍然保持其未偏移前的形狀，它原來所占的空間仍保留，元素移動(dòng)后可能會(huì)覆蓋其它元素。

相對(duì)定位一開始會(huì)按照“正常流向”來定位，所有的盒子會(huì)先定好位置。一旦一個(gè)盒子按照正常流向得到自己的位置，它還可以相對(duì)該位置而偏移，這就是相對(duì)定位。1.相對(duì)定位relative靜態(tài)定位static，遵循正常文檔流，是所有10【例13-2】使用相對(duì)定位（13-2.html）【例13-2】使用相對(duì)定位（13-2.html）11部分代碼如下：<styletype="text/css">div{ width:200px; height:80px; margin:10px; padding:10px; border:2pxdashed#000; text-align:center;}#div1{ position:static;/*靜態(tài)定位*/ background:#ba9578; color:#FFF;}#div2{ position:relative;/*相對(duì)定位*/ top:60px; left:30px; background:#cef091; color:#000;}#div3{ position:static;/*靜態(tài)定位*/ background:#70c17f; color:#FFF;}b{ border:1pxsolidred;}.b2{ position:relative;/*相對(duì)定位*/ left:80px; top:60px;}</style>部分代碼如下：<styletype="text/css">12<body><divid="div1"><p>div1</p></div><divid="div2"> <p>div2</p> <b>b元素1</b> <bclass="b2">b元素2</b> <b>b元素3</b></div><divid="div3"><p>div3</p></div> </body><body>13

絕對(duì)定位absolute，設(shè)置為絕對(duì)定位的元素從文檔流中刪除，元素原先在文檔流中所占的位置會(huì)取消，不再占用原有的空間。絕對(duì)定位“相對(duì)于”該元素最近的已經(jīng)定位的祖先元素，若不存在已定位的祖先元素，則一直回溯到body元素。絕對(duì)定位的盒子偏移位置不影響常規(guī)文檔流中的任何元素。

絕對(duì)定位的盒子不存在正常流向問題，也不會(huì)影響到正常流向中的其它BOX。2.絕對(duì)定位absolute絕對(duì)定位absolute，設(shè)置為絕對(duì)定位的元14【例13-3】使用絕對(duì)定位（13-3.html）【例13-3】使用絕對(duì)定位（13-3.html）15部分代碼如下：<styletype="text/css">div{ width:200px; height:80px; margin:10px; padding:10px; border:2pxdashed#000; text-align:center;}#div1{ position:absolute;/*絕對(duì)定位*/ top:100px; right:30px; background:#ba9578; color:#FFF;}#div2{ position:relative;/*相對(duì)定位*/ top:60px; left:30px; background:#cef091; color:#000;}#div3{ position:static;/*靜態(tài)定位*/ background:#70c17f; color:#FFF;}b{ border:1pxsolidred;}.b2{ position:absolute;/*絕對(duì)定位*/ left:-20px; top:120px;}</style>部分代碼如下：<styletype="text/css">16<body><divid="div1"><p>div1</p></div><divid="div2"> <p>div2</p> <b>b元素1</b> <bclass="b2">b元素2</b> <b>b元素3</b></div><divid="div3"><p>div3</p></div> </body><body>17

固定定位fixed，與absolute一致，偏移量定位一般以窗口為參考，當(dāng)出現(xiàn)滾動(dòng)條時(shí)，對(duì)象不會(huì)隨著滾動(dòng)。元素原有位置空間不保留，對(duì)象脫離常規(guī)流。

固定定位是絕對(duì)定位的一個(gè)子類，唯一的區(qū)別是對(duì)于連續(xù)介質(zhì)，固定BOX并不隨著文檔的滾動(dòng)而移動(dòng)，類似于固定的背景圖像。對(duì)于分頁介質(zhì)，固定定位BOX在每頁中重復(fù)，當(dāng)需要在每一放置同一個(gè)內(nèi)容時(shí)（例如在底部放置一個(gè)簽名），這個(gè)方法非常有用。3.固定定位fixed固定定位fixed，與absolute一致18【例13-4】使用固定定位（13-4.html）【例13-4】使用固定定位（13-4.html）19部分代碼如下：<styletype="text/css">body{ height:700px;}header{ position:fixed; width:100%; height:100px; top:0px; right:0px; bottom:auto; left:0px; border:1pxdashedblack; color:#FFF; background-color:#5f6062; text-align:center; line-height:3; }aside{ position:fixed; width:200px; height:auto; top:100px; right:auto; bottom:100px; left:0px; border:1pxdashedblack; background-color:#f6edc6; text-align:center; line-height:3; }部分代碼如下：<styletype="text/css">20section{ position:fixed; width:auto; height:auto; top:100px; right:0px; bottom:100px; left:200px; border:1pxdashedblack; background-color:#fde8ed; text-align:center; line-height:3; }footer{ position:fixed; width:100%; height:100px; top:auto; right:0; bottom:0; left:0px; border:1pxdashedblack; background-color:#f0ede4; text-align:center; line-height:3; }</style>section{footer{21sticky是CSS3新增關(guān)鍵字，對(duì)象在常態(tài)時(shí)遵循常規(guī)流，也就是當(dāng)對(duì)象在屏幕中正常顯示時(shí)按常規(guī)流排版，當(dāng)卷動(dòng)到屏幕外時(shí)則表現(xiàn)如fixed。該屬性的表現(xiàn)就是現(xiàn)實(shí)中我們見到的吸附效果。sticky定位屏幕中正常顯示時(shí)遵循文檔流，而當(dāng)隨著滾動(dòng)條移動(dòng)可能卷到屏幕外邊時(shí)，則會(huì)表現(xiàn)出fixed的吸附效果。4.吸附定位stickysticky是CSS3新增關(guān)鍵字，對(duì)象在常態(tài)時(shí)22【例13-5】使用吸附定位（13-5.html）【例13-5】使用吸附定位（13-5.html）23部分代碼如下：<head><styletype="text/css">div{ width:200px; height:80px; margin:10px; padding:10px; border:2pxdashed#000; text-align:center;}#div1{ position:static;/*靜態(tài)定位*/ background:#ba9578; color:#FFF;}#div2{ position:sticky;/*吸附定位*/ top:140px; left:100px; background:#cef091; color:#000;}#div3{ position:static;/*靜態(tài)定位*/ background:#70c17f; color:#FFF;}</style></head><body><divid="div1"><p>div1</p></div><divid="div2"><p>div2</p></div><divid="div3"><p>div3</p></div> </body>部分代碼如下：<head> top:140px;2413.1.4分層呈現(xiàn)z-index基本語法：z-index:auto|數(shù)字;語法說明：auto：元素在當(dāng)前層疊上下文中的層疊級(jí)別是0。元素不會(huì)創(chuàng)建新的局部層疊上下文，除非它是根元素。數(shù)字：用整數(shù)值來定義堆疊級(jí)別。z-index的值越小，表明該BOX層級(jí)越低，堆疊發(fā)生時(shí)處于下層，反之則處于上層。如果兩個(gè)元素的z-index一樣，則按照出現(xiàn)的先后順序來決定，出現(xiàn)較晚的元素堆疊在上層。13.1.4分層呈現(xiàn)z-index基本語法：z-inde25【例13-6】設(shè)置堆疊次序（13-6.html）【例13-6】設(shè)置堆疊次序（13-6.html）26部分代碼如下：<styletype="text/css">div{ position:staic; width:200px; height:80px; margin:10px; padding:10px; border:2pxdashed#000; text-align:center;}#div1{ position:absolute;/*絕對(duì)定位*/ z-index:2;/*堆疊次序*/ top:0px; left:0px; background:#ba9578; color:#FFF;}#div2{ position:absolute;/*絕對(duì)定位*/ z-index:6;/*堆疊次序*/ top:70px; left:50px; background:#cef091; color:#000;}#div3{ position:absolute;/*絕對(duì)定位*/ z-index:4;/*堆疊次序*/ top:140px; left:100px; background:#70c17f; color:#FFF;}</style>部分代碼如下：<styletype="text/css">2713.1.5裁切clip基本語法：clip：auto|<shape><shape>：rect(<number>|auto<number>|auto<number>|auto<number>|auto)語法說明：auto：默認(rèn)，不裁剪。rect(<number>|auto<number>|auto<number>|auto<number>|auto)：依據(jù)上-右-下-左的順序提供以對(duì)象左上角為(0,0)坐標(biāo)計(jì)算的四個(gè)偏移數(shù)值，其中任一數(shù)值都可用auto替換，即此邊不剪切。“上-左”方位的裁剪：從0開始剪裁直到設(shè)定值，即“上-左”方位的auto值等同于0；“右-下”方位的裁切：從設(shè)定值開始裁切直到最右邊和最下邊，即“右-下”方位的auto值為盒子的實(shí)際寬度和高度。13.1.5裁切clip基本語法：clip：auto|28【例13-7】使用裁切（13-7.html）【例13-7】使用裁切（13-7.html）29部分代碼如下：<head><style>div{ position:absolute;/*絕對(duì)定位*/ width:180px; height:60px; font-size:24px; line-height:2; background:#cef091; border:2pxdashed#000; text-align:center;}#div1{ left:20px; top:20px;}#div2{ left:220px; top:20px; clip:rect(0pxauto50px40px);/*裁切*/}</style></head><body><divid="div1">未被裁剪的效果</div><divid="div2">被裁切后的效果</div></body>部分代碼如下：<head> top:20px;3013.2

CSS布局屬性

CSS布局（Layout）屬性控制已應(yīng)用CSS樣式規(guī)則的HTML元素與頁面上的其它元素進(jìn)行交互。例如，隱藏元素、設(shè)置元素的浮動(dòng)效果、設(shè)置溢出屬性確定滾動(dòng)條能否出現(xiàn)等。13.2CSS布局屬性CSS布局（Layout3113.2.1可見性visibility基本語法：visibility:visible|hidden|collapse;語法說明：visible：元素可見。hidden：元素隱藏，但元素保留其占據(jù)的原有空間，影響頁面的布局。collapse：主要用來隱藏表格的行或列。隱藏的行或列能夠被其它內(nèi)容使用。對(duì)于表格外的其它對(duì)象，其作用等同于hidden。13.2.1可見性visibility基本語法：visi32【例13-8】設(shè)置可見性（13-8.html）【例13-8】設(shè)置可見性（13-8.html）33<head><title>可見性</title><styletype="text/css">div{ width:200px; height:80px; margin:10px; padding:10px; border:2pxdashed#000; text-align:center;}#div1{ visibility:visible;/*可見*/ background:#ba9578;部分代碼如下： color:#FFF;}#div2{ visibility:hidden;/*隱藏*/ background:#cef091; color:#000;}#div3{ background:#70c17f;}.vc{ visibility:collapse;/*隱藏表格行列*/}</style></head><head>部分代碼如下： color:#FFF;34<body><divid="div1"><p>顯示</p></div><divid="div2"><p>隱藏</p></div><divid="div3"><tableborder="1"><tr> <td>單元格1</td> <td>單元格2</td> <td>單元格3</td></tr><trclass="vc">部分代碼如下： <td>單元格4</td> <td>單元格5</td> <td>單元格6</td></tr><tr> <tdclass="vc">單元格7</td> <td>單元格8</td> <td>單元格9</td></tr></table></div> </body><body>部分代碼如下： <td3513.2.2溢出overflow基本語法：overflow：visible|hidden|scroll|auto|paged-x|paged-y|paged-x-controls|paged-y-controls|fragments;overflow-x：visible|hidden|scroll|auto|paged-x|paged-y|paged-x-controls|paged-y-controls|fragments;overflow-y：visible|hidden|scroll|auto|paged-x|paged-y|paged-x-controls|paged-y-controls|fragments;13.2.2溢出overflow基本語法：overflo36語法說明：visible：對(duì)溢出內(nèi)容不做處理，內(nèi)容可能會(huì)超出容器。

hidden：隱藏溢出容器的內(nèi)容且不出現(xiàn)滾動(dòng)條。

scroll：無論是否溢出都出現(xiàn)滾動(dòng)條。

auto：當(dāng)內(nèi)容沒有溢出容器時(shí)不出現(xiàn)滾動(dòng)條，當(dāng)內(nèi)容溢出容器時(shí)出現(xiàn)滾動(dòng)條，按需出現(xiàn)滾動(dòng)條。此為body元素和textarea的默認(rèn)值。

x、y、x-controls、y-controls和fragments屬性值都是CSS3新增，目前主流瀏覽器均不支持，不做詳述。語法說明：visible：對(duì)溢出內(nèi)容不做處理，內(nèi)容可能會(huì)超出37【例13-9】設(shè)置CSS溢出效果（13-9.html）【例13-9】設(shè)置CSS溢出效果（13-9.html）38部分代碼如下：<styletype="text/css">div{ width:200px; height:100px; margin:30px5px; padding:5px; border:1pxsolid#000; text-align:center; float:left; background:#daf6f7;}#div1{ overflow:visible;/*溢出內(nèi)容可見，不做處理*/}#div2{ overflow:hidden;/*隱藏溢出容器的內(nèi)容且不出現(xiàn)滾動(dòng)條*/}#div3{ overflow:scroll;/*無論溢出與否都有滾動(dòng)條*/}#div4{ overflow:auto;/*按需出現(xiàn)滾動(dòng)條*/}</style>部分代碼如下：<styletype="text/css">3913.2.3顯示display基本語法：display：none|inline|block|list-item|inline-block|table|inline-table|table-caption|table-cell|table-row|table-row-group|table-column|table-column-group|table-footer-group|table-header-group|run-in|box|inline-box|flexbox|inline-flexbox|flex|inline-flex;13.2.3顯示display基本語法：display：40語法說明：none：隱藏對(duì)象。與visibility屬性的hidden值不同，其不為被隱藏的對(duì)象保留其物理空間。inline：指定對(duì)象為內(nèi)聯(lián)元素。block：指定對(duì)象為塊級(jí)元素。list-item：指定對(duì)象為列表項(xiàng)目。inline-block：指定對(duì)象為內(nèi)聯(lián)塊元素。table：指定對(duì)象作為塊元素級(jí)的表格。類同于html標(biāo)記<table>。inline-table：指定對(duì)象作為內(nèi)聯(lián)元素級(jí)的表格。類同于html標(biāo)記<table>。table-caption：指定對(duì)象作為表格標(biāo)題。類同于html標(biāo)記<caption>。table-cell：指定對(duì)象作為表格單元格。類同于html標(biāo)記<td>。table-row：指定對(duì)象作為表格行。類同于html標(biāo)記<tr>。table-row-group：指定對(duì)象作為表格行組。類同于html標(biāo)記<tbody>。table-column：指定對(duì)象作為表格列。類同于html標(biāo)記<col>。table-column-group：指定對(duì)象作為表格列組顯示。類同于html標(biāo)記<colgroup>。table-header-group：指定對(duì)象作為表格標(biāo)題組。類同于html標(biāo)記<thead>。table-footer-group：指定對(duì)象作為表格腳注組。類同于html標(biāo)記<tfoot>。run-in：CSS3新增關(guān)鍵字，根據(jù)上下文決定對(duì)象是內(nèi)聯(lián)對(duì)象還是塊級(jí)對(duì)象。box：CSS3新增關(guān)鍵字，將對(duì)象作為彈性伸縮盒顯示（伸縮盒最老版本）inline-box：CSS3新增關(guān)鍵字，將對(duì)象作為內(nèi)聯(lián)塊級(jí)彈性伸縮盒顯示（伸縮盒最老版本）。flexbox：CSS3新增關(guān)鍵字，將對(duì)象作為彈性伸縮盒顯示（伸縮盒過渡版本）。inline-flexbox：CSS3新增關(guān)鍵字，將對(duì)象作為內(nèi)聯(lián)塊級(jí)彈性伸縮盒顯示（伸縮盒過渡版本）。flex：CSS3新增關(guān)鍵字，將對(duì)象作為彈性伸縮盒顯示（伸縮盒最新版本）。inline-flex：CSS3新增關(guān)鍵字，將對(duì)象作為內(nèi)聯(lián)塊級(jí)彈性伸縮盒顯示（伸縮盒最新版本）。語法說明：none：隱藏對(duì)象。與visibility屬性的h41【例13-10】使用display構(gòu)造表格（13-10.html）【例13-10】使用display構(gòu)造表格（13-10.ht42部分代碼如下：<head><styletype="text/css">body{ font-size:13px; line-height:1.5; text-align:center;}.table{ display:table;/*顯示為表格*/ margin:0auto; border-collapse:collapse; border:1pxsolid#ccc;}.table-caption{ display:table-caption;/*顯示為表格標(biāo)題*/ font-size:16px; text-align:center;}部分代碼如下：<head>43.table-header-group{/*顯示為表格標(biāo)題行*/ display:table-header-group; background:#eee; font-weight:bold;}.table-row-group{/*顯示為表格行組*/ display:table-row-group;}.table-row{ display:table-row;/*顯示為表格行*/}/*表格行組中的表格行鼠標(biāo)經(jīng)過時(shí)背景色為淡黃色#ffffcc*/.table-row-group.table-row:hover{ background:#ffffcc;}.table-cell{ display:table-cell;/*顯示為表格單元格*/ padding:05px; border:1pxsolid#ccc; width:100px;}</style></head>.table-header-group{/*顯44<body><divclass="table"> <h2class="table-caption">學(xué)生信息表</h2> <divclass="table-header-group"> <ulclass="table-row"> <liclass="table-cell">學(xué)號(hào)</li> <liclass="table-cell">姓名</li> <liclass="table-cell">年齡</li> </ul> </div> <divclass="table-row-group"> <ulclass="table-row"> <liclass="table-cell">201677001</li> <liclass="table-cell">袁天一</li> <liclass="table-cell">19</li> </ul> <ulclass="table-row"> <liclass="table-cell">201677002</li> <liclass="table-cell">馬麗娜</li> <liclass="table-cell">18</li> </ul> <ulclass="table-row"> <liclass="table-cell">201677003</li> <liclass="table-cell">侯雨欣</li> <liclass="table-cell">20</li> </ul> </div></div></body><body>4513.2.4浮動(dòng)float基本語法：float:none|left|right語法說明：none：設(shè)置元素不浮動(dòng)；left：設(shè)置元素浮在左邊；right：設(shè)置元素浮在右邊。13.2.4浮動(dòng)float基本語法：float:no46【例13-11】使用浮動(dòng)效果（13-11.html）【例13-11】使用浮動(dòng)效果（13-11.html）47部分代碼如下：<head><title>浮動(dòng)</title><styletype="text/css">section{ width:500px; height:120px; border:1pxsolid#000; margin:10px; background:#f3de83;}h1,h2,h3{ background:#daf6f7; margin:10px; padding:5px; border:1pxsolid#000; font-size:14px; text-align:center; height:auto;}h1{ width:60px;}h2{ width:100px;}h3{ width:150px;}.float_none{ float:none;/*不浮動(dòng)*/}.float_left{ float:left;/*浮動(dòng)在左*/}.float_right{ float:right;/*浮動(dòng)在右*/}</style>部分代碼如下：<head>h1{48<body><!--第一組的3個(gè)盒子浮動(dòng)方式：不浮動(dòng)--><section><h1class="float_none">H1</h1><h2class="float_none">H2</h2><h3class="float_none">H3</h3></section><!--第二組的3個(gè)盒子浮動(dòng)方式：前兩個(gè)浮動(dòng)在左，第3個(gè)浮動(dòng)在右--><section><h1class="float_left">H1</h1><h2class="float_left">H2</h2><h3class="float_right">H3</h3></section><!--第三組的3個(gè)盒子浮動(dòng)方式：浮動(dòng)在右--><section><h1class="float_right">H1</h1><h2class="float_right">H2</h2><h3class="float_right">H3</h3></section></body><body>4913.2.5清除clear基本語法：clear:none|left|right|both;語法說明：none：允許兩邊都可以有浮動(dòng)元素。both：不允許有浮動(dòng)元素。left：不允許左邊有浮動(dòng)元素。

right：不允許右邊有浮動(dòng)元素。13.2.5清除clear基本語法：clear:non50【例13-12】使用清除浮動(dòng)（13-12.html）【例13-12】使用清除浮動(dòng)（13-12.html）51部分代碼如下：<head><styletype="text/css">section{ width:500px; height:120px; border:1pxsolid#000; margin:10px; background:#f3de83;}h1,h2,h3{ background:#daf6f7; margin:10px; padding:5px; border:1pxsolid#000; font-size:14px; text-align:center; height:auto;}h1{ width:60px;}h2{ width:100px;}h3{ width:150px;}h4{ width:200px; padding:10px; background:#f9aa9d; border:2pxdashed#000; font-size:14px; text-align:center; }p{ font:13px/1.5宋體;}.float_none{ float:none;/*不浮動(dòng)*/}.float_left{ float:left;/*浮動(dòng)在左*/}.float_right{ float:right;/*浮動(dòng)在右*/}.clear_both{/*清除兩側(cè)浮動(dòng)*/ clear:both;}</style></head>部分代碼如下：<head>h1{p{52<body><!--第一組的4個(gè)盒子浮動(dòng)方式：前兩個(gè)浮動(dòng)在左，第3個(gè)浮動(dòng)在右，第4個(gè)不浮動(dòng)--><section><h1class="float_left">H1左浮動(dòng)</h1><h2class="float_left">H2左浮動(dòng)</h2><h3class="float_right">H3右浮動(dòng)</h3><h4class="float_none">H4不浮動(dòng)</h4></section><!--第二組的3個(gè)盒子浮動(dòng)方式：前兩個(gè)浮動(dòng)在左，第3個(gè)浮動(dòng)在右，段落不浮動(dòng)--><section><h1class="float_left">H1左浮動(dòng)</h1><h2class="float_left">H2左浮動(dòng)</h2><h3class="float_right">H3右浮動(dòng)</h3><p>段落文字，不浮動(dòng)，不清除浮動(dòng)時(shí)效果。段落文字，不浮動(dòng)，不清除浮動(dòng)時(shí)效果。段落文字，不浮動(dòng)，不清除浮動(dòng)時(shí)效果。段落文字，不浮動(dòng)，不清除浮動(dòng)時(shí)效果。</p></section><body>53<!--第三組的4個(gè)盒子浮動(dòng)方式：前兩個(gè)浮動(dòng)在左，第3個(gè)浮動(dòng)在右，第4個(gè)不浮動(dòng)且不允許兩側(cè)浮動(dòng)--><section><h1class="float_left">H1左浮動(dòng)</h1><h2class="float_left">H2左浮動(dòng)</h2><h3class="float_right">H3右浮動(dòng)</h3><h4class="float_noneclear_both">H4不浮動(dòng)，清除兩側(cè)浮動(dòng)</h4></section><!--第四組的3個(gè)盒子浮動(dòng)方式：前兩個(gè)浮動(dòng)在左，第3個(gè)浮動(dòng)在右，段落清除浮動(dòng)--><section><h1class="float_left">H1左浮動(dòng)</h1><h2class="float_left">H2左浮動(dòng)</h2><h3class="float_right">H3右浮動(dòng)</h3><pclass="clear_both">段落文字，不浮動(dòng)，除浮左右兩側(cè)動(dòng)時(shí)效果。段落文字，不浮動(dòng)，除浮左右兩側(cè)動(dòng)時(shí)效果。段落文字，不浮動(dòng)，除浮左右兩側(cè)動(dòng)時(shí)效果。段落文字，不浮動(dòng)，除浮左右兩側(cè)動(dòng)時(shí)效果。</p></section></body><!--第三組的4個(gè)盒子浮動(dòng)方式：前兩個(gè)浮動(dòng)在左，第3個(gè)浮動(dòng)5413.3綜合實(shí)例——幼兒園頁面設(shè)計(jì)13.3綜合實(shí)例——幼兒園頁面設(shè)計(jì)55【例13-13】CSS布局定位綜合案例（13-13.html&css13-13.css）【例13-13】CSS布局定位綜合案例（13-13.html56<head><linkhref="css13-13.css"rel="stylesheet"type="text/css"/></head><body><divid="container"> <!--導(dǎo)航部分開始--><divid="navi"> <span>園內(nèi)介紹</span><span>家園互動(dòng)</span><span>寶貝風(fēng)采</span><span>特色課程</span><span>教師天地</span><span>信息中心</span><span>健康快車</span><form><inputclass="sinput"type="text"/><inputclass="sbtn"type="button"value="查找"/></form></div><!--導(dǎo)航部分結(jié)束-->部分HTML代碼如下：<head>部分HTML代碼如下：57<!--主體部分第一欄開始--><divid="main1"> <divid="main1_left"> <p>中秋節(jié)放假按國家規(guī)定為期三天，分別為9月15、16和17日，即周四、周五和周六，周日照常上課。預(yù)祝您節(jié)日愉快！</p> </div> <divid="main1_right"> <imgsrc="images/banner.jpg"/> </div></div><!--主體部分第一欄結(jié)束--><!--主體部分第一欄開始-->58 <!--主體部分第二欄開始--><divid="main2"> <divid="main2_left"> <ul> <li>園長信箱</li> <li>資源共享</li><li>互助論壇</li><li>黨員之家</li></ul></div> <divid="main2_right"> <p><imgsrc="images/btn1.png"/></p> <p>家長您好！……………. </p></div> </div> <!--主體部分第二欄結(jié)束--> <!--主體部分第二欄開始-->59<!--主體部分第三欄開始--><divid="main3"><p><imgsrc="images/btn2.png"/></p><ul> <li><ahref="">今天：10金秋十月，愛心傳遞——幼兒十月精彩圖集大放送，萌娃的幼兒園生活，爸爸媽媽看過來（圖）。</a></li> <li><ahref="">9月20日：快樂中秋，幸福童年——幼兒園大型月餅DIY活動(dòng)紀(jì)實(shí)，看小廚師如何嗨翻天（圖）。</a></li> <li><ahref="">9月14日：為留守兒童獻(xiàn)愛心——9月12日，幼兒園小朋友為留守兒童送出玩具和圖書（圖）。</a></li> <li><ahref="">8月16日：幼兒歌詠會(huì)——“我是小歌手”大型親子演唱會(huì)8月6日隆重開唱（圖）。</a></li> <li><ahref="">5月15日：快樂六一，歡樂童年——大一班小朋友積極排練木偶劇匹諾曹（圖）。</a></li></ul></div><!--主體部分第三欄結(jié)束--><!--主體部分第三欄開始-->60<!--頁腳部分開始--> <divid="foot"><small>版權(quán)所有©清華大學(xué)出版社本書編委</small></div> <!--頁腳部分結(jié)束--></div></body><!--頁腳部分開始-->61/*全局樣式*/body{ text-align:center; margin:0px;}p{ margin:10px; font:13px/1.8宋體; text-indent:2em; text-align:left}/*外部父div樣式開始*/#container{ width:880px; margin:0auto;}/*外部父div樣式結(jié)束*/CSS代碼如下：/*導(dǎo)航區(qū)域樣式開始*/#navi{ clear:both; /*不允許兩側(cè)有浮動(dòng)*/ background:#00a8ce; margin:5px15px; height:36px; border:3px#fffsolid; border-radius:10px; box-shadow:002px2px#CCCCCC;}#navispan{/*導(dǎo)航條中span元素樣式*/ display:block;/*顯示為塊級(jí)元素*/ float:left;/*浮動(dòng)在左*/ width:80px; padding:5px; margin:10px0px; font:14px黑體; color:#FFF;}/*全局樣式*/CSS代碼如下：/*導(dǎo)航區(qū)域樣式開始*/62#naviform{/*導(dǎo)航區(qū)表單樣式*/ float:right;/*浮動(dòng)在右*/ margin:3px;}.sinput{/*導(dǎo)航區(qū)表單文本框樣式*/ width:100px; height:21px; padding:4px7px; color:#737272; background:#95e3f3; border:1pxsolid#787575; border-radius:3px003px;}.sbtn{/*導(dǎo)航區(qū)表單搜索按鈕樣式*/ width:60px; height:31px; margin-left:-10px; padding:012px; border-radius:0px3px3px0px; border:1pxsolid#787575; background-color:#4c4b4b; font-size:13px; color:#f3f7fc;}/*導(dǎo)航區(qū)域樣式結(jié)束*/#naviform{/*導(dǎo)航區(qū)表單樣63/*主體部分橫向第一欄樣式開始*/#main1{ clear:both; /*不允許兩側(cè)有浮動(dòng)*/ margin:2px; height:340px;}#main1_left{ float:left; width:220px; height:340px; background:url(images/board.gif)no-repeatcentertop;}#main1_right{ float:right; width:656px;}#main1_leftp{ margin:60px50px;}/*內(nèi)容部分橫向第一欄樣式結(jié)束*//*主體部分橫向第一欄樣式開始*/64/*內(nèi)容部分橫向第二欄樣式開始*/#main2{ clear:both; margin:2px; height:196px;}#main2_left{/*內(nèi)容部分橫向第二欄左側(cè)樣式*/ width:220px; float:left;/*浮動(dòng)在左*/}#main2_right{/*內(nèi)容部分橫向第二欄右側(cè)樣式*/ float:right;/*浮動(dòng)在右*/ width:654px; border:1px#a4db18solid; border-radius:5px;}#main2_leftul{/*內(nèi)容部分橫向第二欄左側(cè)列表樣式*/ margin:0; padding:0;}#main2_leftulli{/*內(nèi)容部分橫向第二欄左側(cè)列表項(xiàng)樣式*/ list-style:none; font:13px/1.8宋體; margin:5pxauto; padding:3px; border:1px#ebf811solid; background:#a4db18; width:85%; border-radius:4px;}#main2_leftulli:hover{/*鼠標(biāo)經(jīng)過內(nèi)容部分橫向第二欄左側(cè)列表項(xiàng)樣式*/ background:#ebf811;}/*內(nèi)容部分橫向第二欄樣式結(jié)束*//*內(nèi)容部分橫向第二欄樣式開始*/#main2_leftu65CSS定位和布局屬性第13章CSS定位和布局屬性第13章6613.1CSS定位屬性13.2CSS布局屬性13.3綜合案例——幼兒園頁面設(shè)計(jì)13.1CSS定位屬性13.2CSS布局屬性13.3綜合67CSS盒子布局和定位本章學(xué)習(xí)目標(biāo)：（1）理解網(wǎng)頁中BOX的正常流向。（2）會(huì)使用top、bottom、right和left屬性配合position屬性定義偏移量。（3）掌握CSS元素的定位方法，重點(diǎn)掌握static、relative和absolute定位，理解fixed和sticky定位。（4）盒子發(fā)生堆疊時(shí)，會(huì)使用z-index控制堆疊次序。（5）理解盒子內(nèi)容的裁切。（6）能控制盒子的可見性和溢出方式。（7）能夠使用display改變常見元素的顯示方式。（8）能夠使用float和clear控制浮動(dòng)定位。CSS盒子布局和定位本章學(xué)習(xí)目標(biāo)：6813.1

CSS定位屬性CSS的定位方式可以幫助設(shè)計(jì)者使文檔更容易閱讀，CSS主要通過position屬性進(jìn)行定位。13.1CSS定位屬性CSS的定位方式6913.1.1正常流向正常流向是預(yù)先設(shè)定的定位方式。默認(rèn)情況下網(wǎng)頁布局就是按文檔流的正常流向，即按HTML的結(jié)構(gòu)順序。由上而下、由左至右這樣的走向就是所謂的正常流向，瀏覽器也是依據(jù)這樣的走向來解譯我們的編碼。換個(gè)角度來說，在大部分的情況下，正常流向指的是網(wǎng)頁中元素標(biāo)記的方式。另外，多數(shù)的HTML元素都是屬于行內(nèi)元素或塊級(jí)元素。塊級(jí)元素里可以包含行內(nèi)元素和塊級(jí)元素，而行內(nèi)元素里不能包含有塊級(jí)元素。在正常流向中，塊級(jí)元素盒子會(huì)在其父對(duì)象盒子中自上而下排列，而行內(nèi)元素盒子則會(huì)按照由左至右的順序排列。13.1.1正常流向正常流向是預(yù)先設(shè)定的70【例13-1】正常流向（13-1.html）示例【例13-1】正常流向（13-1.html）示例71部分代碼如下：div{ width:200px; height:80px; margin:10px; padding:10px; border:2pxdashed#000; text-align:center;}#div1{ background:#ba9578; color:#FFF;}#div2{ background:#cef091; color:#000;}#div3{ background:#70c17f; color:#FFF;}部分代碼如下：div{7213.1.2定位偏移屬性top、bottom、right、left基本語法：top:auto|長度|百分比;bottom:auto|長度|百分比;right:auto|長度|百分比;left:auto|長度|百分比;語法說明：auto：無特殊定位，根據(jù)HTML定位規(guī)則在文檔流中分配。長度：用長度值來定義偏移量，可以為負(fù)值。百分比：用百分比來定義偏移量，百分比參照包含塊的高度，可以為負(fù)值。13.1.2定位偏移屬性top、bottom、right7313.1.3定位方式position基本語法：position:static|relative|absolute|fixed|center|page|sticky;

定位允許定義元素相對(duì)于其正常位置應(yīng)該出現(xiàn)的位置，或者相對(duì)于父元素、另一個(gè)元素甚至瀏覽器窗口的位置。CSS使用position屬性控制定位類型，并配合4個(gè)定位偏移屬性left、right、top和bottom控制偏移量。13.1.3定位方式position基本語法：posit74

靜態(tài)定位static，遵循正常文檔流，是所有元素默認(rèn)的定位方式，此時(shí)4個(gè)定位偏移屬性不會(huì)被應(yīng)用。一般不特別設(shè)定，除非要取消繼承其它元素的特別定位。

相對(duì)定位relative，遵循正常文檔流，基準(zhǔn)位置為其在正常文檔流中的位置，并通常需要top、bottom、right、left屬性配合完成，設(shè)定元素相對(duì)于原來位置的偏移量。設(shè)置為相對(duì)定位的元素會(huì)偏移某個(gè)距離，元素仍然保持其未偏移前的形狀，它原來所占的空間仍保留，元素移動(dòng)后可能會(huì)覆蓋其它元素。

相對(duì)定位一開始會(huì)按照“正常流向”來定位，所有的盒子會(huì)先定好位置。一旦一個(gè)盒子按照正常流向得到自己的位置，它還可以相對(duì)該位置而偏移，這就是相對(duì)定位。1.相對(duì)定位relative靜態(tài)定位static，遵循正常文檔流，是所有75【例13-2】使用相對(duì)定位（13-2.html）【例13-2】使用相對(duì)定位（13-2.html）76部分代碼如下：<styletype="text/css">div{ width:200px; height:80px; margin:10px; padding:10px; border:2pxdashed#000; text-align:center;}#div1{ position:static;/*靜態(tài)定位*/ background:#ba9578; color:#FFF;}#div2{ position:relative;/*相對(duì)定位*/ top:60px; left:30px; background:#cef091; color:#000;}#div3{ position:static;/*靜態(tài)定位*/ background:#70c17f; color:#FFF;}b{ border:1pxsolidred;}.b2{ position:relative;/*相對(duì)定位*/ left:80px; top:60px;}</style>部分代碼如下：<styletype="text/css">77<body><divid="div1"><p>div1</p></div><divid="div2"> <p>div2</p> <b>b元素1</b> <bclass="b2">b元素2</b> <b>b元素3</b></div><divid="div3"><p>div3</p></div> </body><body>78

絕對(duì)定位absolute，設(shè)置為絕對(duì)定位的元素從文檔流中刪除，元素原先在文檔流中所占的位置會(huì)取消，不再占用原有的空間。絕對(duì)定位“相對(duì)于”該元素最近的已經(jīng)定位的祖先元素，若不存在已定位的祖先元素，則一直回溯到body元素。絕對(duì)定位的盒子偏移位置不影響常規(guī)文檔流中的任何元素。

絕對(duì)定位的盒子不存在正常流向問題，也不會(huì)影響到正常流向中的其它BOX。2.絕對(duì)定位absolute絕對(duì)定位absolute，設(shè)置為絕對(duì)定位的元79【例13-3】使用絕對(duì)定位（13-3.html）【例13-3】使用絕對(duì)定位（13-3.html）80部分代碼如下：<styletype="text/css">div{ width:200px; height:80px; margin:10px; padding:10px; border:2pxdashed#000; text-align:center;}#div1{ position:absolute;/*絕對(duì)定位*/ top:100px; right:30px; background:#ba9578; color:#FFF;}#div2{ position:relative;/*相對(duì)定位*/ top:60px; left:30px; background:#cef091; color:#000;}#div3{ position:static;/*靜態(tài)定位*/ background:#70c17f; color:#FFF;}b{ border:1pxsolidred;}.b2{ position:absolute;/*絕對(duì)定位*/ left:-20px; top:120px;}</style>部分代碼如下：<styletype="text/css">81<body><divid="div1"><p>div1</p></div><divid="div2"> <p>div2</p> <b>b元素1</b> <bclass="b2">b元素2</b> <b>b元素3</b></div><divid="div3"><p>div3</p></div> </body><body>82

固定定位fixed，與absolute一致，偏移量定位一般以窗口為參考，當(dāng)出現(xiàn)滾動(dòng)條時(shí)，對(duì)象不會(huì)隨著滾動(dòng)。元素原有位置空間不保留，對(duì)象脫離常規(guī)流。

固定定位是絕對(duì)定位的一個(gè)子類，唯一的區(qū)別是對(duì)于連續(xù)介質(zhì)，固定BOX并不隨著文檔的滾動(dòng)而移動(dòng)，類似于固定的背景圖像。對(duì)于分頁介質(zhì)，固定定位BOX在每頁中重復(fù)，當(dāng)需要在每一放置同一個(gè)內(nèi)容時(shí)（例如在底部放置一個(gè)簽名），這個(gè)方法非常有用。3.固定定位fixed固定定位fixed，與absolute一致83【例13-4】使用固定定位（13-4.html）【例13-4】使用固定定位（13-4.html）84部分代碼如下：<styletype="text/css">body{ height:700px;}header{ position:fixed; width:100%; height:100px; top:0px; right:0px; bottom:auto; left:0px; border:1pxdashedblack; color:#FFF; background-color:#5f6062; text-align:center; line-height:3; }aside{ position:fixed; width:200px; height:auto; top:100px; right:auto; bottom:100px; left:0px; border:1pxdashedblack; background-color:#f6edc6; text-align:center; line-height:3; }部分代碼如下：<styletype="text/css">85section{ position:fixed; width:auto; height:auto; top:100px; right:0px; bottom:100px; left:200px; border:1pxdashedblack; background-color:#fde8ed; text-align:center; line-height:3; }footer{ position:fixed; width:100%; height:100px; top:auto; right:0; bottom:0; left:0px; border:1pxdashedblack; background-color:#f0ede4; text-align:center; line-height:3; }</style>section{footer{86sticky是CSS3新增關(guān)鍵字，對(duì)象在常態(tài)時(shí)遵循常規(guī)流，也就是當(dāng)對(duì)象在屏幕中正常顯示時(shí)按常規(guī)流排版，當(dāng)卷動(dòng)到屏幕外時(shí)則表現(xiàn)如fixed。該屬性的表現(xiàn)就是現(xiàn)實(shí)中我們見到的吸附效果。sticky定位屏幕中正常顯示時(shí)遵循文檔流，而當(dāng)隨著滾動(dòng)條移動(dòng)可能卷到屏幕外邊時(shí)，則會(huì)表現(xiàn)出fixed的吸附效果。4.吸附定位stickysticky是CSS3新增關(guān)鍵字，對(duì)象在常態(tài)時(shí)87【例13-5】使用吸附定位（13-5.html）【例13-5】使用吸附定位（13-5.html）88部分代碼如下：<head><styletype="text/css">div{ width:200px; height:80px; margin:10px; padding:10px; border:2pxdashed#000; text-align:center;}#div1{ position:static;/*靜態(tài)定位*/ background:#ba9578; color:#FFF;}#div2{ position:sticky;/*吸附定位*/ top:140px; left:100px; background:#cef091; color:#000;}#div3{ position:static;/*靜態(tài)定位*/ background:#70c17f; color:#FFF;}</style></head><body><divid="div1"><p>div1</p></div><d

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論