7項(xiàng)目七 基于DIV+CSS的網(wǎng)頁(yè)

HTML5+CSS3網(wǎng)頁(yè)設(shè)計(jì)與布局項(xiàng)目七基于DIV+CSS的網(wǎng)頁(yè)01

理解表現(xiàn)和結(jié)構(gòu)分離02

認(rèn)識(shí)DIV03

盒模型詳解04

CSS完善盒模型05

浮動(dòng)與定位01.理解表現(xiàn)和結(jié)構(gòu)分離什么是內(nèi)容、表現(xiàn)、結(jié)構(gòu)DIV與CSS結(jié)合的優(yōu)勢(shì)怎么改善現(xiàn)有的網(wǎng)站7.1理解表現(xiàn)和結(jié)構(gòu)分離7.1.1什么是內(nèi)容、表現(xiàn)、結(jié)構(gòu)內(nèi)容：頁(yè)面的制作者放在頁(yè)面內(nèi)真正想要讓訪問(wèn)者瀏覽的信息，包含數(shù)據(jù)、文檔或者圖片等。7.1理解表現(xiàn)和結(jié)構(gòu)分離7.1.1什么是內(nèi)容、表現(xiàn)、結(jié)構(gòu)結(jié)構(gòu)：使用結(jié)構(gòu)化、語(yǔ)義化的HTML等標(biāo)簽來(lái)描述內(nèi)容，使內(nèi)容更加具有邏輯性和易用性等?？梢园焉衔牡膬?nèi)容分成標(biāo)題、作者、章、節(jié)、段落和列表。7.1理解表現(xiàn)和結(jié)構(gòu)分離7.1.1什么是內(nèi)容、表現(xiàn)、結(jié)構(gòu)表現(xiàn)：使用CSS屬性來(lái)修飾頁(yè)面內(nèi)容的外觀、排版，以CSS取代HTML表格式布局、幀和其他表現(xiàn)的語(yǔ)言，通過(guò)CSS樣式可以使頁(yè)面的結(jié)構(gòu)標(biāo)簽更具美感、網(wǎng)頁(yè)外觀更加美觀。7.1理解表現(xiàn)和結(jié)構(gòu)分離7.1.2DIV與CSS結(jié)合的優(yōu)勢(shì)什么是DIV+CSS？

DIV+CSS是Web標(biāo)準(zhǔn)中常用的術(shù)語(yǔ)之一，主要是為了說(shuō)明與HTML網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言中的表格（table）布局方式的區(qū)別，用DIV盒模型結(jié)構(gòu)給各部分內(nèi)容劃分到不同的區(qū)塊，然后用CSS來(lái)定義盒模型的位置、大小、邊框、內(nèi)外邊距、排列方式等。

簡(jiǎn)單地說(shuō)，DIV用于來(lái)搭建網(wǎng)站的結(jié)構(gòu)（框架）、CSS用于創(chuàng)建網(wǎng)站表現(xiàn)（樣式/美化），實(shí)質(zhì)上就是使用HTML標(biāo)記對(duì)網(wǎng)站進(jìn)行標(biāo)準(zhǔn)化重構(gòu)，使用CSS將表現(xiàn)與內(nèi)容分離，便于網(wǎng)站維護(hù)，簡(jiǎn)化html頁(yè)面代碼，從而獲得一個(gè)較優(yōu)秀的網(wǎng)站結(jié)構(gòu)，便于日后維護(hù)、協(xié)同工作等。7.1理解表現(xiàn)和結(jié)構(gòu)分離7.1.2DIV與CSS結(jié)合的優(yōu)勢(shì)DIV+CSS的優(yōu)勢(shì)結(jié)構(gòu)和表現(xiàn)相分離。代碼簡(jiǎn)潔，使頁(yè)面載入得更快，提高頁(yè)面瀏覽速度。對(duì)網(wǎng)頁(yè)瀏覽者和瀏覽器更具親和力。CSS豐富的樣式屬性，使頁(yè)面更具靈活性，它可以根據(jù)不同的瀏覽器，而達(dá)到顯示效果的統(tǒng)一。易于維護(hù)和改版。提高搜索引擎對(duì)網(wǎng)頁(yè)的索引效率。7.1理解表現(xiàn)和結(jié)構(gòu)分離7.1.3怎么改善現(xiàn)有的網(wǎng)站傳統(tǒng)的HTML方法

傳統(tǒng)的HTML標(biāo)簽里既有控制結(jié)構(gòu)的標(biāo)簽，例如<title>、<p>，又有控制表現(xiàn)的標(biāo)簽，例如<font>、<b>，還有本意用于結(jié)構(gòu)后來(lái)被濫用于控制表現(xiàn)的標(biāo)簽，例如：<h1>、<table>等。

頁(yè)面中HTML標(biāo)簽和CSS屬性糅合在一起，總的來(lái)說(shuō)，就是結(jié)構(gòu)標(biāo)簽與表現(xiàn)標(biāo)簽混雜在一起，也就是結(jié)構(gòu)層和表現(xiàn)層混雜在一起。

當(dāng)我們只設(shè)計(jì)發(fā)布一些簡(jiǎn)單頁(yè)面的時(shí)候，傳統(tǒng)的HTML方法不會(huì)造成什么影響。而當(dāng)我們需要發(fā)布大量頁(yè)面時(shí)，對(duì)于頁(yè)面樣式、數(shù)據(jù)的修改利用將會(huì)有比較大的影響。7.1理解表現(xiàn)和結(jié)構(gòu)分離7.1.3怎么改善現(xiàn)有的網(wǎng)站W(wǎng)eb標(biāo)準(zhǔn)推薦的DIV+CSS方法結(jié)構(gòu)清晰化，將內(nèi)容、結(jié)構(gòu)與表現(xiàn)相分離。

