HTML第5章-框模型與網(wǎng)頁布局課件

1、框模型與網(wǎng)頁布局框模型與網(wǎng)頁布局5.1 盒模型5.2 表格與列表樣式5.3 Display5.4 浮動與定位5.5 布局5.1 盒模型1. 盒模型2. 表格與列表樣式3. Display4. 浮動與定位5. 布局盒模型（框模型）CSS中，HTML文檔中的每個元素都會生成一個或多個矩形框，這稱為元素框。各元素框中心有一個內(nèi)容區(qū)，這個內(nèi)容區(qū)周圍有可選的內(nèi)邊距、邊框和外邊距之所以被認(rèn)為是可選的，原因是它們的寬度可以設(shè)置為0，實際上這樣做就從元素框去除了這些項可以應(yīng)用多種屬性到這些元素框中盒模型-元素框的組成下圖為元素框的組成，其中內(nèi)邊緣和外邊緣并不會顯示在瀏覽器中空白區(qū)外邊緣邊框區(qū)內(nèi)邊緣邊框邊椽內(nèi)容

2、區(qū)填充區(qū)填充邊椽完整的盒模型盒模型多種長度的定義內(nèi)容區(qū)使用width和height屬性指定元素內(nèi)容區(qū)的寬和高這兩個屬性能應(yīng)用于塊級別和無文本的內(nèi)嵌元素，不能應(yīng)用于內(nèi)嵌文本（也叫不可替換的）元素屬性名稱：width屬性值：長度計量值 | 百分比值 | auto默認(rèn)值：auto適用對象：塊級別元素和可替換的內(nèi)嵌元素是否可繼承：否屬性名稱：height屬性值：長度計量值 | 百分比值 | auto默認(rèn)值：auto適用對象：塊級別元素和可替換的內(nèi)嵌元素是否可繼承：否內(nèi)容區(qū)-說明通常，塊元素的寬和高由瀏覽器自動計算它會跟瀏覽器窗口或其他塊元素容器一樣寬，高度正好容納內(nèi)容也可以使用 width 和 hei

3、ght 屬性設(shè)置元素內(nèi)容區(qū)域為一個特定值em、像素和百分比值是最常用的度量元素大小的方法注意寬和高只應(yīng)用到內(nèi)容區(qū)域元素框的總寬度=2*填充+2*邊框+2*空白邊+寬度 元素框的總高度=2*填充+2*邊框+2*空白邊+高度一般不指定元素的高度，允許其基于文本和其他內(nèi)容自動計算如果指定高度，請確?？紤]到內(nèi)容不適用的情況舉例(width-height)內(nèi)容區(qū)-處理溢出當(dāng)元素設(shè)置得太小，容不下內(nèi)容時，可使用overflow 屬性來指定如何處理內(nèi)容不適合的問題屬性名稱：overflow屬性值：visible | hidden | scroll | auto默認(rèn)值：visible適用對象：塊級別元素和可替

4、換的內(nèi)嵌元素(比如img)是否可繼承：否舉例(overflow)內(nèi)邊距-填充(padding)內(nèi)邊距是內(nèi)容區(qū)和邊框之間的空間，也稱為填充添加內(nèi)邊距很有用，它給內(nèi)容一點空間，防止背景的邊框或邊緣與文本沖撞可以給元素的每個方向添加內(nèi)邊距，也可以一次添加所有邊的padding屬性內(nèi)邊距-屬性屬性名稱：padding屬性值：長度計量值 | 百分比值 | auto默認(rèn)值：0適用對象：所有元素是否可繼承：否屬性名稱：padding-top、padding-right、padding-bottom、padding-left屬性值：長度計量值 | 百分比值 | auto默認(rèn)值：0適用對象：所有元素是否可繼承：

5、否舉例(padding)內(nèi)邊距-快捷屬性快捷padding屬性padding屬性添加元素周圍所有的填充可以給1個padding屬性指定四個、三個、兩個或一個值1個值 padding: 10px; 應(yīng)用于所有的方向2個值 padding: 10px 5px; 第一個值應(yīng)用于上和下，第二值應(yīng)用于右和左3個值 padding: 10px 6px 4px;第一個值應(yīng)用于上，第二個值應(yīng)用于右和左，第三個值 應(yīng)用于下4個值 padding: 10px 6px 4px 10px; 依次順時針應(yīng)用于上、右、下、左。舉例(padding-direction)邊框(border)邊框是圍繞元素內(nèi)容區(qū)和內(nèi)邊距的一條

