×

第6課 CSS3-盒子浮動與定位ppt課件.ppt

下載文檔

ID：59017042

大?。?.04 MB

頁數(shù)：39頁

時間：2020-09-26

收藏

資源描述：

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

1、第六課CSS-3盒子的浮動與定位用CSS設(shè)置表格樣式第14章盒子的浮動與定位盒子的浮動準(zhǔn)備代碼設(shè)置第1個浮動的div設(shè)置第2個浮動的div設(shè)置第3個浮動的div改變浮動的方向再次改變浮動的方向全部向左浮動使用clear屬性清除浮動的影響擴展盒子的高度盒子的定位靜態(tài)定位相對定位1個子塊的情況2個字塊的情況絕對定位準(zhǔn)備代碼使用絕對定位絕對定位的特殊性質(zhì)固定定位Z-index空間位置盒子的display屬性14.1盒子的浮動準(zhǔn)備代碼：box1

<

2、divclass="son2">box2

box3

這里是浮動外圍文字，這里是浮動外圍文字，這里是浮動外圍文字，這里是浮動外圍文字，這里是浮動外圍文字，這里是浮動外圍文字，。。。。。

4、n1{background-color:#CCCCFF;float:left}結(jié)論：浮動的盒子不再伸展，其寬度為容納內(nèi)容的最小寬度。浮動的盒子已經(jīng)脫離標(biāo)準(zhǔn)流，它原來的位置由標(biāo)準(zhǔn)流的內(nèi)容填補。14.1.2設(shè)置第2個浮動的div.son1{background-color:#CCCCFF;float:left}.son2{background-color:#FFCCFF;float:left}注意：Box1和box2之間的空白是二者的margin構(gòu)成的。14.1.3設(shè)置第3個浮動的div.son1{background-color

5、:#CCCCFF;float:left}.son2{background-color:#FFCCFF;float:left}.son3{background-color:#CC9900;float:left}14.1.4改變浮動的方向.son3{background-color:#CC9900;float:right}14.1.5交換div的位置.son2{background-color:#FFCCFF;float:right}.son3{background-color:#CC9900;float:left}結(jié)論：實現(xiàn)在h

6、tml不做任何改動情況下，調(diào)換盒子的布局位置。14.1.6增加box1的高度，全部向左浮動并調(diào)窄瀏覽器的窗口：注意：Box3被擠壓到下一行，并向左浮動，被box1卡住，因此停留在box2的下方。其后面的標(biāo)準(zhǔn)流則圍繞在box3右邊。14.1.7如何取消文字圍繞浮動的盒子使用clear屬性清除浮動#fatherp{clear:left}#fatherp{clear:both}14.1.8盒子的范圍：由寬度和高度決定盒子的范圍由它里面的標(biāo)準(zhǔn)流內(nèi)容決定，與浮動內(nèi)容無關(guān)。包含浮動div的盒子如果沒有設(shè)置寬度，將不會適應(yīng)高度。#fathe

7、r{width：80%}設(shè)置盒子寬度為瀏覽器窗口的百分比。14.1.9如何使盒子居中#father{width:80%;margin-left:auto;margin-right:auto}autoauto盒子布局練習(xí)son1son2son2-1son2-2son3

8、son3-1son3-2son3-3son4di