也就是說(shuō)，HTML的標(biāo)簽只用來(lái)定義文檔的結(jié)構(gòu)，所有涉及表現(xiàn)的東西通通剝離出來(lái)，把它放到一個(gè)單獨(dú)的文件里，這個(gè)單獨(dú)的文件就是CSS。傳統(tǒng)的布局方式將控制表現(xiàn)的CSS混雜在內(nèi)容和結(jié)構(gòu)中，使得內(nèi)容數(shù)據(jù)無(wú)法再次利用，樣式的修改也很麻煩。而Web標(biāo)準(zhǔn)推薦的DIV+CSS方式使得結(jié)構(gòu)與表現(xiàn)相分離，很好的解決了上述問(wèn)題。02.認(rèn)識(shí)DIVDIV是什么如何使用DIV理解DIV并列與嵌套DIV結(jié)構(gòu)使用適合的對(duì)象來(lái)布局7.2認(rèn)識(shí)DIV7.2.1DIV是什么DIV（div，不區(qū)分大小寫(xiě)），比較專(zhuān)業(yè)的解釋是“層疊樣式表單元的位置和層次劃分”。通俗地說(shuō)，就是“塊”的意思，我們可以把一個(gè)網(wǎng)頁(yè)理解為由n個(gè)塊（區(qū)域）組成的，不同的塊顯示不同的內(nèi)容，如導(dǎo)航欄、banner、內(nèi)容區(qū)等。大部分HTML標(biāo)簽都有其語(yǔ)義（例如，標(biāo)簽p創(chuàng)建段落，h1標(biāo)簽創(chuàng)建標(biāo)題等等）。div標(biāo)簽沒(méi)有任何內(nèi)容上的意義，div標(biāo)簽可以獨(dú)立出區(qū)域，主要作為容器標(biāo)簽廣泛應(yīng)用在HTML頁(yè)面布局中。簡(jiǎn)單的講，DIV就是用于存放內(nèi)容（文字，圖片，元素）的容器。7.2認(rèn)識(shí)DIV7.2.2如何使用DIV在網(wǎng)頁(yè)布局中，用標(biāo)簽“<div>...</div>”表示一個(gè)塊，其中第一個(gè)“<div>”表示這個(gè)塊的開(kāi)始標(biāo)簽，最后的</div>表示結(jié)束標(biāo)簽，中間的“...”為內(nèi)容。根據(jù)實(shí)際情況，這個(gè)內(nèi)容可以是純文字，也可以是HTML標(biāo)簽，DIV本身也是HTML標(biāo)簽，所以同樣還可以包括n個(gè)DIV的“塊”。DIV標(biāo)簽一般用id和class來(lái)區(qū)分各個(gè)“塊”的不同樣式，往往要配合CSS使用。HTML格式如下： <divclass="a1">div1</div> <divid="a2">div2</div>7.2認(rèn)識(shí)DIV7.2.3理解DIVdiv是一個(gè)block對(duì)象（塊對(duì)象、或者塊級(jí)元素）。XHTML中的所有對(duì)象，幾乎都默認(rèn)為兩種對(duì)象類(lèi)型：block塊狀對(duì)象（塊級(jí)元素）：塊對(duì)象指的是當(dāng)前對(duì)象顯示為一個(gè)方塊。默認(rèn)顯示狀態(tài)下，它將占據(jù)整行，其他的對(duì)象只能在下一行顯示。inline行間對(duì)象（或者稱(chēng)內(nèi)聯(lián)元素、行內(nèi)元素）：與block對(duì)象相反，它允許下一個(gè)對(duì)象與之共享一行進(jìn)行顯示。塊狀div說(shuō)明，它在頁(yè)面中并非用于類(lèi)似于文本那樣的行間排版，而是用于大面積，大區(qū)域的塊狀排版。7.2認(rèn)識(shí)DIV7.2.3理解DIV1.獨(dú)占一行，不與其他任何元素并列塊元素總是在新行上開(kāi)始，占據(jù)一整行，其寬度自動(dòng)填滿其父元素寬度，依次垂直向下排列。2.可以設(shè)置任意寬度和高度塊級(jí)元素可以設(shè)置寬高，并且寬度高度都可隨意控制，塊級(jí)元素即使設(shè)置了寬度，仍然是獨(dú)占一行的。3.可以包含行內(nèi)元素和其他塊元素例7-3例7-4例7-57.2認(rèn)識(shí)DIV7.2.4并列與嵌套DIV結(jié)構(gòu)1.并列DIV結(jié)構(gòu)

例7-6<body><divclass="header">頭部</div><divclass="center">中間部分</div><divclass="footer">底部</div></body>例7-7例7-87.2認(rèn)識(shí)DIV從頁(yè)面效果發(fā)現(xiàn)，DIV本身與樣式?jīng)]有任何關(guān)系。樣式是需要編寫(xiě)CSS來(lái)實(shí)現(xiàn)的。在DIV+CSS布局中，所要做的工作可以簡(jiǎn)單歸集為兩件事：一是使用div將內(nèi)容標(biāo)記出來(lái)，二是為了這個(gè)div編寫(xiě)所需的CSS樣式。7.2認(rèn)識(shí)DIV7.2.4并列與嵌套DIV結(jié)構(gòu)2.并列與嵌套DIV結(jié)構(gòu)

在大多數(shù)情況下，網(wǎng)頁(yè)不可能只有三個(gè)模塊，一般來(lái)說(shuō)中間部分通常又被劃分為左右兩欄，通過(guò)這樣的劃分，可以使整個(gè)內(nèi)容區(qū)域更加豐富，讓網(wǎng)頁(yè)看起來(lái)更加活躍，這就涉及到div的嵌套。7.2認(rèn)識(shí)DIV7.2.4并列與嵌套DIV結(jié)構(gòu)2.并列與嵌套DIV結(jié)構(gòu)<body><divclass="header">頭部</div><divclass="center"><divclass="left">左欄</div><!--將中間部分替換成左右兩欄--><divclass="right">右欄</div></div><divclass="footer">底部</div></body>7.2認(rèn)識(shí)DIV7.2.4并列與嵌套DIV結(jié)構(gòu)2.并列與嵌套DIV結(jié)構(gòu)例7-9例7-107.2認(rèn)識(shí)DIV7.2.5使用合適的對(duì)象來(lái)布局在實(shí)際的網(wǎng)頁(yè)布局中，為了實(shí)現(xiàn)更多更復(fù)雜的頁(yè)面排版，還可能會(huì)出現(xiàn)多個(gè)div并列或者多級(jí)嵌套的情況，就需要我們?cè)诤线m的地方使用合乎元素意義的標(biāo)簽和CSS來(lái)進(jìn)行網(wǎng)頁(yè)布局。試想這樣一種情況，在header區(qū)域中，除了標(biāo)題，可能還有其它對(duì)象出現(xiàn)，如導(dǎo)航菜單等，因此從布局關(guān)系上來(lái)看，我們需要再用兩個(gè)對(duì)象來(lái)分別標(biāo)識(shí)header之中這兩個(gè)元素。<divid="header"><divid="title">標(biāo)題區(qū)</div><divid="nav">導(dǎo)航</div></div>7.2認(rèn)識(shí)DIV7.2.5使用合適的對(duì)象來(lái)布局從語(yǔ)法上來(lái)看沒(méi)有任何錯(cuò)誤，符合布局的規(guī)范，但是我們認(rèn)為，從網(wǎng)頁(yè)結(jié)構(gòu)與優(yōu)化上來(lái)看，這種做法是不科學(xué)的。我們知道HTML的所有標(biāo)簽之中，不僅僅由div組成，還有其他標(biāo)簽，而每個(gè)標(biāo)簽都有著自己的作用，雖然我們可以完全使用div來(lái)構(gòu)建布局，但組成的頁(yè)面將是一個(gè)全由div組成的網(wǎng)頁(yè)，最終帶給我們的可讀性并不高，全篇的div反而成了復(fù)雜的沒(méi)有任何含義的代碼。7.2認(rèn)識(shí)DIV7.2.5使用合適的對(duì)象來(lái)布局正確的作法是，選用符合需求的其它HTML標(biāo)簽，合理的替代div。<divid="header"><h1>標(biāo)題區(qū)</h1><ul>導(dǎo)航</ul></div>Web標(biāo)準(zhǔn)推薦使用盡可能符合頁(yè)面中元素意義的標(biāo)簽來(lái)標(biāo)識(shí)元素。