6、或多條線每個邊框都有3個方面：邊框樣式或外觀( border-style )邊框?qū)挾然虼旨?xì)( border-width )邊框顏色( border-color )其中，邊框樣式是最重要的沒有指定邊框樣式，邊框?qū)⒉淮嬖冢ū仨毬暶鬟吙虻臉邮?，否則其他邊框?qū)傩詫⒈缓雎裕┛墒褂枚ㄏ蜻吙驅(qū)傩詰?yīng)用一個樣式到一個方向，也可用快捷屬性border-style 一次應(yīng)用到四個方向邊框-樣式屬性名稱：border-style屬性值：none|dotted|dashed|solid|double|groove|ridge|inset|outset默認(rèn)值：none適用對象：所有元素是否可繼承：否屬性名稱：border

7、-top-style、 border-right-style 、 border-bottom-style 、 border-left-style屬性值：none|dotted|dashed|solid|double|groove|ridge|inset|outset默認(rèn)值：none適用對象：所有元素是否可繼承：否舉例(border-style)邊框-寬度可給每個方向應(yīng)用一個單向?qū)傩?，也可使用快捷屬性border-width 依順時針方向一次指定多個方向?qū)傩悦Q：border-width屬性值：長度單位 | thin | medium | thick默認(rèn)值： medium適用對象：所有元素是否可

8、繼承：否屬性名稱：border-top-width、 border-right-width 、 border-bottom-width、 border-left-width屬性值：長度單位 | thin | medium| thick默認(rèn)值：medium適用對象：所有元素是否可繼承：否舉例(border-width)邊框-顏色用相同的方法指定：使用專向?qū)傩曰騜order-color快捷屬性指定邊框顏色后，將覆蓋掉color屬性設(shè)置的前景色屬性名稱：border-color屬性值：顏色名或RGB值 | transparent默認(rèn)值：元素的color屬性值適用對象：所有元素是否可繼承：否屬性名稱：

9、border-top-color、 border-right-color 、 border-bottom-color、 border-left-color屬性值：顏色名或RGB值 | transparent默認(rèn)值：元素的color屬性值適用對象：所有元素是否可繼承：否舉例(border-color)邊框-聯(lián)合使用style、width和color在一個聲明中同時提供style、width和color屬性屬性名：border-top、border-right、border-bottom、border-left屬性值：border-style border-width border-color適用

10、對象：所有元素是否可繼承：否屬性名：border屬性值：border-style border-width border-color默認(rèn)值：每個屬性的默認(rèn)值適用對象：所有元素是否可繼承：否舉例(border)外邊距添加在邊框外面可選數(shù)量的空間，稱為外邊距，也稱空白邊(margin)外邊距保證了元素間互不沖撞或不沖撞瀏覽器窗口的邊線屬性名：margin屬性值：長度計量值 | 百分比值 | auto默認(rèn)值：auto適用對象：所有元素是否可繼承：否屬性名：margin-top，margin-right，margin-bottom，margin-left屬性值：長度計量值 | 百分比值 | auto默

11、認(rèn)值：auto適用對象：所有元素是否可繼承：否舉例(margin)外邊距-空白邊行為重疊空白邊上下空白邊重疊時，不是簡單的重疊，而是應(yīng)用最大的指定值上下空白邊不重疊的只可以是浮動或絕對位置的元素內(nèi)嵌元素的空白邊可以應(yīng)用上下空白邊到內(nèi)嵌元素，但它不會在元素上下添加垂直空間，行高也不會改變負(fù)空白邊margin可指定負(fù)數(shù)值，當(dāng)應(yīng)用負(fù)空白邊時，內(nèi)容、填充和邊框?qū)⑾蛳喾吹姆较蛞苿颖砀窈土斜順邮奖砀竦臉邮綄傩越o表格中的內(nèi)容指定樣式的屬性單元格中內(nèi)容的外觀和對齊方式，使用格式化文本和背景等屬性處理表格和單元格本身樣式，使用padding、margin和border等屬性專門為表格創(chuàng)建的屬性分散的和折疊的邊框

