×

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

下載文檔

ID：59017042

大小：1.04 MB

頁數(shù)：39頁

時間：2020-09-26

收藏

資源描述：

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

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

<

2、divclass="son2">box2

box3

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

4、n1{background-color:#CCCCFF;float:left}結論：浮動的盒子不再伸展，其寬度為容納內容的最小寬度。浮動的盒子已經(jīng)脫離標準流，它原來的位置由標準流的內容填補。14.1.2設置第2個浮動的div.son1{background-color:#CCCCFF;float:left}.son2{background-color:#FFCCFF;float:left}注意：Box1和box2之間的空白是二者的margin構成的。14.1.3設置第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}結論：實現(xiàn)在h

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

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

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