CSS盒子模型、浮動與定位

1、CSS -盒子模型、浮動與定位 “盒子”與“模型”的概念探究 v頁面中的元素都由html標記定義 html, head, title, style, link, body等 h1h6, p, marquee, ol, li, ul, bgsound, a, div(區(qū) 塊容器標記), span(容器標記), frameset, table, tr, td等 img, br, hr, frame等 v所有的元素都相當于一個盒子，占據(jù)一定的 頁面空間(test05.html) v一個頁面由各個盒子組成 “盒子”與“模型”的概念探究 v在p標記外加div標記(test05-01.html) v觀察以

2、下css設置的頁面效果 對p標記設置邊框：1px的實線 設置div標記邊框：1px的實線 對p標記設置內(nèi)邊距：5px 對p標記設置外邊距：5px v分析p實際的占據(jù)空間寬度和高度: “盒子”與“模型”的概念探究 v分析p實際的占據(jù)空間寬度和高度: 寬度：5px+1px+5px+內(nèi)容寬度+5px+1px+5px 高度：5px+1px+5px+內(nèi)容高度+5px+1px+5px 寬度(或高度)： 內(nèi)容+內(nèi)邊距+ 邊框+外邊距 Margin-top Border-top Padding-top content “盒子”與“模型”的概念探究 Margin-top 盒子模型 盒子的寬(高)度：內(nèi)容+內(nèi)邊距

3、+邊框+外邊距 邊框：border 內(nèi)邊距：padding 外邊距：margin 設置部分內(nèi)容， 從上方開始按 順時針方向?qū)?Border-top Padding-top content 盒子之間的關(guān)系 盒子之間的關(guān)系 (test05-05.htm) body ulul lililili 標準文檔流 塊級元素（block level） li占據(jù)著一個矩形的區(qū)域，并且和相鄰的li依次豎直排列， 不會排在同一行中。 ul也具有同樣的性質(zhì)，占據(jù)著一個矩形的區(qū)域，并且 和相鄰的ul依次豎直排列，不會排在同一行中。 因此，這類元素稱為“塊級元素”（block level）， 即它們總是以一個塊的形式表

4、現(xiàn)出來，并且跟同級的 兄弟塊依次豎直排列，左右撐滿。 哪些標記是塊級元素？ 標準文檔流 行內(nèi)元素（inline） 對于文字這類元素，各個字母之間橫向排列， 到最右端自動折行，這就是另一種元素，稱為 “行內(nèi)元素”（inline）。 哪些標記是行內(nèi)元素？ 標準文檔流 v標準流：不使用其他排列和定位，按照css默認 規(guī)定的塊級元素和行內(nèi)元素的排列方式。 v判斷各種元素具體的排列位置： 從body標記開始，逐個查看其包含的子元素， 依次把其中的子元素按塊級元素或行內(nèi)元素的 方式放到適當?shù)奈恢茫峙鋮^(qū)域及設置格式等， 直到所有的元素都檢查一遍 與標記 v與標記的區(qū)別(test05-06.html)： 標

5、記：是一個通用的塊級元素，一般用于放 置各種元素方便排版，其他的塊級元素一般具 有一定的邏輯語義 標記：是一個行內(nèi)元素，當其他行內(nèi)元素 不合適時使用該標記，作用與標記一樣 盒子在標準流中的定位原則 盒子在標準流中的定位原則 行內(nèi)元素之間的水平margin(test05-07) 塊級元素之間的豎直margin(test05-08) 嵌套盒子之間的margin(test05-09) 行內(nèi)元素之間的行內(nèi)元素之間的margin 行內(nèi)元素之間的水平margin v下圖所示為兩個塊并排的情況。 塊級元素之間的豎直margin v 如果不是行內(nèi)元素，而是豎直排列的塊級元素， margin的取值情況就會有所不

6、同。 v兩個塊級元素之間的距離不是margin-bottom與 margin-top的總和，而是兩者中的較大者，如下圖 所示。 圖圖 塊元素之間的塊元素之間的margin 塊級元素之間的豎直margin v這個現(xiàn)象稱為margin的“塌陷”（或稱為“合并”） 現(xiàn)象，意思是說較小的margin塌陷（合并）到了較 大的margin中。 嵌套盒子之間的margin v 除了上面提到的行內(nèi)元素間隔和塊級元素間 隔這兩種關(guān)系外，還有一種位置關(guān)系，它的 margin值對CSS排版也有重要的作用，這就 是父子關(guān)系。 v當一個塊包含在另一個塊中時， 便形成了典型的父子關(guān)系。 vmargin的值也可以設置為負數(shù)

7、 v其中子塊的margin將以父塊的內(nèi)容為參考， 如下圖所示。 父子塊的父子塊的margin 圖圖 父子塊的父子塊的margin 圖圖 IE與與Firefox對待父對待父height的不同處理的不同處理 盒子的浮動與定位 盒子的浮動:float(test05-10.html) 設置第1個浮動 .son1 /* 這里設置son1的浮動方式*/ 將.son1盒子設置為向左浮動，代碼為： .son1 /* 這里設置son1的浮動方式*/ float:left; 設置第設置第1個個div浮動時的效果：浮動時的效果：標準流中的Box-2的文字在圍繞著 Box-1排列，Box-1的寬度不再伸展，是容納下內(nèi)