12、屬性名稱：border-collapse屬性值：separate | collapse默認(rèn)值：separate適用對象：表格和表格嵌入元素是否可繼承：是分散邊框模型可以指定想要的單元格的間距值，使用border-spacing屬性border-spacing屬性值：長度值 長度值默認(rèn)值：0適用對象：表格和表格嵌入元素是否可繼承：是有兩個長度值，其中水平值在前，并應(yīng)用于列間，垂直值在后，并應(yīng)用于行間；如果只提供一個值，那么該值用于水平和垂直兩個方向折疊邊框模型折疊邊框模型單元格之間只會顯示一個邊框當(dāng)相鄰單元格邊框樣式不同時如果任意一個單元格的border-style屬性被設(shè)置為hidden值，那

13、么邊框?qū)⒉粫@示邊框的寬度：寬邊優(yōu)于窄邊如果所有其他屬性值都相等，就要歸結(jié)為樣式的問題了，邊框樣式按優(yōu)先級從大到小排列：double, solid, dashed, dotted, ridge, outset, groove和inset舉例(border-separate-collapse)空單元格在分散邊框的表格中，利用empty-cells屬性，可決定是否讓單元格顯示背景和邊框?qū)傩悦Q：empty-cells屬性值：show | hide默認(rèn)值：show適用對象：單元格元素是否可繼承：是一個“空”的單元格，可能包含回車和空白字符舉例(empty-cells)改變列表圓點和數(shù)字CSS提供一些

14、屬性，允許作者選擇標(biāo)記符號的類型和位置，或者用自定義圖像替換圓點選擇標(biāo)記符號屬性名：list-style-type屬性值：none|disc|circle|square|decimal|decimal-leading-zero|lower-alpha|upper-alpha|lower-latin|upper-latin|lower-roman|upper-roman|lower-greek默認(rèn)值：disc適用對象：ul、ol 和 li 元素(或者display屬性值為list-item的元素)是否可繼承：是舉例(list-style-type)標(biāo)記符號位置list-style-positio

15、n屬性允許將圓點拉回內(nèi)容區(qū)域，使標(biāo)記符號進(jìn)入列表內(nèi)容中屬性名稱： list-style-position屬性值：inside | outside默認(rèn)值：outside適用對象：ul、ol 和 li 元素(或者display屬性值為list-item的元素)是否可繼承：是舉例(list-style-position)創(chuàng)建自己的圓點利用list-style-image屬性將自己的圖像作為圓點屬性名稱：list-style-image屬性值： | none默認(rèn)值：none適用對象：ul、ol 和 li 元素（或者display屬性值為list-item的元素）是否可繼承：是url 總是相對于樣式表解

16、析舉例(list-style-image)list-style快捷屬性屬性名：list-style屬性值：list-style-type list-style-position list-style-image默認(rèn)值：見單獨屬性適用對象：ul、ol 和 li 元素（或者 display 屬性值為 list-item 的元素）是否可繼承：是例：ul list-style: url(smile.gif) disc outside; ul list-style: disc outside url(smile.gif); ul list-style: url(smile.gif) disc;displ

17、ay屬性display 屬性規(guī)定元素在布局中應(yīng)該生成的框的類型屬性名：display屬性值：inline | block | list-item | run-in | inline-block|table|inline-table|table-row-group|table-header-group|table-footer-group|table-row|table-column-group|table-column|table-cell|table-caption|none默認(rèn)值：inline適用對象：所有元素（常用于ul、ol、li、a元素）是否可繼承：否使用列表作為導(dǎo)航有兩種方法可以將

18、列表變?yōu)樗綏l讓列表項顯示為內(nèi)聯(lián)元素浮動，將列表項和鏈接排成一行內(nèi)聯(lián)列表項 (例：list-nav1)使用 display 屬性，使列表項元素表現(xiàn)為內(nèi)聯(lián)元素浮動的列表項 (例：list-nav2)使用 float 屬性將列表項一個接一個地排成一行當(dāng)多個連續(xù)項浮動到一邊時，它們將沿著邊堆積起來方法舉例去掉圓點（list-style：none）浮動每個列表項（float：left）使錨元素（a）顯示為塊元素，從而可以設(shè)置尺寸（display：block）使用各種樣式來格式化鏈接CSS滑動效果:hover偽類，當(dāng)鼠標(biāo)位于鏈接上方時產(chǎn)生滑過效果交替背景圖像背景圖像移位：把所有的滑過狀態(tài)放在一幅圖像上，