在以往的表格式布局之中，無(wú)論是h1或是u1這些元素幾乎都不常見(jiàn)到，主要原因就是所有的對(duì)象形式都表格所替代，頁(yè)面可讀性差，也沒(méi)有任何伸縮可言。

而在CSS布局中，要盡可能多地使用HTML所支持的各種標(biāo)簽，最終網(wǎng)頁(yè)對(duì)象都將擁有良好的可讀性。再通過(guò)進(jìn)一步的CSS定義，其樣式表現(xiàn)能力絲毫不比表格差，而且擁有比表格更多的樣式控制方法，這正體現(xiàn)了CSS布局的基本優(yōu)勢(shì)。03.盒模型詳解什么是盒模型盒模型的細(xì)節(jié)寬、高、內(nèi)邊距、外邊距定義上下margin疊加問(wèn)題左右margin加倍問(wèn)題7.3盒模型詳解7.3.1什么是盒模型盒模型就是指CSS布局中的每一個(gè)元素，在瀏覽器的解釋中，都被當(dāng)作一個(gè)盒子。當(dāng)瀏覽器對(duì)一個(gè)HTML文檔進(jìn)行布局的時(shí)候，會(huì)把每一個(gè)元素都渲染成一個(gè)矩形的盒子，盒模型就是對(duì)這些元素的形狀進(jìn)行一個(gè)抽象。7.3盒模型詳解7.3.1什么是盒模型盒模型的組成部分包含四個(gè)要素：content(內(nèi)容區(qū)域)padding(內(nèi)邊距)border(邊框區(qū)域)margin(外邊距區(qū)域)7.3盒模型詳解7.3.1什么是盒模型在寫(xiě)一個(gè)HTML頁(yè)面時(shí)，其實(shí)就相當(dāng)于在這個(gè)頁(yè)面中疊盒子。div、span、li、a、p等標(biāo)簽都可以看作盒子，放置自己的內(nèi)容(content)。圖片、表單元素一律看作是文本。瀏覽器通過(guò)這些盒子的大小和浮動(dòng)方式來(lái)判斷下一個(gè)盒子是貼近顯示，還是下一行顯示，還是其他方式顯示。7.3盒模型詳解7.3.2盒模型的細(xì)節(jié)只需要理解盒模型的寬度或高度，就能理解他們?cè)诰W(wǎng)頁(yè)布局中所占據(jù)的位置?？偟膩?lái)說(shuō)，一個(gè)盒子中主要的屬性就5個(gè)：width、height、padding、border、margin。width和height：內(nèi)容的寬度、高度（不是盒子的寬度、高度）。padding：內(nèi)邊距。border：邊框。margin：外邊距。7.3盒模型詳解7.3.2盒模型的細(xì)節(jié)要想明確盒模型在網(wǎng)頁(yè)布局中所占據(jù)的位置，就必須理解盒模型的計(jì)算方式，一般來(lái)說(shuō)，默認(rèn)的盒模型實(shí)際占用空間計(jì)算模式為：水平空間大小=margin(左右)+border(左右)+padding(左右)+width垂直空間大小=margin(上下)+border(上下)+padding(上下)+height例如，上圖元素的實(shí)際寬度為：10px+1px+20px+200px+20px+1px+10px=262px。7.3盒模型詳解7.3.2盒模型的細(xì)節(jié)在瀏覽器的渲染中，關(guān)于盒模型有兩種，一種是W3C標(biāo)準(zhǔn)盒模型（默認(rèn)），一種是IE盒模型。它們主要的區(qū)別在于width屬性和height屬性所包含的大小。W3C標(biāo)準(zhǔn)盒子模型W3C標(biāo)準(zhǔn)盒模型的范圍包括margin、border、padding、content，并且content部分不包含其他部分。7.3盒模型詳解7.3.2盒模型的細(xì)節(jié)IE盒子模型IE盒子模型的范圍也包括margin、border、padding、content，和W3C標(biāo)準(zhǔn)盒模型不同的是，IE盒子模型的content部分包含了border和padding。7.3盒模型詳解7.3.2盒模型的細(xì)節(jié)在W3C標(biāo)準(zhǔn)盒子模型中，width和height指的是內(nèi)容區(qū)域的寬度和高度。增加內(nèi)邊距、邊框和外邊距不會(huì)影響內(nèi)容區(qū)域的尺寸，但是會(huì)增加元素框的總尺寸。IE盒子模型中，width和height指的是內(nèi)容區(qū)域+border+padding的寬度和高度。7.3盒模型詳解7.3.2盒模型的細(xì)節(jié)通過(guò)一個(gè)簡(jiǎn)單的示例來(lái)看下二者的區(qū)別：.test{ width:200px; height:160px; background:#B0F9FF; border:solid10px#2196F3; padding:20px;}為避免不同盒模型帶來(lái)布局的差異，一般在開(kāi)發(fā)剛開(kāi)始就應(yīng)該把盒模型確定下來(lái)，否則會(huì)引起布局錯(cuò)亂。7.3盒模型詳解7.3.3寬、高、內(nèi)邊距、外邊距定義當(dāng)指定一個(gè)CSS元素的寬度和高度屬性時(shí)，實(shí)際只是設(shè)置內(nèi)容區(qū)域的寬度和高度。在CSS中元素尺寸屬性包括width(寬度)、height(高度)等1.元素的寬度width和高度height屬性說(shuō)明值width設(shè)置元素寬度auto、長(zhǎng)度值或百分比height設(shè)置元素高度min-width為元素設(shè)置最小可接受寬度和高度auto、長(zhǎng)度值或百分比min-heightmax-width為元素設(shè)置最大可接受寬度和高度auto、長(zhǎng)度值或百分比max-heightbox-sizing設(shè)置使用哪種盒模型解析content-box、border-box例7-117.3盒模型詳解7.3.3寬、高、內(nèi)邊距、外邊距定義在講解之前，我們先說(shuō)下盒模型的四邊，方向分別為上、下、左、右，而CSS中表示就分別是top、bottom、left、right。2.盒子邊框border7.3盒模型詳解7.3.3寬、高、內(nèi)邊距、外邊距定義邊框主要有三個(gè)屬性：寬度(border-width)、樣式(border-style)、顏色(border-color)。在CSS盒子模型中，可以為各個(gè)邊框設(shè)置不同的樣式。2.盒子邊框border邊框代碼屬性上邊框border-topborder-top-style:樣式取值;border-top-width:寬度值;border-top-color:顏色值;下邊框border-bottomborder-bottom-style:樣式取值;border-bottom-width:寬度值;border-bottom-color:顏色值;左邊框border-leftborder-left-style:樣式取值;border-left-width:寬度值;border-left-color:顏色值;右邊框border-rightborder-right-style:樣式取值;border-right-width:寬度值;border-right-color:顏色值;7.3盒模型詳解7.3.3寬、高、內(nèi)邊距、外邊距定義2.盒子邊框border盒模型的五大屬性，除了width和height以外，padding、border和margin屬性都是由四邊組成的，每邊都可以設(shè)置自己的單獨(dú)值，為了避免頁(yè)面代碼過(guò)于冗余，也可以綜合設(shè)置4條邊的樣式。以border-style屬性為例，具體格式如下：border-style：上邊框樣式右邊框樣式下邊框樣式左邊框樣式;/*上->右->下->左*/border-style：上邊框樣式左右邊框樣式下邊框樣式;/*上->左右->下*/border-style：上下邊框樣式左右邊框樣式;/*上下->左右*/border-style：上下左右邊框樣式;/*上下左右屬性相同*/7.3盒模型詳解7.3.3寬、高、內(nèi)邊距、外邊距定義2.盒子邊框border

在設(shè)置邊框樣式時(shí)，屬性值可以是1~4個(gè)。當(dāng)有4個(gè)屬性值時(shí)，邊框樣式會(huì)按照上右下左的順序順時(shí)針排列。設(shè)置3個(gè)屬性值時(shí)，分別為上、左右、下；設(shè)置2個(gè)值時(shí)，為上下和左右；只有1個(gè)值時(shí)，則4條邊為同一樣式。還可以將邊框的三個(gè)不同屬性寫(xiě)在一起，格式如下：border:border-widthborder-styleborder-color例7-127.3盒模型詳解7.3.3寬、高、內(nèi)邊距、外邊距定義3.盒子內(nèi)邊距（填充）padding

應(yīng)用內(nèi)邊距會(huì)在元素內(nèi)容和邊框之間添加空白。我們可以為盒子的每個(gè)邊界單獨(dú)設(shè)置內(nèi)邊距，或者使用padding簡(jiǎn)寫(xiě)屬性在一條聲明中設(shè)置所有的值（與border格式一致）。例7-13屬性說(shuō)明值padding-top為上邊設(shè)置內(nèi)邊距長(zhǎng)度值或百分?jǐn)?shù)padding-right為右邊設(shè)置內(nèi)邊距長(zhǎng)度值或百分?jǐn)?shù)padding-bottom為下邊設(shè)置內(nèi)邊距長(zhǎng)度值或百分?jǐn)?shù)padding-left為左邊設(shè)置內(nèi)邊距長(zhǎng)度值或百分?jǐn)?shù)padding綜合屬性，在一條聲明中設(shè)置所有邊的內(nèi)邊距1~4個(gè)長(zhǎng)度值或百分?jǐn)?shù)

