CSS盒子模型、浮動與定位

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

2、對p標(biāo)記設(shè)置邊框：1px的實線設(shè)置div標(biāo)記邊框：1px的實線對p標(biāo)記設(shè)置內(nèi)邊距：5px對p標(biāo)記設(shè)置外邊距：5pxv分析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-topBorder-topPadding-topcontent “盒子”與“模型”的概念探究Margin-top盒子模型盒子的寬(高)度：內(nèi)容+內(nèi)邊距+邊框+外邊距邊框：border內(nèi)邊距：padding外邊

3、距：margin設(shè)置部分內(nèi)容，從上方開始按順時針方向?qū)?yīng)Border-topPadding-topcontent盒子之間的關(guān)系盒子之間的關(guān)系(test05-05.htm)bodyulullililili標(biāo)準(zhǔn)文檔流塊級元素（block level）li占據(jù)著一個矩形的區(qū)域，并且和相鄰的li依次豎直排列，不會排在同一行中。 ul也具有同樣的性質(zhì)，占據(jù)著一個矩形的區(qū)域，并且和相鄰的ul依次豎直排列，不會排在同一行中。 因此，這類元素稱為“塊級元素”（block level），即它們總是以一個塊的形式表現(xiàn)出來，并且跟同級的兄弟塊依次豎直排列，左右撐滿。哪些標(biāo)記是塊級元素？標(biāo)準(zhǔn)文檔流行內(nèi)元素（inlin

4、e）對于文字這類元素，各個字母之間橫向排列，到最右端自動折行，這就是另一種元素，稱為“行內(nèi)元素”（inline）。哪些標(biāo)記是行內(nèi)元素？ 標(biāo)準(zhǔn)文檔流v標(biāo)準(zhǔn)流：不使用其他排列和定位，按照css默認(rèn)規(guī)定的塊級元素和行內(nèi)元素的排列方式。v判斷各種元素具體的排列位置：從body標(biāo)記開始，逐個查看其包含的子元素，依次把其中的子元素按塊級元素或行內(nèi)元素的方式放到適當(dāng)?shù)奈恢茫峙鋮^(qū)域及設(shè)置格式等，直到所有的元素都檢查一遍與標(biāo)記v與標(biāo)記的區(qū)別(test05-06.html)：標(biāo)記：是一個通用的塊級元素，一般用于放置各種元素方便排版，其他的塊級元素一般具有一定的邏輯語義標(biāo)記：是一個行內(nèi)元素，當(dāng)其他行內(nèi)元素不合適時

5、使用該標(biāo)記，作用與標(biāo)記一樣盒子在標(biāo)準(zhǔn)流中的定位原則盒子在標(biāo)準(zhǔn)流中的定位原則行內(nèi)元素之間的水平margin(test05-07)塊級元素之間的豎直margin(test05-08)嵌套盒子之間的margin(test05-09)行內(nèi)元素之間的行內(nèi)元素之間的margin行內(nèi)元素之間的水平marginv下圖所示為兩個塊并排的情況。塊級元素之間的豎直marginv 如果不是行內(nèi)元素，而是豎直排列的塊級元素，margin的取值情況就會有所不同。v兩個塊級元素之間的距離不是margin-bottom與margin-top的總和，而是兩者中的較大者，如下圖所示。圖圖 塊元素之間的塊元素之間的margin塊級

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

7、的浮動與定位盒子的浮動:float(test05-10.html)設(shè)置第1個浮動.son1 /* 這里設(shè)置son1的浮動方式*/ 將.son1盒子設(shè)置為向左浮動，代碼為： .son1 /* 這里設(shè)置son1的浮動方式*/ float:left; 設(shè)置第設(shè)置第1個個div浮動時的效果：浮動時的效果：標(biāo)準(zhǔn)流中的Box-2的文字在圍繞著Box-1排列，Box-1的寬度不再伸展，是容納下內(nèi)容的最小寬度注：注：Box-2的左邊框與的左邊框與Box-1的左邊框重合，的左邊框重合，Box-1脫離標(biāo)準(zhǔn)流，脫離標(biāo)準(zhǔn)流，Box-2頂?shù)皆瓉眄數(shù)皆瓉鞡ox-1的位置的位置盒子的浮動與定位設(shè)置第2個浮動設(shè)置前兩個設(shè)置前

8、兩個div浮動時的效果：浮動時的效果：Box-2變?yōu)楦鶕?jù)內(nèi)容確定寬度，Box-3的文字圍繞Box-2排列思考：思考：Box-3的的左邊框在哪？左邊框在哪？盒子的浮動與定位設(shè)置第3個浮動設(shè)置第設(shè)置第3個個div浮動時的效果：浮動時的效果：p標(biāo)記中的文字圍繞浮動的盒子排列盒子的浮動與定位改變浮動的方向:box-3為右浮動改變浮動方向后的效果改變浮動方向后的效果 div被擠到下一行時的效果被擠到下一行時的效果 盒子的浮動與定位再次改變浮動的方向：box-2為右浮動，box-3為左浮動交換交換div位置時的效果位置時的效果 div被擠到下一行的效果被擠到下一行的效果全部向左浮動設(shè)置設(shè)置3個個div浮動

