Web前端技術(shù)HTML5+CSS3+響應(yīng)式設(shè)計 課件 6-浮動與定位

HTML+CSS網(wǎng)頁設(shè)計與制作浮動與定位教學(xué)目標(biāo)掌握清除浮動影響的方法理解定位的概念掌握定位的分類和設(shè)置方法掌握制作水平導(dǎo)航條的方法理解浮動的原理6.1浮動一、浮動的原理標(biāo)準(zhǔn)文檔流，指的是元素排版布局過程中，瀏覽器會按元素默認(rèn)的顯示方式自動從左往右，從上往下的流式排列。這種布局結(jié)構(gòu)穩(wěn)定，但浪費(fèi)空間。利用浮動屬性可以使元素脫離標(biāo)準(zhǔn)流，并定義元素向左或向右浮動，直至元素的外邊緣遇到父元素或另一個浮動元素為止。

基本語法：selector{float:left|right|none|inherit}6.1浮動一、浮動的原理浮動的過程：元素的標(biāo)準(zhǔn)流排列box1向左浮動 box1向右浮動案例：demo6-1.html.box1{float:left;}.box1{float:right;}6.1浮動一、浮動的原理對box1元素設(shè)置浮動之后，文檔中的元素有以下變化：box1因?yàn)闆]有設(shè)置寬度浮動后自動收縮至元素內(nèi)容的實(shí)際寬度；box1無論向左還是向右浮動遇到父元素即停止；box1脫離了標(biāo)準(zhǔn)流，不再占用原文檔流中的位置，因此box2和box3向上移動占領(lǐng)了原來box1的位置；浮動元素box1覆蓋了標(biāo)準(zhǔn)流元素box2的部分區(qū)域，box2內(nèi)的文本會自動在剩余區(qū)域內(nèi)進(jìn)行調(diào)整；父元素本身沒有設(shè)置高度，是由內(nèi)部標(biāo)準(zhǔn)流元素的高度支撐，box1脫離標(biāo)準(zhǔn)流后，父元素的高度也隨之改變（稱之為高度塌陷）；6.1浮動一、浮動的原理浮動的特性：浮動元素不再區(qū)分行、塊等元素類型，所有浮動元素都可以設(shè)置寬、高；后浮動的元素不會超越前面浮動元素的頂端；浮動會影響該元素后面的內(nèi)容，不會影響該元素前面的內(nèi)容；6.1浮動一、浮動的原理浮動最初的本意是將插入到文章中的圖片向左或者向右浮動，使圖片下方的文字自動環(huán)繞在它的周圍，浮動之后的圖片左邊或者右邊不會出現(xiàn)一大塊的留白。案例：圖文混排demo6-2.html6.1浮動二、清除浮動根據(jù)浮動的特性，浮動元素會影響該元素后面的元素，也有可能對父元素的高度造成影響，因此有些時候需要對被影響的元素清除浮動造成的影響。清除浮動的常用方法有五種：使用clear屬性添加空標(biāo)記利用overflow屬性利用::after偽元素使用clearfix方法6.1浮動二、清除浮動（1）使用clear屬性（浮動的影響發(fā)生在兄弟元素之間）

基本語法：

clear：left|right|both；受元素left和right浮動的影響，footer的效果對footer設(shè)置清除浮動影響后的效果.footer{clear:both;}案例：demo6-3.html6.1浮動二、清除浮動（1）使用clear屬性（浮動元素高度不一致時）對底部元素footer設(shè)置了

clear:left;footer元素在向上移動的過程中遇到向左浮動的元素底部就會停止移動，如果浮動元素的高度不一致，可能會得到以下幾種情況；footer元素始終顯示在left元素的下方，clear：right；同理6.1浮動二、清除浮動（2）添加空標(biāo)記（應(yīng)用于嵌套元素，且父元素沒有設(shè)置高度）<divclass="con">

<divclass='left'></div><divclass='right'></div><!--為父元素.con添加空標(biāo)記-->

<divstyle="clear:both;width:0;height:0;"></div></div>案例：demo6-4.html添加空標(biāo)記的方法有一個缺點(diǎn)就是改變了原有HTML文檔的結(jié)構(gòu)，不利于優(yōu)化，因此并不提倡使用。6.1浮動二、清除浮動（3）利用overflow屬性（設(shè)置父元素的overflow屬性）可以利用overflow屬性來清除浮動對父元素的影響。對案例demo6-4.html，修改父元素的con類，為其添加如下代碼：.con{overflow:hidden; }因?yàn)閛verflow屬性會自動檢測浮動區(qū)域的高度，就算所有子元素都浮動了，overflow依然會為父元素保留浮動區(qū)域的高度，從而達(dá)到清除浮動影響的目的。

