【正文】 tyle2 { marginleft:100px }style3 { marginright:20% }style4 { marginbottom:100pt }/styleBox ModelEx: 69Inter與網(wǎng)頁設(shè)計(jì) CSS樣式表樣式表 ?252。空白邊疊加– 當(dāng)兩個(gè) 垂直 的空白邊相遇時(shí)，它們將形成一個(gè)空白邊，其高度為兩個(gè)空白邊的最大值– 當(dāng)一個(gè)元素包含在另一元素中時(shí)，它們的頂 /底空白邊也會(huì)發(fā)生疊加– 內(nèi)容為空的元素 (也沒有邊框和填充 )，這時(shí)它的上下空白邊就碰到一起，也要發(fā)生疊加70Inter與網(wǎng)頁設(shè)計(jì) CSS樣式表樣式表 ?252。PADDING－ 設(shè)置填充的寬度– 使用方法與 margin一樣style type=“text/css”style1 { paddingtop:100px }style2 { paddingleft:100px }style3 { paddingright:10% }style4 { paddingbottom:100pt }style5 { padding:100pt }/styleBox Model71Inter與網(wǎng)頁設(shè)計(jì) CSS樣式表樣式表 ?252。WIDTH－ 寬度?可以使用 長度值或百分?jǐn)?shù)，也可以是auto(由瀏覽器自動(dòng)調(diào)整或保持該元素的原有大小，如圖像 )style type=“text/css”style1 { width:100px }/style252。HEIGHT－ 高度?設(shè)置方法與 width一樣style type=“text/css”style1 { height:100px }/styleBox Model72Inter與網(wǎng)頁設(shè)計(jì) CSS樣式表樣式表 ?252。BORDER－ 對于邊界的設(shè)置，包括寬度、顏色、線條樣式三種，使用方法相同：– bordercolor : 顏色值列表?設(shè)置各個(gè)邊框的顏色，設(shè)置順序和margin一樣?也可以分別用四個(gè)屬性： bordertopcolor， borderbottomcolor， borderrightcolor， borderleftcolor– borderstyle : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset?設(shè)置各個(gè)邊框的線條樣式?也可以分別用四個(gè)屬性： bordertopstyle， borderbottomstyle， borderleftstyle， borderrightstylestyle type=“text/css”style1 { bordercolor: blue green 1f1f1f blue。}style2 { bordercolor: blue。}style3 { bordertopcolor :blue。 }style4 { borderstyle : dotted。}/styleBox Model73Inter與網(wǎng)頁設(shè)計(jì) CSS樣式表樣式表 ?– borderwidth : medium | thin | thick | length? 設(shè)置各個(gè)邊框的寬度?也可以分別用四個(gè)屬性： bordertopwidth，borderrightwidth， borderbottomwidth，borderleftwidth252。也可以使用 bordertop， borderright， borderbottom， borderleft四個(gè)屬性一次性地設(shè)置各個(gè)邊的寬度、樣式和顏色– 這四個(gè)屬性使用方法相同，如：bordertop : bordertopwidth bordertopstyle bordertopcolor252。或使用一個(gè)復(fù)合屬性設(shè)置所有屬性值：border : borderwidth borderstyle bordercolorstyle type=“text/css”style1 {borderbottom: 25px solid red。 borderleft: 25px solid yellow。 }style2 {borderwidth: 1px thin 5px thick。} style1 { bordertopwidth :20px。}p { border: thick double yellow。 } /style 74Inter與網(wǎng)頁設(shè)計(jì) CSS樣式表樣式表 ?定位與顯示252。CSS的定位與顯示屬性可以把一個(gè) HTML元素定位在網(wǎng)頁中的任何位置252。定位與布局密切相關(guān)252。CSS中有三種基本的定位機(jī)制– 普通流：顯示的位置由元素在 HTML文件中的位置決定– 浮動(dòng)：可以左右移動(dòng)，直到碰到包含框或其它浮動(dòng)框– 絕對定位：可以直接將元素定位在頁面上地任何位置252。層疊順序– 進(jìn)行 CSS定位時(shí)，有可能發(fā)生多個(gè)元素的重疊– 需要設(shè)置元素在 Z軸上的層疊順序252。與定位相關(guān)的屬性主要有 14個(gè)252?？蓞⒖迹?75Inter與網(wǎng)頁設(shè)計(jì) CSS樣式表樣式表 ?普通流定位機(jī)制 528 252。按照元素的類型和在 HTML源文件中的出現(xiàn)順序進(jìn)行定位– 就是 block元素（如 p、 h、 div）（ 塊級(jí)框）從上到下一個(gè)接一個(gè)的排列– inline元素（如 span、 strong元素）在行中水平布置252。除非特殊的指定，否則所有的框都在普通流中定位相對定位252。相對于元素在普通文本流中的初始位置– 如果一個(gè)元素進(jìn)行相對定位，它將以它所在的位置 (即 它在普通流中的位置 )為初始點(diǎn)，然后，可以通過設(shè)置垂直或水平位置，讓這個(gè)元素 “相對于 ”它的初始點(diǎn)進(jìn)行移動(dòng) 252。使用相對定位時(shí)，元素仍然占據(jù)原來的空間，因此被看作普通流定位模型的一個(gè)特殊情況252。另外，移動(dòng)元素可能導(dǎo)致覆蓋其它元素style type=“text/css”style1 {position: relative。left:20px。top:20px }/styleEx: CSS樣式表樣式表 ?絕對定位 529 252?？梢园涯硞€(gè)元素精確的定位在某個(gè)地方 – 絕對定位使元素的位置與文檔流無關(guān)，因此不占據(jù)普通流中的空間，普通文檔流中其他元素的布局就像絕對定位的元素不存在時(shí)一樣– 絕對定位的元素的位置是相對于最近的父元素 而言的固定定位252。是絕對定位的一個(gè)特殊情況– 與絕對定位相似，唯一不同的是絕對定位是相對于父元素的某一個(gè)位置，而固定定位則是固定在瀏覽器的視框位置– 這樣當(dāng)窗口滾動(dòng)時(shí)，固定定位的元素不會(huì)隨之滾動(dòng)，總是出現(xiàn)在屏幕的固定位置 style type=“text/css”style1 {position:absolute。left:20px。top:20px }/stylestyle type=“text/css”style1 {position:fixed。left:20px。top:20px }/styleEx: 77Inter與網(wǎng)頁設(shè)計(jì) CSS樣式表樣式表 ?浮動(dòng) 浮動(dòng)框可以左右移動(dòng)，直到它的外邊緣碰到包含框或另一浮動(dòng)框的邊緣252。當(dāng)元素浮動(dòng)時(shí)，它將不再處于普通文檔流中，相當(dāng)于浮在文檔之上，不占據(jù)空間，但是會(huì)縮短行框， 產(chǎn)生文字環(huán)繞的效果Ex: Ex: clear/78Inter與網(wǎng)頁設(shè)計(jì) CSS樣式表樣式表 ?浮動(dòng) 浮動(dòng)框覆蓋了普通文本流中塊框的部分邊框和背景，但行框縮短給浮動(dòng)框騰出空間三個(gè) box都浮動(dòng)了，向左浮動(dòng)直到碰到前一個(gè)浮動(dòng)框style type=“text/css”style1 { float: left。}/style79Inter與網(wǎng)頁設(shè)計(jì) CSS樣式表樣式表 ?浮動(dòng) 如果水平位置沒有空間了，則 box3會(huì)跑到下面去如果 box2的高度沒有box1高度大， box1減去box2的高度的部分會(huì)把box3攔住80Inter與網(wǎng)頁設(shè)計(jì) CSS樣式表樣式表 ?252。浮動(dòng)框不再處于普通文檔流中，會(huì)覆蓋其它的塊框；而浮動(dòng)框旁的行框則會(huì)被縮短，使其環(huán)繞浮動(dòng)框252。如果要為浮動(dòng)元素留出垂直空間，使其它的元素不在其兩側(cè)顯示，可以 對其周圍的元素 使用清理屬性clear : none | left |right | both– 添加了 clear屬性的元素，通過自動(dòng)增加空白邊，達(dá)到留出垂直空間的效果81Inter與網(wǎng)頁設(shè)計(jì) CSS樣式表樣式表 ?Clear屬性252。實(shí)例：有一圖片和一段文字，圖片浮動(dòng)到左側(cè)，文字浮動(dòng)到右側(cè)，希望將圖片和文本包含在另一個(gè)具有背景色和邊框的元素中浮動(dòng)元素不占普通文本流的空間，容器元素成空元素設(shè)置了 clear屬性的空 div元素。移到了浮動(dòng)框的下面，容器元素得到延伸，包含了浮動(dòng)元素style type=text/css.clear { clear: both。}.news { backgroundcolor:eaeaea。 border: solid 1px 999。 width: 500px。}.news img { float: left。 padding: 10px 0 10px 10px。}.news p { float: right。width: 350px。 margin: 0。 padding: 10px 10px 10px 0。}/styleEx: 82Inter與網(wǎng)頁設(shè)計(jì) CSS樣式表樣式表 ?CSS定位與顯示252。POSITION－ 設(shè)置 定位方式? 屬性值： static | absolute | fixed | relativestyle type=“text/css”style1 { position:absolute； right:10px。bottom:10px。 }style2 { position:relative。 }/style252。top, left, right, bottom– 設(shè)置元素位置?以 position定義出來的原點(diǎn)為基準(zhǔn)，設(shè)置元素的位置83Inter與網(wǎng)頁設(shè)計(jì) CSS樣式表樣式表 ?CSS定位與顯示252。VISIBILITY－ 設(shè)置對象是否可見? 定義這個(gè)層級(jí)是不是要在畫面上顯示出功能來，最常利用j