也可以使用padding簡(jiǎn)寫(xiě)屬性在一條聲明中為四條邊設(shè)置內(nèi)邊距?？梢詾檫@個(gè)屬性指定1~4個(gè)值。如果指定4個(gè)值，那么它們分別代表上邊、右邊、下邊和左邊的內(nèi)邊距。如果只給一個(gè)值，則四條邊的內(nèi)邊距都是這個(gè)值。7.3盒模型詳解7.3.3寬、高、內(nèi)邊距、外邊距定義4.盒子外邊距margin外邊距是元素邊框和頁(yè)面上圍繞在它周?chē)乃袞|西之間的空白區(qū)域。圍繞在它周?chē)臇|西包括其他元素和它的父元素。

margin屬性用于設(shè)置外邊距。設(shè)置外邊距會(huì)在元素之間創(chuàng)建“空白”，這段空白通常不能放置其他內(nèi)容。例7-16屬性說(shuō)明值margin-top為頂邊設(shè)置外邊距長(zhǎng)度值或百分?jǐn)?shù)margin-bottom為底邊設(shè)置外邊距長(zhǎng)度值或百分?jǐn)?shù)margin-left為左邊設(shè)置外邊距長(zhǎng)度值或百分?jǐn)?shù)margin-right為右邊設(shè)置外邊距長(zhǎng)度值或百分?jǐn)?shù)margin簡(jiǎn)寫(xiě)屬性，在一條聲明中設(shè)置所有外邊距1~4個(gè)長(zhǎng)度值或百分?jǐn)?shù)7.3盒模型詳解7.3.3寬、高、內(nèi)邊距、外邊距定義4.盒子外邊距margin結(jié)合盒子模型中的幾個(gè)要素，還可以實(shí)現(xiàn)盒子水平居中：必須是塊級(jí)元素。盒子必須指定了寬度（因?yàn)閴K級(jí)元素寬大小默認(rèn)為瀏覽器寬度）。然后就給左右的外邊距都設(shè)置為auto(自動(dòng))，就可使塊級(jí)元素水平居中。例7-177.3盒模型詳解7.3.3寬、高、內(nèi)邊距、外邊距定義4.盒子外邊距margin當(dāng)div盒子設(shè)置margin:0auto;盒子會(huì)自動(dòng)居中。使用margin:0auto;要注意：使用margin:0auto;水平居中盒子必須有width，要有明確的寬度值。只有標(biāo)準(zhǔn)流下的盒子才能使用margin:0auto;當(dāng)一個(gè)盒子浮動(dòng)了、固定定位或絕對(duì)定位，將沒(méi)有效果。margin：0auto;居中的是盒子，而不是居中文本，上面如果需要文字水平居中則需使用text-align:center;7.3盒模型詳解7.3.4上下margin疊加問(wèn)題1.上下外邊距合并當(dāng)兩個(gè)對(duì)象為上下關(guān)系時(shí)，而且都具備margin屬性的時(shí)候，此時(shí)由margin所造成的外邊距將出現(xiàn)疊加。

