盒子的浮動(dòng)與定位

1、l 盒子的浮動(dòng)l 盒子的定位l Z-index空間位置l 盒子的display屬性本講目標(biāo)本講目標(biāo)新知識(shí)點(diǎn)導(dǎo)入新知識(shí)點(diǎn)導(dǎo)入一切皆為框，如何打破文檔流？如何隨心所欲的排版這些框框、盒子呢？今天我們來(lái)了解網(wǎng)頁(yè)設(shè)計(jì)中重要的部分：盒子的浮動(dòng)盒子的浮動(dòng)盒子的浮動(dòng)盒子的浮動(dòng) l 在標(biāo)準(zhǔn)流中，塊級(jí)元素的盒子都是上下排列，行內(nèi)元素的盒子都是左右排列，如果僅僅按照標(biāo)準(zhǔn)流的方式進(jìn)行排列，就只有這幾種可能性，限制太大。CSS的制訂者也想到了這樣排列限制的問(wèn)題，因此又給出了浮動(dòng)和定位方式進(jìn)行盒子的排列，從而使排版的靈活性大大提高。l 例如：有時(shí)希望相鄰塊級(jí)元素的盒子左右排列（所有盒子浮動(dòng)）或者希望一個(gè)盒子被另一個(gè)盒子

2、中的內(nèi)容所環(huán)繞（一個(gè)盒子浮動(dòng)）做出圖文混排的效果，這時(shí)最簡(jiǎn)單的辦法就是運(yùn)用浮動(dòng)（float）屬性使盒子在浮動(dòng)方式下定位。 l 在標(biāo)準(zhǔn)流中，一個(gè)塊級(jí)元素在水平方向會(huì)自動(dòng)伸展，在它的父元素中占滿整個(gè)一行；而在豎直方向和其他元素依次排列，不能并排，如圖4-62所示。使用“浮動(dòng)”方式后，這種排列方式就會(huì)發(fā)生改變。l CSS中有一個(gè)float屬性，默認(rèn)值為none，也就是標(biāo)準(zhǔn)流通常的情況，如果將float屬性的值設(shè)為left或right，元素就會(huì)向其父元素的左側(cè)或右側(cè)靠緊，同時(shí)盒子的寬度不再伸展，而是收縮，在沒(méi)設(shè)置寬度時(shí)，會(huì)根據(jù)盒子里面的內(nèi)容來(lái)確定寬度。浮動(dòng)的清除浮動(dòng)的清除l clearclear是清除

3、浮動(dòng)屬性，它的取值有是清除浮動(dòng)屬性，它的取值有l(wèi)eftleft、rightright、bothboth和和nonenone（默認(rèn)（默認(rèn)值），如果設(shè)置盒子的清除浮動(dòng)屬性值），如果設(shè)置盒子的清除浮動(dòng)屬性clearclear值為值為leftleft或或rightright，表示該，表示該盒子的左邊或右邊不允許有浮動(dòng)的對(duì)象。值設(shè)置為盒子的左邊或右邊不允許有浮動(dòng)的對(duì)象。值設(shè)置為bothboth則表示兩邊都則表示兩邊都不允許有浮動(dòng)對(duì)象，因此該盒子將會(huì)在瀏覽器中另起一行顯示不允許有浮動(dòng)對(duì)象，因此該盒子將會(huì)在瀏覽器中另起一行顯示 l clear屬性既可以用在未浮動(dòng)的元素上，也可以用在浮動(dòng)的元素上，如果對(duì)Box

4、-3同時(shí)設(shè)置清除浮動(dòng)和浮動(dòng)，即：l .son3clear:both; float:left;l 總結(jié)：清除浮動(dòng)是清除其它盒子浮動(dòng)對(duì)該元素的影響，而設(shè)置浮動(dòng)是讓元素自身浮動(dòng)，兩者并不矛盾，因此可同時(shí)設(shè)置元素清除浮動(dòng)和浮動(dòng) 浮動(dòng)的應(yīng)用舉例浮動(dòng)的應(yīng)用舉例l1 圖文混排及首字下沉效果等l2菜單的豎橫轉(zhuǎn)換對(duì)li設(shè)置浮動(dòng)即可實(shí)現(xiàn)l 3 制作欄目框標(biāo)題欄 標(biāo)題欄的左端是欄目標(biāo)題，右端是“更多”之類的鏈接。如何將文字分別放在一個(gè)盒子的左右兩端呢？ 最簡(jiǎn)單的辦法就是設(shè)置左邊的文字左浮動(dòng)，右邊的文字右浮動(dòng)。盒子的定位盒子的定位CSS中定位的概念中定位的概念廣義的“定位”：在網(wǎng)頁(yè)排版中，如何將一個(gè)盒子放置在某個(gè)位置