二、清除浮動（4）利用::after偽元素利用after偽元素和增加空標(biāo)記的原理類似，但又不會破壞HTML原文檔的結(jié)構(gòu)，在使用::after偽元素創(chuàng)建的子元素中清除浮動，創(chuàng)造的子元素并不會顯示在html樹中：.con::after{ clear:both; content:'';

display:block; width:0; height:0; visibility:hidden;

}6.1浮動二、清除浮動（5）使用clearfix方法clearfix是一種解決父元素高度塌陷問題的方法，是對第4種方法的改進(jìn)。首先為父元素添加一個clearfix的類：<divclass="conclearfix">，然后給這個類添加偽元素。.clearfix::before,.clearfix::after{content:''; display:table;}.clearfix::after{clear:both;}.clearfix{*zoom:1;}/*該語句用于支持舊版本的瀏覽器，不需要可刪除*/這是當(dāng)前比較推薦的方法。一方面clearfix這個類可以設(shè)置成公共類，減少CSS代碼，另一方面display：table；在解決margin擊穿問題時比display：block；具有更良好的表現(xiàn)。6.1浮動6.2定位一、定位的概念除了浮動之外，定位是另一種可以使元素脫離標(biāo)準(zhǔn)流的方法；允許對網(wǎng)頁元素通過位移定位到一個新的位置。通過定位屬性position來實(shí)現(xiàn)：static：默認(rèn)值，靜態(tài)定位；relative：相對定位，相對于其原標(biāo)準(zhǔn)流中的位置進(jìn)行定位；absolute：絕對定位，相對于最近一個已經(jīng)定位的父元素進(jìn)行定位；fixed：固定定位，相對于瀏覽器窗口進(jìn)行定位；sticky：粘貼定位，CSS3新增的定位屬性，基于用戶的滾動位置來定位；6.2定位二、靜態(tài)定位元素默認(rèn)的定位屬性值，是元素按照標(biāo)準(zhǔn)流規(guī)則在文檔中默認(rèn)的位置。在靜態(tài)定位狀態(tài)下，無法通過邊偏移屬性（top、bottom、left或right等）來改變元素在文檔中的位置。6.2定位三、相對定位使用相對定位的網(wǎng)頁元素，會相對于它在標(biāo)準(zhǔn)流中的初始位置，通過偏移指定的距離，到達(dá)新的位置.box{ position:relative;

/*以left邊框?yàn)榛€，向右偏移80px*/left:80px;

/*以bottom邊框?yàn)榛€，向上偏移100px*/ bottom:100px; }案例demo6-5.html6.2定位三、相對定位偏移值可以也可以是負(fù)數(shù).box{ position:relative; left:80px; bottom:-100px;}6.2定位三、相對定位使用相對定位的元素仍在標(biāo)準(zhǔn)流中，它在標(biāo)準(zhǔn)流中的初始位置會被空缺出來，而在新位置上有可能與其他元素發(fā)生疊加，其他元素不會受相對定位元素的影響。6.2定位四、絕對定位絕對定位的偏移量是以最近一個具有定位屬性的父元素作為基準(zhǔn)，如所有父元素均無定位屬性，則以文檔主體body為基準(zhǔn)采用絕對定位的元素會從標(biāo)準(zhǔn)流中脫離出來，后面的元素會向上移動占領(lǐng)它在標(biāo)準(zhǔn)流中初始的位置通常使用“父相子絕”的原則，即父元素設(shè)置為相對定位，但不設(shè)置偏移量，使其保留在標(biāo)準(zhǔn)流中，子元素設(shè)置為絕對定位。案例：demo6-6.html（a）絕對定位前

（b）絕對定位后（以父元素為基準(zhǔn)）（c）絕對定位后（以body為基準(zhǔn)）6.2定位五、固定定位固定定位fixed與絕對定位類似，但它始終以文檔主體body作為定位的基準(zhǔn)線，并且不會隨著滾動條進(jìn)行滾動。固定定位最常見的一種用途是在頁面中創(chuàng)建一個固定區(qū)域，例如返回頂部的按鈕及網(wǎng)頁里的小廣告等。6.2定位六、粘貼定位粘貼定位sticky的元素依賴用戶的滾動位置進(jìn)行定位；在相對定位和固定定位之間切換，起先它表現(xiàn)為相對定位，當(dāng)頁面滾動超出指定閾值時，它的表現(xiàn)就像固定定位；只有指定top、right、bottom或left四個閾值其中之一，才可使粘性定位生效。否則其行為與相對定位相同。6.2定位六、粘貼定位/*為top設(shè)置粘貼定位*/.top{

position:sticky;

top:5px; /*設(shè)置閾值*/

}案例demo6-7.html.top元素隨頁面滾動到達(dá)top：5px；則固定在該位置不再隨頁面向上滾動。6.2定位七、z-index在浮動和定位的實(shí)現(xiàn)過程中，都出現(xiàn)過多個元素在垂直空間上發(fā)生層疊的現(xiàn)象（a）帶背景色的元素層疊