8、容的最小寬度 注：注：Box-2的左邊框與的左邊框與 Box-1的左邊框重合，的左邊框重合， Box-1脫離標準流，脫離標準流， Box-2頂?shù)皆瓉眄數(shù)皆瓉鞡ox-1 的位置的位置 盒子的浮動與定位 設置第2個浮動 設置前兩個設置前兩個div浮動時的效果：浮動時的效果：Box-2變?yōu)楦鶕?jù)內(nèi)容確定寬度， Box-3的文字圍繞Box-2排列 思考：思考：Box-3的的 左邊框在哪？左邊框在哪？ 盒子的浮動與定位 設置第3個浮動 設置第設置第3個個div浮動時的效果：浮動時的效果：p標記中的文字圍繞浮動的盒子排列 盒子的浮動與定位 改變浮動的方向:box-3為右浮動 改變浮動方向后的效果改變浮動方向

9、后的效果 div被擠到下一行時的效果被擠到下一行時的效果 盒子的浮動與定位 再次改變浮動的方向：box-2為右浮動，box-3為左浮動 交換交換div位置時的效果位置時的效果 div被擠到下一行的效果被擠到下一行的效果 全部向左浮動 設置設置3個個div浮動時的效果浮動時的效果 div擠倒下一行被卡住時的效果擠倒下一行被卡住時的效果 使用clear屬性清除浮動的影響 設置浮動后文字環(huán)繞的效果設置浮動后文字環(huán)繞的效果 清除浮動對左側(cè)影響后的效果：對清除浮動對左側(cè)影響后的效果：對p設置設置clear屬性屬性 清除浮動對右側(cè)影響后的效果：對清除浮動對右側(cè)影響后的效果：對p設置設置clear屬性屬性

10、擴展盒子的高度 包含浮動包含浮動div的容器將不會適應高度：的容器將不會適應高度：div的范圍是由它里面的標的范圍是由它里面的標 準流內(nèi)容決定的，與里面的浮動內(nèi)容無關(guān)準流內(nèi)容決定的，與里面的浮動內(nèi)容無關(guān) 希望實現(xiàn)效果的方法：在希望實現(xiàn)效果的方法：在3個個div后面增加一個后面增加一個div，清除浮動的影響，清除浮動的影響 盒子的浮動與定位 盒子的定位 在CSS中有一個非常重要的屬性position （1）static：這是默認的屬性值，也就是該盒子 按照標準流（包括浮動方式）進行布局。 （2）relative：稱為相對定位，使用相對定位的 盒子的位置常以標準流的排版方式為基礎，然 后使盒子相對

11、于它在原本的標準位置偏移指定 的距離。 相對定位的盒子仍在標準流中，它后面的盒 子仍以標準流方式對待它。 盒子的浮動與定位 屬性position （3）absolute：絕對定位，盒子的位置以它的包 含框為基準進行偏移。 絕對定位的盒子從標準流中脫離。 這意味著它們對其后的兄弟盒子的定位沒有影 響，其他的盒子就好像這個盒子不存在一樣。 （4）fixed：稱為固定定位，它和絕對定位類似， 只是以瀏覽器窗口為基準進行定位，也就是當 拖動瀏覽器窗口的滾動條時，依然保持對象位 置不變。 靜態(tài)定位(test05-11.html) 沒有設置沒有設置position屬性時的狀態(tài)屬性時的狀態(tài) 相對定位 v1一

12、個子塊的情況 #block1 background-color:#fff0ac; border:1px dashed #000000; padding:10px; position:relative;/* relative相對定位 */ left:30px; top:30px; 一個一個div設置為相對定定位后的效果設置為相對定定位后的效果 以右側(cè)和下側(cè)為基準設置相對定定位以右側(cè)和下側(cè)為基準設置相對定定位 2兩個子塊的情況 設置為相對定位前的效果設置為相對定位前的效果 #block1 position:relative; bottom:30px; right:30px; 兩個兄弟兩個兄弟div

13、的情況下，的情況下， 其中一個設置為相對定位后的效果其中一個設置為相對定位后的效果 絕對定位 v各種position屬性都需要通過配合偏移一定的 距離來實現(xiàn)定位，而其中核心的問題就是以 什么作為偏移的基準。 v使用絕對定位的盒子以它的“最近”的一個 “已經(jīng)定位”的祖先元素為基準進行偏移， 若沒有已經(jīng)定位的祖先元素，則以瀏覽器窗 口為基準進行定位 v1創(chuàng)建基礎頁面(test05-12.html) v2使用絕對定位 #block2 position:absolute; top:0px; right:0px; 將父div增加一個定位樣式： #father background-color:#a0c8

14、ff; border:1px dashed #000000; padding:15px; position:relative; 絕對定位 設置絕對定位前的效果設置絕對定位前的效果 將中間的將中間的div設置為絕對定位后的效果設置為絕對定位后的效果 設置偏移量后的效果設置偏移量后的效果 將父塊設置為將父塊設置為“包含塊包含塊”后的效果后的效果 盒子的浮動與定位 z-index空間位置 盒子的display屬性 用CSS設置表格樣式 控制表格 表格中的標記 設置表格的邊框、合并 美化表格 html結(jié)構(gòu) 整體設置 單元格樣式 斑馬紋效果 盒子模型 #outerBox width:200px; /*寬度和高度*/ height:100px; border:2px black solid; /*4個邊框*/ border-left:4px green dashed; /* 左邊框*/ border-color:red gray orange blue; /*上 右 下 左 */ border-right-color:purple; 盒子模型 邊框與背景() #outerBox width:128px; height:128px; border:10px black d