5、上。狹義的“定位”：CSS中有一個(gè)非常重要的屬性position，之前我們用過(guò)該屬性，實(shí)現(xiàn)了背景圖片的定位在本講中，我們介紹的是廣義的“定位”：默認(rèn)的屬性值默認(rèn)的屬性值絕對(duì)定位絕對(duì)定位相對(duì)定位相對(duì)定位position定位定位-1l position定位分為：絕對(duì)定位與相對(duì)定位。定位分為：絕對(duì)定位與相對(duì)定位。l position從字面意思上看就是指定塊的位置，即從字面意思上看就是指定塊的位置，即塊相對(duì)于塊相對(duì)于其父塊的位置和相對(duì)于它自身應(yīng)該在位置其父塊的位置和相對(duì)于它自身應(yīng)該在位置。常用屬性：常用屬性： position:absolute; /絕對(duì)定位絕對(duì)定位 position:relative

6、; /相對(duì)定位相對(duì)定位 left:50px; /塊原點(diǎn)距離父塊左側(cè)距離塊原點(diǎn)距離父塊左側(cè)距離 top:50px; /塊原點(diǎn)距離父塊頂部距離塊原點(diǎn)距離父塊頂部距離 z-index:1; /深度定位深度定位案例演示position定位定位-2l 通過(guò)上述幾個(gè)案例的演示，總結(jié)如下：通過(guò)上述幾個(gè)案例的演示，總結(jié)如下： 1、position、top、left、z-index四個(gè)屬性配合使用；四個(gè)屬性配合使用；2、絕對(duì)定位時(shí)，、絕對(duì)定位時(shí)，該元素懸浮于頁(yè)面之上，不再占據(jù)頁(yè)面位置；該元素懸浮于頁(yè)面之上，不再占據(jù)頁(yè)面位置；3、絕對(duì)定位的基準(zhǔn)點(diǎn)是以父塊為標(biāo)準(zhǔn)，從而界定、絕對(duì)定位的基準(zhǔn)點(diǎn)是以父塊為標(biāo)準(zhǔn)，從而界定t

7、op、left值；值；4、相對(duì)定位時(shí)，、相對(duì)定位時(shí)，元素依然占據(jù)自己原始頁(yè)面位置，只不過(guò)看上去元素依然占據(jù)自己原始頁(yè)面位置，只不過(guò)看上去位置相對(duì)于自身發(fā)生了偏移；位置相對(duì)于自身發(fā)生了偏移；5、相對(duì)定位的基準(zhǔn)點(diǎn)是以原始位置的原點(diǎn)為標(biāo)準(zhǔn)，從而界定、相對(duì)定位的基準(zhǔn)點(diǎn)是以原始位置的原點(diǎn)為標(biāo)準(zhǔn)，從而界定top、left值；值；6、z-index值決定了絕對(duì)定位時(shí)，元素距離頁(yè)面有多遠(yuǎn)，值越大，值決定了絕對(duì)定位時(shí)，元素距離頁(yè)面有多遠(yuǎn)，值越大，距離頁(yè)面越遠(yuǎn)。距離頁(yè)面越遠(yuǎn)。網(wǎng)頁(yè)的固定寬度網(wǎng)頁(yè)的固定寬度1-3-1布局布局 l在默認(rèn)情況下，div作為塊級(jí)元素是占滿整行從上到下依次排列的，但在網(wǎng)頁(yè)的分欄布局中，例如1-3-1固定寬度布局，我們希望中間三欄（三個(gè)div盒子）從左到右并列排列，這時(shí)就需要將這三個(gè)div盒子都設(shè)置為浮動(dòng)。l但三個(gè)div盒子都浮動(dòng)后，只能浮動(dòng)到窗口的左邊或右邊，無(wú)法在瀏覽器中居中，因此需要在三個(gè)div盒子外面再套一