盒子的浮動與定位ppt課件.ppt

《盒子的浮動與定位ppt課件.ppt》由會員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫。

1、第14章盒子的浮動與定位盒子的浮動在標(biāo)準(zhǔn)流中，一個(gè)塊級元素在水平方向會自動伸展，直到包含他的元素的邊界；而在豎直方向和兄弟元素依次排列，不能并排。CSS中有一個(gè)float屬性，默認(rèn)為none，也就是標(biāo)準(zhǔn)流通常的情況。如果將float設(shè)置為left或者right，元素就會向其父元素的左側(cè)或者右側(cè)靠緊，同時(shí)默認(rèn)的情況下，盒子的寬度不再是伸展，而是收縮，根據(jù)盒子里邊內(nèi)容的寬度來確定。準(zhǔn)備頁面14-01.htm父div子div子div子div子p未設(shè)置浮動，完全按標(biāo)準(zhǔn)流顯示設(shè)置第1個(gè)浮動的div.son1{float:left;}box-2左邊框與box

2、-1左邊框重合，因?yàn)閎ox-1已經(jīng)脫離標(biāo)準(zhǔn)流，標(biāo)準(zhǔn)流中的box-2會頂?shù)絙ox-1的位置，而文字會環(huán)繞box-1排列設(shè)置第2個(gè)浮動的div14-03.htm將box-2的float屬性也設(shè)置為left。box-3的左邊框仍然在box-1的左邊框下邊。box-1與box-2均脫離標(biāo)準(zhǔn)流，它們之間的間隙由二者margin構(gòu)成。設(shè)置第3個(gè)浮動div14-04.htm將box-3的float也設(shè)置為left。改變浮動方向14-05.htm將box-3的float設(shè)置為right如果將瀏覽器調(diào)整變窄，box-3將會被擠到下一行中，但仍然保持向右浮動。調(diào)整浮

3、動對象14-06.htmbox-1保持向左，box-3左浮動，box-2右浮動。將來瀏覽器窗口變窄，box-3先被擠入下一行，這是按照HTML書寫順序來決定的。浮動窗口擠入下一行位置修改14-04.htm將3個(gè)div均設(shè)為左浮動，box-1比box-2略高。調(diào)整瀏覽器變窄，box-3將壓入下一行，但會卡在box-1與box-2的高差處。使用clear清除浮動影響14-07.htm為p元素增加左清除{clear:left;}，即這個(gè)段落左側(cè)不再圍繞著浮動框排列，但仍然受box-3影響。使用clear清除浮動影響14-07.htm如需脫離右方浮動窗口

4、影響，設(shè)置{clear:right;}，因?yàn)橛曳絙ox-3較高，脫離了其影響，自然也脫離了box-1和box-2影響。clear屬性也可設(shè)置為both，同時(shí)清楚左右影響。clear屬性要放到文字所在的盒子里。不是放在浮動的盒子里的。擴(kuò)展盒子高度box-1、2、3均浮動，父div中無文字段落，父div范圍縮為一條。14-08a.htm一個(gè)div的范圍是由它里邊的標(biāo)準(zhǔn)流內(nèi)容決定的，與里邊的浮動內(nèi)容無關(guān)。要讓父div包含3個(gè)浮動盒子，可以在3個(gè)浮動div后增加一個(gè)div實(shí)現(xiàn)。14-08.htm.father.clear{margin:0;padding

5、:0;border:0;clear:both;}內(nèi)部容器水平居中設(shè)置外部容器text-align:center會影響子級容器排列不同瀏覽器支持不同設(shè)置自身容器margin:0auto123