9、時的效果浮動時的效果 div擠倒下一行被卡住時的效果擠倒下一行被卡住時的效果使用clear屬性清除浮動的影響設(shè)置浮動后文字環(huán)繞的效果設(shè)置浮動后文字環(huán)繞的效果 清除浮動對左側(cè)影響后的效果：對清除浮動對左側(cè)影響后的效果：對p設(shè)置設(shè)置clear屬性屬性清除浮動對右側(cè)影響后的效果：對清除浮動對右側(cè)影響后的效果：對p設(shè)置設(shè)置clear屬性屬性擴(kuò)展盒子的高度包含浮動包含浮動div的容器將不會適應(yīng)高度：的容器將不會適應(yīng)高度：div的范圍是由它里面的標(biāo)的范圍是由它里面的標(biāo)準(zhǔn)流內(nèi)容決定的，與里面的浮動內(nèi)容無關(guān)準(zhǔn)流內(nèi)容決定的，與里面的浮動內(nèi)容無關(guān)希望實現(xiàn)效果的方法：在希望實現(xiàn)效果的方法：在3個個div后面增加一個

10、后面增加一個div，清除浮動的影響，清除浮動的影響盒子的浮動與定位盒子的定位在CSS中有一個非常重要的屬性position（1）static：這是默認(rèn)的屬性值，也就是該盒子按照標(biāo)準(zhǔn)流（包括浮動方式）進(jìn)行布局。 （2）relative：稱為相對定位，使用相對定位的盒子的位置常以標(biāo)準(zhǔn)流的排版方式為基礎(chǔ)，然后使盒子相對于它在原本的標(biāo)準(zhǔn)位置偏移指定的距離。 相對定位的盒子仍在標(biāo)準(zhǔn)流中，它后面的盒子仍以標(biāo)準(zhǔn)流方式對待它。盒子的浮動與定位屬性position（3）absolute：絕對定位，盒子的位置以它的包含框為基準(zhǔn)進(jìn)行偏移。 絕對定位的盒子從標(biāo)準(zhǔn)流中脫離。 這意味著它們對其后的兄弟盒子的定位沒有影響，

11、其他的盒子就好像這個盒子不存在一樣。（4）fixed：稱為固定定位，它和絕對定位類似，只是以瀏覽器窗口為基準(zhǔn)進(jìn)行定位，也就是當(dāng)拖動瀏覽器窗口的滾動條時，依然保持對象位置不變。靜態(tài)定位(test05-11.html)沒有設(shè)置沒有設(shè)置position屬性時的狀態(tài)屬性時的狀態(tài)相對定位v1一個子塊的情況#block1background-color:#fff0ac;border:1px dashed #000000;padding:10px;position:relative;/* relative相對定位 */left:30px;top:30px;一個一個div設(shè)置為相對定定位后的效果設(shè)置為相對定定

12、位后的效果 以右側(cè)和下側(cè)為基準(zhǔn)設(shè)置相對定定位以右側(cè)和下側(cè)為基準(zhǔn)設(shè)置相對定定位 2兩個子塊的情況設(shè)置為相對定位前的效果設(shè)置為相對定位前的效果 #block1position:relative;bottom:30px;right:30px;兩個兄弟兩個兄弟div的情況下，的情況下，其中一個設(shè)置為相對定位后的效果其中一個設(shè)置為相對定位后的效果絕對定位v各種position屬性都需要通過配合偏移一定的距離來實現(xiàn)定位，而其中核心的問題就是以什么作為偏移的基準(zhǔn)。v使用絕對定位的盒子以它的“最近”的一個“已經(jīng)定位”的祖先元素為基準(zhǔn)進(jìn)行偏移，若沒有已經(jīng)定位的祖先元素，則以瀏覽器窗口為基準(zhǔn)進(jìn)行定位v1創(chuàng)建基礎(chǔ)頁

13、面(test05-12.html)v2使用絕對定位#block2position:absolute;top:0px;right:0px;將父div增加一個定位樣式：#fatherbackground-color:#a0c8ff;border:1px dashed #000000;padding:15px;position:relative;絕對定位設(shè)置絕對定位前的效果設(shè)置絕對定位前的效果 將中間的將中間的div設(shè)置為絕對定位后的效果設(shè)置為絕對定位后的效果 設(shè)置偏移量后的效果設(shè)置偏移量后的效果 將父塊設(shè)置為將父塊設(shè)置為“包含塊包含塊”后的效果后的效果 盒子的浮動與定位z-index空間位置盒子的

14、display屬性用CSS設(shè)置表格樣式控制表格表格中的標(biāo)記設(shè)置表格的邊框、合并美化表格html結(jié)構(gòu)整體設(shè)置單元格樣式斑馬紋效果盒子模型#outerBoxwidth:200px; /*寬度和高度*/height:100px;border:2px black solid; /*4個邊框*/border-left:4px green dashed; /* 左邊框*/border-color:red gray orange blue; /*上 右 下 左*/border-right-color:purple; 盒子模型邊框與背景()#outerBoxwidth:128px;height:128px;border:10px blac