當(dāng)上下相鄰的兩個(gè)塊元素相遇時(shí)，如果上面的元素有下外邊距margin-bottom，下面的元素有上外邊距margin-top，則他們之間的垂直間距不是margin-bottom與margin-top之和，而是兩者中的較大者。這種現(xiàn)象被稱(chēng)為相鄰塊元素垂直外邊距的合并（也稱(chēng)外邊距塌陷）。7.3盒模型詳解7.3.4上下margin疊加問(wèn)題2.嵌套塊元素垂直外邊距的合并當(dāng)兩個(gè)對(duì)象為上下關(guān)系時(shí)，而且都具備margin屬性的時(shí)候，此時(shí)由margin所造成的外邊距將出現(xiàn)疊加。對(duì)于兩個(gè)嵌套關(guān)系的塊元素，如果父元素沒(méi)有上內(nèi)邊距及邊框，則父元素的上外邊距會(huì)與子元素的上外邊距發(fā)生合并，合并后的外邊距為兩者中的較大者，即使父元素的上外邊距為0，也會(huì)發(fā)生合并。7.3盒模型詳解7.3.4上下margin疊加問(wèn)題在嵌套關(guān)系中，只有父元素沒(méi)有上內(nèi)邊距及邊框，父元素的上外邊距才會(huì)與子元素的上外邊距發(fā)生合并?？偟膩?lái)說(shuō)，空白邊疊加時(shí)，即上下相鄰的普通元素，上下邊距并非簡(jiǎn)單的相加，而是取其較大的margin值為準(zhǔn)。

需要注意的是，只有普通文檔流中塊的垂直外邊距才會(huì)發(fā)生外邊距合并。行內(nèi)元素、浮動(dòng)或絕對(duì)定位之間的外邊距不會(huì)合并。7.3盒模型詳解7.3.5左右margin加倍問(wèn)題1.行內(nèi)元素左右margin加倍行內(nèi)元素不能設(shè)置高度，也不占上下外邊距。當(dāng)兩個(gè)行內(nèi)元素相鄰的時(shí)候，它們之間的距離為第一個(gè)元素的margin-right+第二個(gè)元素的margin-left，即左右外邊距不會(huì)合并。7.3盒模型詳解7.3.5左右margin加倍問(wèn)題2.IE瀏覽器顯示左右margin加倍當(dāng)盒模型對(duì)象為浮動(dòng)（后文將詳細(xì)講解）狀態(tài)時(shí)，CSS樣式中設(shè)置的margin值在IE6中顯示時(shí)會(huì)加倍，這樣有可能導(dǎo)致子層的寬度超過(guò)父層，讓顯示錯(cuò)位。

定義一個(gè)外層<div>，設(shè)置其寬度為400px，其中包含2個(gè)浮動(dòng)<div>，寬度為196px，margin值為2px。這樣做的目的是使兩個(gè)子<div>所占據(jù)的寬度剛好等于外層<div>的寬度，以使它們并列放在外層<div>中。7.3盒模型詳解7.3.5左右margin加倍問(wèn)題2.IE瀏覽器顯示左右margin加倍在IE6中，左側(cè)欄目和右側(cè)欄目的之間的距離margin顯示時(shí)會(huì)加倍，使得內(nèi)層的寬度超過(guò)父層，導(dǎo)致了布局的混亂。對(duì)于以上問(wèn)題，我們可以非常容易地解決。為第一個(gè)浮動(dòng)元素的樣式增加屬性display:inline;（行內(nèi)顯示）即可。04.CSS完善盒模型顯示方式定義溢出處理輪廓樣式定義7.4CSS完善盒模型7.4.1顯示方式定義在前面的學(xué)習(xí)中我們知道，在瀏覽器的渲染中，關(guān)于盒模型有兩種：W3C標(biāo)準(zhǔn)盒模型（默認(rèn)）；IE盒模型。它們主要的區(qū)別在于width屬性和height屬性所包含的大小。CSS3新增一個(gè)名叫box-sizing的屬性，可以通過(guò)box-sizing來(lái)指定盒模型。7.4CSS完善盒模型7.4.1顯示方式定義box-sizing屬性的語(yǔ)法格式如下：box-sizing:content-box|border-box|inherit;content-box，默認(rèn)值，將采用W3C標(biāo)準(zhǔn)盒模型解析，可以使設(shè)置的寬度和高度值應(yīng)用到元素的內(nèi)容框。盒子的width只包含內(nèi)容。即總寬度=margin+border+padding+width。border-box，將采用IE盒模型解析（怪異盒模型）。設(shè)置的width值其實(shí)是除margin外的border+padding+內(nèi)容的總寬度。盒子的width包含border+padding+內(nèi)容。即總寬度=margin+width。inherit，規(guī)定應(yīng)從父元素繼承box-sizing屬性的值。7.4CSS完善盒模型7.4.2溢出處理CSS允許改變?cè)氐某叽?，如果嘗試改變?cè)氐某叽?，很快就?huì)到達(dá)某一個(gè)點(diǎn)：內(nèi)容太大，已經(jīng)無(wú)法完全顯示在元素的內(nèi)容盒中。這時(shí)的默認(rèn)處理方式是內(nèi)容溢出，并繼續(xù)顯示。div{width:200px;height:100px;border:mediumdoubleblack;}7.4CSS完善盒模型7.4.2溢出處理可以使用overflow屬性改變這種行為。屬性說(shuō)明overflow-x定義左右邊（水平方向）的剪切overflow-y定義上下邊（垂直方向）的剪切overflow簡(jiǎn)寫(xiě)屬性overflow-x和overflow-y屬性分別設(shè)置水平方向和垂直方向的溢出方式，overflow簡(jiǎn)寫(xiě)屬性可在一條聲明中聲明兩個(gè)方向的溢出方式。7.4CSS完善盒模型7.4.2溢出處理下表展示了這三個(gè)屬性可能的取值。值說(shuō)明visible默認(rèn)值，不剪切內(nèi)容，也不添加滾動(dòng)條。不管是否溢出，都顯示元素內(nèi)容。auto瀏覽器自行處理溢出內(nèi)容。通常，如果內(nèi)容被剪掉就顯示滾動(dòng)條，否則不顯示。hidden多余的內(nèi)容直接剪掉，不顯示超出元素尺寸的內(nèi)容。scroll為了讓用戶看到所有內(nèi)容，瀏覽器會(huì)添加滾動(dòng)機(jī)制。這個(gè)值跟具體平臺(tái)和瀏覽器相關(guān)。當(dāng)內(nèi)容超出元素尺寸，overflow-x顯示為橫向滾動(dòng)條，而overflow-y顯示為縱向滾動(dòng)條。no-display當(dāng)內(nèi)容超出元素尺寸，則不顯示元素。此時(shí)類(lèi)似添加了display:none聲明。目前沒(méi)有瀏覽器支持no-content當(dāng)內(nèi)容超出元素尺寸，則不顯示內(nèi)容。此時(shí)類(lèi)似添加了visibility:hidden聲明。目前沒(méi)有瀏覽器支持例7-237.4CSS完善盒模型7.4.3輪廓樣式定義輪廓（outline）是繪制于元素周?chē)囊粭l線，位于邊框邊緣的外圍，可起到突出元素的作用。輪廓與邊框不同。輪廓是在元素邊框之外繪制的，并且可能與其他內(nèi)容重疊。同樣，輪廓也不是元素尺寸的一部分，元素的總寬度和高度不受輪廓線寬度的影響。7.4CSS完善盒模型7.4.3輪廓樣式定義屬性說(shuō)明值outline-color設(shè)置輪廓顏色name-顏色名，比如"red"HEX-十六進(jìn)制值，比如"#ff0000"RGB-指定RGB值，比如"rgb(255,0,0)"HSL-指定HSL值，比如"hsl(0,100%,50%)"invert-執(zhí)行顏色反轉(zhuǎn)（逆向的顏色）?？梢源_保輪廓線在不同的背景顏色中都是可見(jiàn)的inherit-默認(rèn)繼承outline-style設(shè)置輪廓樣式dotted-點(diǎn)狀輪廓。dashed-虛線輪廓。solid-實(shí)線輪廓。double-雙線輪廓。groove-3D凹槽輪廓。ridge-3D凸槽輪廓。inset-3D凹邊輪廓。outset-3D凸邊輪廓。none-無(wú)輪廓。hidden-隱藏的輪廓。inherit-默認(rèn)繼承outline-width設(shè)置輪廓寬度thin-細(xì)輪廓，通常為1pxmedium-中等的輪廓（默認(rèn)值）thick-粗的輪廓length-特定尺寸（以px、pt、cm、em計(jì)）inherit-默認(rèn)繼承outline-offset設(shè)置輪廓偏移位置的數(shù)值<length>-定義輪廓距離容器的值；Inherit-默認(rèn)繼承outline在一個(gè)聲明中設(shè)置所有的輪廓屬性outline-widthoutline-style（必需）outline-color屬性可指定一個(gè)、兩個(gè)或三個(gè)值。值的順序無(wú)關(guān)緊要7.4CSS完善盒模型7.4.3輪廓樣式定義outline-style