19、然后為每種鏈接狀態(tài)改變背景位置示例：other1other4浮動和定位浮動與定位浮動一個元素是指左右移動元素，并允許接著的文本環(huán)繞它；定位是指以像素精確指定元素在網(wǎng)頁上的位置。普通流CSS 布局模型中，文本元素依源碼中的順序從上到下排列，然后從左到右；塊元素一個累一個，填滿瀏覽器窗口或其他窗口元素的所有可用寬度；內(nèi)嵌元素和文本字符一行接一行的填滿塊元素。當(dāng)窗口或窗口元素重置大小的時候，塊元素隨著新寬度增大或縮小，而內(nèi)嵌內(nèi)容重新流動來適應(yīng)寬度。abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz浮動屬性名：float屬性值：left | rig

20、ht | none | inherit默認(rèn)值：none適用對象：所有元素是否可繼承：否float屬性盡可能遠(yuǎn)的向左或向右移動元素，允許后面的內(nèi)容環(huán)繞它。浮動是現(xiàn)代基于CSS網(wǎng)頁設(shè)計的主要工具之一，用于創(chuàng)建多列布局、列表中的導(dǎo)航工具條和無表格的類表格的排列等。舉例 float1-float3浮動總結(jié)浮動元素像水流中的島上例中，圖像從普通流的位置中移除，同時繼續(xù)影響周圍內(nèi)容；接下來的段落文本重新流動來給浮動的img元素提供空間。浮動元素在包含元素的內(nèi)容區(qū)中浮動圖像位于包含它的段落的內(nèi)容區(qū)中；它不能擴(kuò)展到段落的填充區(qū)?？瞻走呉脖话ㄕ麄€元素盒子，都在浮動。浮動示例利用CSS，所有的(X)HTML元素

21、都可能浮動。浮動內(nèi)嵌文本元素 總是需要提供浮動文本元素的寬度，例：float4浮動內(nèi)嵌元素表現(xiàn)為塊元素，即一旦浮動內(nèi)嵌元素，它就遵循塊級別元素的顯示規(guī)則。例：float5浮動塊元素 例：float6，例：float7 必須提供浮動塊元素的寬度，浮動元素不高過它們在源碼中的參照物浮動多個元素浮動元素將位于空間允許的，盡可能左（或右）且相對較高的地方。例：float8清除浮動元素取消文本環(huán)繞，恢復(fù)平常布局；可通過清除浮動元素下面開始排列的元素來完成；應(yīng)用clear屬性到一個元素來防止元素緊接著浮動元素出現(xiàn)，并強(qiáng)制它從下一個可用的浮動元素下面的空間開始。clear屬性屬性值：left | right

22、 | both | none | inherit默認(rèn)值：none應(yīng)用對象：僅塊級元素是否可繼承：否例：float9, float10定位定位的類型屬性名：position屬性值：static | relative | absolute | fixed默認(rèn)值：static適用對象：所有元素是否可繼承：否position屬性指示元素將被定位，并指定定位方法定位屬性值的說明static普通的定位方案，元素將如同在普通文檔流中一樣定位relative相對定位是相對于元素在流中的原始位置進(jìn)行移動定位它將保留元素在普通流中占據(jù)的空間absolute絕對定位的元素從文檔流中完整的移除，并且相對于容器元素定位

23、它所占據(jù)的空間將被關(guān)閉它對周圍元素的布局沒有任何影響fixed固定定位的特性是元素將呆在窗口的一個位置指定偏移屬性確定了定位方法后，真正要做的是指定四個偏移屬性屬性：top、right、bottom、left屬性值：長度計量值 | 百分比值 | auto默認(rèn)值：auto適用對象：可定位元素（即元素的position屬性為relative，absolute或fixed）是否可繼承：否這些值提供了元素與相應(yīng)邊距離的偏移屬性相對定位(relative)相對定位是相對于元素在流中的原始位置移動；它將保留元素在普通流中占據(jù)的空間，并繼續(xù)影響周圍內(nèi)容的布局，例：position1說明：文檔流中的原始空間被