（b）無背景色的元素層疊6.2定位七、z-index所有元素的z-index值默認(rèn)是0；z-index屬性僅對定位元素有效；z-index取整數(shù)值，不能加單位，可以是正數(shù)也可以是負(fù)數(shù)，值越大定位元素在層疊元素中越居上；z-index值相同時，浮動元素和定位元素位于標(biāo)準(zhǔn)流中其他元素的上方；浮動元素與定位元素層疊時，默認(rèn)情況下，定位元素位于浮動元素上方，后定義的定位元素位于先定義的定位元素上方，但可以通過修改定位元素的z-index值改變層疊順序。案例：demo6-8.html6.3導(dǎo)航條的制作導(dǎo)航條是網(wǎng)站的重要組成部分，通過導(dǎo)航條用戶可以方便的在網(wǎng)站內(nèi)部切換欄目，因此導(dǎo)航條的制作是網(wǎng)站的基本技術(shù)，也是浮動技術(shù)的主要應(yīng)用之一。通過前面所學(xué)的浮動、鏈接偽類、盒模型等知識，以/網(wǎng)站的導(dǎo)航條為案例，詳細(xì)介紹水平導(dǎo)航條制作。6.3導(dǎo)航條的制作一、列表屬性項目列表除了自身的功能，在html中，常用來組織導(dǎo)航條的欄目,因?yàn)橛行虻呐帕形淖指菀妆凰阉饕嫠唁?，有助于網(wǎng)站優(yōu)化seo（搜索引擎優(yōu)化）

。項目列表主要采用<ul>或者<ol>標(biāo)記，然后配合<li>標(biāo)記列出導(dǎo)航欄中的各項。6.3導(dǎo)航條的制作一、列表屬性list-style-type，定義列表前面的符號，可用值：none|disc|circle|squarelist-style-position，定義列表符號的位置，可用值：outside|insideoutside：默認(rèn)值，保持標(biāo)記位于文本的左側(cè)。inside：列表項目標(biāo)記放置在文本以內(nèi)list-style-image：url（）；使用圖像來替換列表項的符號經(jīng)常用背景圖來取代這個屬性，因?yàn)楸尘皥D可以隨意設(shè)置位置。list-style：復(fù)合屬性list-style:列表項目符號

列表項目符號的位置

列表項目圖像；list-style:列表項目符號列表項目符號的位置列表項目圖像;6.3導(dǎo)航條的制作二、制作導(dǎo)航條（1）搭建導(dǎo)航條的HTML結(jié)構(gòu)用無序列表組織導(dǎo)航條的欄目，整體放入一個div中，關(guān)聯(lián)類名nav，代碼如下：<divclass="nav"><ul><li><ahref="#">HTML/CSS</a></li><li><ahref="#">BrowserSide</a></li><li><ahref="#">ServerSide</a></li>…</ul></div>6.3導(dǎo)航條的制作二、制作導(dǎo)航條（2）清除標(biāo)記的默認(rèn)樣式列表元素有內(nèi)外邊距、列表符號，超級鏈接有下畫線、字體顏色等默認(rèn)樣式，在初始樣式設(shè)置時，統(tǒng)一清除。代碼如下：ul,li{

margin:0;

padding:0;

list-style:none;}a{color:#000;text-decoration:none;}6.3導(dǎo)航條的制作二、制作導(dǎo)航條（3）設(shè)置導(dǎo)航條的外圍div外圍div的高度決定導(dǎo)航條的高度，寬度可以設(shè)置成百分比或者根據(jù)布局設(shè)置具體的寬度，還可以選擇邊框、背景、圓角等屬性來進(jìn)行美化。代碼如下：.nav{

width:1210px;

height:48px;

background-color:#E7E7E3;

margin:5pxauto;}6.3導(dǎo)航條的制作二、制作導(dǎo)航條（4）設(shè)置列表項li默認(rèn)的li是垂直排列（垂直導(dǎo)航條的形態(tài)），可以通過浮動讓其水平排列，需要設(shè)置包括列表元素的寬度以及元素內(nèi)容的對齊方式，代碼如下：.nav