屬性可以設(shè)置輪廓線的樣式。語(yǔ)法格式如下：outline-style:auto|<border-style>|inherit;1.輪廓樣式dotted-點(diǎn)狀輪廓。dashed-虛線輪廓。solid-實(shí)線輪廓。double-雙線輪廓。groove-3D凹槽輪廓。ridge-3D凸槽輪廓。inset-3D凹邊輪廓。outset-3D凸邊輪廓。none-無(wú)輪廓。hidden-隱藏的輪廓。inherit-默認(rèn)繼承例7-24在CSS輪廓中，除非設(shè)置了outline-style屬性，否則其他輪廓屬性都不會(huì)有任何作用。7.4CSS完善盒模型7.4.3輪廓樣式定義outline-width屬性可以設(shè)置輪廓線的寬度。語(yǔ)法格式如下：outline-width:thin|medium|thick|<length>|inherit;2.輪廓寬度例7-25thin-細(xì)輪廓，通常為1pxmedium-中等的輪廓（默認(rèn)值）thick-粗的輪廓length-特定尺寸（以px、pt、cm、em計(jì)）inherit-默認(rèn)繼承7.4CSS完善盒模型7.4.3輪廓樣式定義outline-color屬性可以單獨(dú)設(shè)置輪廓線的顏色。語(yǔ)法格式如下：outline-color:<color>|invert|inherit;3.輪廓顏色例7-26name-顏色名，比如"red"HEX-十六進(jìn)制值，比如"#ff0000"RGB-指定RGB值，比如"rgb(255,0,0)"HSL-指定HSL值，比如"hsl(0,100%,50%)"invert-執(zhí)行顏色反轉(zhuǎn)（逆向的顏色）?？梢源_保輪廓線在不同的背景顏色中都是可見(jiàn)的inherit-默認(rèn)繼承outline-width、outline-style（必需）、outline-color三種輪廓屬性可以使用outline簡(jiǎn)寫(xiě)屬性來(lái)設(shè)置，outline屬性可指定一個(gè)、兩個(gè)或三個(gè)值。值的順序無(wú)關(guān)緊要。例7-277.4CSS完善盒模型7.4.3輪廓樣式定義outline-offset屬性可以單獨(dú)設(shè)置輪廓線的偏移位置。語(yǔ)法格式如下：outline-offset:<length>|inherit;4.輪廓偏移例7-28outline-offset屬性在元素的輪廓與邊框之間添加空間。元素及其輪廓之間的空間是透明的。05.浮動(dòng)與定位文檔流浮動(dòng)定位浮動(dòng)的清理何時(shí)選用浮動(dòng)定位7.5浮動(dòng)與定位7.5.1文檔流”流”，我們?cè)谏钪薪?jīng)常聽(tīng)到這個(gè)詞，比如水流，電流。就像水流從高處往低處流一樣，我們可以把文檔流想象成HTML元素在瀏覽器上“流動(dòng)”。瀏覽器的頂端就是流的源頭，瀏覽器的底部就是流的結(jié)尾。7.5浮動(dòng)與定位7.5.1文檔流文檔流（normalflow，也被稱(chēng)為“普通流”、“標(biāo)準(zhǔn)流”），指的就是在元素排版布局的過(guò)程中，元素會(huì)自動(dòng)從左往右，從上往下地遵守這種流式排列方式。當(dāng)瀏覽器渲染HTML文檔時(shí)，從頂部開(kāi)始渲染，為元素分配所需要的空間，每一個(gè)塊級(jí)元素單獨(dú)占一行，行內(nèi)元素則按照順序被水平渲染直到在當(dāng)前行遇到了邊界，然后換到下一行的起點(diǎn)繼續(xù)渲染。行內(nèi)元素也稱(chēng)為內(nèi)聯(lián)元素，在標(biāo)準(zhǔn)文檔流中，行內(nèi)元素和其他行內(nèi)元素都會(huì)在一條水平線上排列，都是在同一行。<b>、<strong>、<a>、<em>、<span>等塊級(jí)元素在網(wǎng)頁(yè)中以區(qū)域的形式出現(xiàn)，塊級(jí)元素總是在新行上開(kāi)始，占據(jù)一整行。<p>、<ul>、<h1>~<h6>、<div>等。1.標(biāo)準(zhǔn)文檔流7.5浮動(dòng)與定位7.5.1文檔流可以通過(guò)display屬性將塊級(jí)元素(比如div)和行內(nèi)元素(a,span)進(jìn)行相互轉(zhuǎn)換。塊級(jí)元素默認(rèn)display:block，行內(nèi)元素默認(rèn)為display:inline。display:none;不顯示該元素。display:block;轉(zhuǎn)換為塊級(jí)元素。此時(shí)這個(gè)span能夠設(shè)置寬度高度，且獨(dú)占一行，其他元素?zé)o法與之并排。如果不設(shè)置寬度，將與父元素等寬。display:inline;轉(zhuǎn)換為行內(nèi)元素。此時(shí)這個(gè)div將不能設(shè)置寬度和高度，并且可以和其他行內(nèi)元素并排了。display:inline-block;轉(zhuǎn)換為行內(nèi)塊級(jí)元素。可實(shí)現(xiàn)塊級(jí)元素的并行排列。1.標(biāo)準(zhǔn)文檔流7.5浮動(dòng)與定位7.5.1文檔流標(biāo)準(zhǔn)文檔流，將瀏覽器窗體自上而下分成一行一行，塊元素獨(dú)占一行，相鄰行內(nèi)元素在每行中按從左到右地依次排列元素。標(biāo)準(zhǔn)文檔流里面的限制非常多，導(dǎo)致很多頁(yè)面效果無(wú)法實(shí)現(xiàn)，如果我們現(xiàn)在就要并排，并且就要設(shè)置寬度，就必須有：脫離標(biāo)準(zhǔn)文檔流。1.標(biāo)準(zhǔn)文檔流例7-297.5浮動(dòng)與定位7.5.1文檔流脫離文檔流是相對(duì)標(biāo)準(zhǔn)文檔流而言的。標(biāo)準(zhǔn)文檔流就是我們沒(méi)有用CSS樣式去控制布局的HTML文檔結(jié)構(gòu)，代碼的順序就是網(wǎng)頁(yè)展示的順序。2.脫離標(biāo)準(zhǔn)文檔流7.5浮動(dòng)與定位7.5.1文檔流脫離文檔流，即將元素從普通的布局排版（普通文檔流）中脫離出來(lái)，不再是從左至右從上至下，不受文檔流的布局約束了。假設(shè)讓div1脫離文檔流：2.脫離標(biāo)準(zhǔn)文檔流7.5浮動(dòng)與定位7.5.1文檔流