24、保留可能與其他元素發(fā)生重疊通常用于為絕對定位元素創(chuàng)建定位上下文絕對定位(absolute)絕對定位的元素從文檔流中完整的移除，并且相對于最近的容器塊定位它所占據(jù)的空間將被關(guān)閉它對周圍元素的布局沒有任何影響舉例 （position2）容器塊(父容器)元素盒子的位置和尺寸有時相對于某個稱為元素的容器塊的矩形計算判斷元素容器塊的規(guī)則如果定位元素沒有包含在另一個定位元素中，那么它將相對于初始容器塊（由html元素創(chuàng)建的）確定位置如果元素有一個祖先，祖先的position屬性設(shè)置為relative，absolute或fixed，元素將相對于祖先元素的邊定位一個絕對定位元素的容器塊是最近的定位祖先元素(也

25、就是任何position屬性值不為static的元素)轉(zhuǎn)變元素為容器塊最普通的方法是設(shè)置position屬性值為relative，但不用偏移值來移動它。即通常用相對定位給絕對定位元素創(chuàng)建上下文例：position3，偏移是相對于填充邊緣，不是內(nèi)容區(qū)邊緣絕對定位對象的更多方面偏移值應(yīng)用于元素盒子的外邊緣，例：position4絕對定位元素總是表現(xiàn)為塊級元素，同時允許給元素設(shè)置寬度一旦定位了一個元素，它將變?yōu)樗乃性氐男氯萜鲏K，例：position5偏移屬性的進(jìn)一步說明正偏移值推動定位元素盒子遠(yuǎn)離指定的邊緣，并向容器塊的中心移動，例：position6當(dāng)我們給定位元素的四個方向設(shè)置偏移值，

26、同時也給定位元素本身指定width和其他盒子屬性時，如果定位盒子的屬性值與偏移量與容器塊中的可用空間不匹配，就可能引發(fā)沖突通常，指定width和一兩個偏移屬性，其他的由瀏覽器自動計算也可以使用百分比值設(shè)置偏移屬性，例：position7堆積順序當(dāng)多個定位元素重疊時，默認(rèn)是按照元素在文檔中出現(xiàn)的順序堆積的但也可以使用z-index屬性來改變堆積順序?qū)傩悦Q：z-index屬性值： (數(shù)字) | auto默認(rèn)值：auto適用對象：可定位元素是否可繼承：否數(shù)字越大，元素就會顯示在這個堆的越高層例：z-index1, z-index2上節(jié)回顧父容器灰色盒子bigbox框模型box1，box2測試z-i

27、ndex固定定位(fixed)在大部分情況下，固定定位與絕對定位工作方式相同重要的區(qū)別在于：固定元素的偏移值總是相對于瀏覽器窗口的，即使網(wǎng)頁的其他部分滾動，定位元素還保持固定例：position81.邊框的設(shè)計2.背景色的設(shè)置3.固定定位 fixed網(wǎng)頁布局使用CSS進(jìn)行網(wǎng)頁布局網(wǎng)頁布局策略液態(tài)網(wǎng)頁：隨著瀏覽器窗口縮放固定網(wǎng)頁：將內(nèi)容放在一個保持指定元素寬的網(wǎng)頁區(qū)域內(nèi)，而不管瀏覽器的尺寸彈性網(wǎng)頁：當(dāng)文本縮放時，彈性網(wǎng)頁的區(qū)域會放大或縮小液態(tài)布局也稱流動布局網(wǎng)頁中的網(wǎng)頁區(qū)域和欄允許變寬或變窄，從而填充瀏覽器窗口中的可用空間不要企圖控制內(nèi)容寬度或換行文本允許按需要重新流動如何創(chuàng)建液態(tài)布局通過指定百分比值寬度或不指定，來創(chuàng)建液態(tài)布局例：layout1, layout2優(yōu)勢劣勢不需要為具體的瀏覽器分