div1在原文檔流中所占的空間被清除了。其他元素在排版的時(shí)候，會(huì)當(dāng)做沒(méi)看到它，但是它在文檔中依然存在。脫離文檔流可以理解為在文檔流之上，比如在一張紙（文檔流）上放一個(gè)硬幣，這個(gè)硬幣就是一個(gè)脫離文檔流的元素，它會(huì)覆蓋紙張上當(dāng)前位置的內(nèi)容。所以實(shí)際上，在html頁(yè)面中顯示如圖：2.脫離標(biāo)準(zhǔn)文檔流div2被div1給覆蓋了。因?yàn)殡m然div1脫離了文檔流，不占據(jù)頁(yè)面的空間了，但是位置不會(huì)改變，只不過(guò)是父元素計(jì)算自身高度時(shí)候不計(jì)算脫離的那個(gè)塊的高度。導(dǎo)致div1的位置出現(xiàn)空白，后面的元素自動(dòng)補(bǔ)齊，不在一個(gè)層里，所以出現(xiàn)了覆蓋。7.5浮動(dòng)與定位7.5.2浮動(dòng)定位

在CSS布局中，有三種基本的定位機(jī)制：普通流，浮動(dòng)，絕對(duì)定位(absolute,fixed)。普通流是默認(rèn)定位方式，在普通流中元素框的位置由元素在html中的位置決定，即標(biāo)簽元素正常從上到下，從左到右排列。我們可以使用浮動(dòng)或者定位這兩種技術(shù)來(lái)實(shí)現(xiàn)“脫離文檔流”，從而隨心所欲地控制著頁(yè)面的布局。7.5浮動(dòng)與定位7.5.2浮動(dòng)定位

制作網(wǎng)頁(yè)時(shí)，CSS可以使用定位屬性將一個(gè)元素精確地放在頁(yè)面上指定位置。元素的定位屬性由定位模式和位置屬性（也稱(chēng)邊偏移）兩部分構(gòu)成。在CSS中，position屬性用來(lái)定義元素的定位模式，其常用的屬性值有五個(gè)：1.定位屬性值描述static靜態(tài)定位（默認(rèn)定位方式）relative相對(duì)定位，相對(duì)于其原標(biāo)準(zhǔn)文檔流的位置進(jìn)行定位absolute絕對(duì)定位，相對(duì)于其上一個(gè)已經(jīng)定位的父元素進(jìn)行定位fixed固定定位，相對(duì)于瀏覽器窗口進(jìn)行定位sticky黏性定位，基于用戶的滾動(dòng)位置來(lái)定位語(yǔ)法格式如下：position:static|relative|absolute|fixed|sticky;7.5浮動(dòng)與定位7.5.2浮動(dòng)定位定位模式僅僅定義了元素的定位方式，而并不能確定元素的具體位置。在CSS中，位置屬性（邊偏移）用來(lái)精確定義定位元素的位置，其取值為不同單位的數(shù)值或百分比，定位屬性包括top、bottom、left和right。1.定位屬性描述值top頂端偏移量，定義元素相對(duì)于其父元素上邊線的距離auto|長(zhǎng)度|百分比|inheritbottom底部偏移量，定義元素相對(duì)于其父元素下邊線的距離auto|長(zhǎng)度|百分比|inheritleft左側(cè)偏移量，定義元素相對(duì)于其父元素左邊線的距離auto|長(zhǎng)度|百分比|inheritright右側(cè)偏移量，定義元素相對(duì)于其父元素右邊線的距離auto|長(zhǎng)度|百分比|inherit因此，定位模式要和邊偏移搭配使用。7.5浮動(dòng)與定位7.5.2浮動(dòng)定位靜態(tài)定位就是默認(rèn)的方式，當(dāng)position屬性值為static時(shí)，可以將元素定位于靜態(tài)位置。靜態(tài)位置就是各個(gè)元素在HTML標(biāo)準(zhǔn)文檔流中默認(rèn)的位置。在默認(rèn)狀態(tài)下任何元素都會(huì)以靜態(tài)定位來(lái)確定位置。因此，當(dāng)元素未設(shè)置position屬性時(shí)，會(huì)遵循默認(rèn)值顯示為靜態(tài)位置。在布局時(shí)很少用到。1.定位-靜態(tài)定位static7.5浮動(dòng)與定位7.5.2浮動(dòng)定位普通流定位模型的一部分，定位元素的位置相對(duì)于它在普通流中的位置進(jìn)行移動(dòng)。使用相對(duì)定位的元素不管它是否進(jìn)行移動(dòng)，元素仍要占據(jù)它原來(lái)的位置。移動(dòng)元素會(huì)導(dǎo)致它覆蓋其他的框。1.定位-相對(duì)定位relative例7-30

給div2設(shè)置了相對(duì)定位position:relative屬性，但沒(méi)有定義邊偏移，那么對(duì)元素本身沒(méi)有任何影響。7.5浮動(dòng)與定位7.5.2浮動(dòng)定位1.定位-相對(duì)定位relative例7-31.div2{background-color:#ffcf00;color:gray;width:200px;height:100px;position:relative; /*設(shè)置相對(duì)定位*/left:50px;/*設(shè)置距離左邊偏移位置*/top:20px;/*設(shè)置距離頂部偏移位置*/}

可以看出，div2的左右，上下邊偏移的量是在它原始位置基礎(chǔ)上進(jìn)行移動(dòng)的。并且它還是屬于普通流，并沒(méi)有脫離，所以這個(gè)位置它還是占有的，能看到原來(lái)的位置上有空白。當(dāng)它偏移后，如果和其它元素有重疊，它會(huì)覆蓋其它元素（div2覆蓋了部分div3元素）。7.5浮動(dòng)與定位7.5.2浮動(dòng)定位1.定位-相對(duì)定位relative相對(duì)定位relative的特點(diǎn)：參照元素原來(lái)的位置進(jìn)行移動(dòng)。通過(guò)"left"、"top"、"right"、"bottom"屬性進(jìn)行定位?？梢栽O(shè)置負(fù)值，表示相反方向偏移。元素原有的空間位置保留。元素在移動(dòng)時(shí)會(huì)蓋住其他元素。相對(duì)定位relative的用途：微調(diào)元素。作為絕對(duì)定位元素的容器塊，子絕(absolute)父相(relative)。7.5浮動(dòng)與定位7.5.2浮動(dòng)定位絕對(duì)定位使元素的位置與文檔流無(wú)關(guān)，也不占據(jù)文檔流空間，普通流中的元素布局就像絕對(duì)定位元素不存在一樣。絕對(duì)定位是元素相對(duì)于已經(jīng)定位（相對(duì)、絕對(duì)或固定定位）的最近的祖先元素進(jìn)行定位。若沒(méi)有已定位的最近的祖先元素，則依據(jù)瀏覽器窗口左上角（body）進(jìn)行定位。1.定位-絕對(duì)定位absolute7.5浮動(dòng)與定位7.5.2浮動(dòng)定位絕對(duì)定位absolute的特點(diǎn)：如果沒(méi)有祖先元素或祖先元素沒(méi)有定位，則以瀏覽器為準(zhǔn)進(jìn)行定位。如果祖先元素有定位（相對(duì)、絕對(duì)、固定），則以離自己最近的祖先元素作為參考點(diǎn)移動(dòng)。通過(guò)"left"、"top"、"right"、"bottom"屬性進(jìn)行定位。元素完全脫離文檔流，原有位置不再保留。元素在移動(dòng)時(shí)會(huì)覆蓋頁(yè)面上其他元素，可以通過(guò)設(shè)置z-index屬性來(lái)控制這些元素的堆放次序。z-index的屬性值可以是正整數(shù)、負(fù)數(shù)或0，默認(rèn)值auto，數(shù)值越大，盒子越靠上。注意：定位時(shí)以最近的已經(jīng)定位的祖先元素為準(zhǔn)，不一定是父親。1.定位-絕對(duì)定位absolute7.5浮動(dòng)與定位7.5.2浮動(dòng)定位固定定位與絕對(duì)定位類(lèi)似，也是脫離文檔流。二者的不同點(diǎn)是當(dāng)元素的為固定定位時(shí)，元素固定于瀏覽器可視區(qū)的位置，在瀏覽器頁(yè)面滾動(dòng)時(shí)元素的位置不會(huì)改變。1.定位-固定定位fixed7.5浮動(dòng)與定位7.5.2浮動(dòng)定位固定定位fixed的特點(diǎn)：以body為定位時(shí)的對(duì)象，總是根據(jù)瀏覽器的窗口來(lái)進(jìn)行元素的定位。通過(guò)"left"、"top"、"right"、"bottom"屬性進(jìn)行定位。元素完全脫離文檔流，原有位置不再保留。以可視區(qū)域?yàn)闇?zhǔn)，會(huì)一直顯示在可視區(qū)域，屏幕滑動(dòng)也會(huì)顯示在定位的位置。1.定位-固定定位fixed7.5浮動(dòng)與定位7.5.2浮動(dòng)定位粘性定位是基于用戶的滾動(dòng)位置來(lái)定位，粘性定位的元素依賴于用戶的滾動(dòng)，在相對(duì)定位relative與固定定位fixed之間切換。它的行為就像relative；而當(dāng)頁(yè)面滾動(dòng)超出目標(biāo)區(qū)域時(shí)，它的表現(xiàn)就像fixed，它會(huì)固定在目標(biāo)位置。元素定位表現(xiàn)為在跨越特定閾值前為相對(duì)定位，之后為固定定位。這個(gè)特定閾值指的是top、right、bottom或left之一，換言之，指定top、right、bottom或left四個(gè)閾值其中之一，才可使粘性定位生效。否則其行為與相對(duì)定位相同。