第三章元素布局與文字排版課程回顧上次課我們主要講了：CSS的盒模型盒模型的不同類型盒模型的定位2本章節授課目標如何混合使用元素定位來完成網頁布局BS系統界面的布局方法3元素定位絕對定位：相對定位：浮動定位：4對象從隊列中脫離出來，根據top，right，bottom，left這些偏移量，針對最近一個具有定位設置的祖先元素進行定位根據top，right，bottom，left偏移，針對其父元素進行定位，原有隊列位置會保留向左或者向右浮動，不包含在普通元素的隊列之中，但是包含在浮動定位元素的隊列中5界面分析在一個Web頁面中，除了數據型列表之外，一定不要出現table6ul和li的使用ul：無序列表如何去掉ul前面的“黑點”：list-style屬性list-style：和border一樣，list-style屬于復合屬性，共包含

三種方式：list-style-type：列表樣式類型list-style-image：列表樣式圖片list-style-position：列表樣式位置7list-style-typelist-style-type可選值：通常情況下，我們在編寫CSS樣式之前，都會初始化一些元素的樣式，ul的list-style就是其中之一將ul的list-style-type設定成數字（英文）狀態，實現的效果與ol完全一樣8ul{list-style:none}list-style-imagelist-style-image屬性的值是一個url地址被設定的圖片，將以圖標形式出現在ul的style位置Css不會為我們去處理圖片的尺寸，因此要想讓圖片符合我們

的需要，需要在圖片這一端進行處理圖片的呈現，是以元素背景的形式，會被瀏覽器緩存9list-style-image：url（’.../img/aa.jpg’）;list-style-positionlist-style-position包含兩種屬性值：outside：默認值。列表項目標記放置在文本以外，且環繞文本不根據標記對齊

inside：列表項目標記放置在文本以內，且環繞文本根據標記對齊ul是以縮進的形式呈現list-style的，也就是說ul具有默認的padding-left屬性，當我們將padding-left設定為0時，默認的list-style會失效，但是如果將list-style-position設定為inside時，padding-left為0不會對ul的list-style造成影響list-style也可以同時設定幾種屬性值，順序不分先后10list-style：url（’.../img/aa.jpg’）inside;文字的css處理font：文字的屬性設定font也屬于復合屬性：font-family：字體名稱，常見形式font-size：字號大小，常見形式font-weight：字體粗細，常見形式font-style：字體樣式（斜體），常見形式font屬性可以同時對多個屬性賦值，順序不分先后11font-family:'微軟雅黑‘,Arialfont-size:12pxfont-weight:boldfont-style:italicfont-familyfont-family：字體名稱，可同時設定多個字體名稱，優先順序從左到右通常情況下我們只需要選擇兩種字體名稱為font-family賦值，一種用于英文字體，一種用于中文字體注：瀏覽器中的Web頁面屬于客戶端，因此我們所設定的字體必須是客戶端存在的非客戶端字體的使用：12font-family:Arial，'微軟雅黑‘@font-face{font-family:myFont;src:url('font/some_font_file.eot');}font-family:myFonturl地址必須指向OpenType字體文件(.eot或.ote)不建議使用font-sizefont-size：最常用的字號12px(=9pt)隨著硬件發展，瀏覽器和分辨率增大，目前14px字體已經漸漸取代12px成為主流特別提示：在IE6下，元素的最小高度會被默認與字號相等如需將元素高度設為小于字號的高度，需將該元素字號設為013font-weight&font-stylefont-weight：用于中文字體中，只有兩種設定normal和boldfont-style（不推薦）：包含三種設定normal、italic和obliqueitalic為斜體oblique為傾斜字體當italic所設定字體不包含斜體時，會調用oblique設定14字體顏色color：前景色，用于設定字體顏色

字體顏色值通常有兩種設定方式：顏色名：如redgreenblue顏色值：如#F00#0F0#00F15小結有問題嗎？16內容的對齊text-align：（文本）內容對齊方式

left：默認值，左對齊center：水平居中對齊right：右對齊justify：兩端對齊垂直方向對齊：沒有！單行內容的垂直居中：line-height（行高）參數值為數值或百分比line-height的默認值為字體高度，如果需要讓文字在容器內垂直居中對齊，只需將的行高設定為容器高度（僅對文字等部分內容有效）百分比參數，通常用于設定成段內容的行間距17vertical-align==無效表單樣式表單的CSS，通常我們會針對以下幾個屬性進行設定：1.邊框：border2.背景色（背景圖）：background3.字體顏色：colorbackground背景設定也屬于復合屬性，包含：background-colorbackground-imagebackground-repeatbackground-positionbackground-attachment提示：為了增加用戶體驗性，同一個表單我們會分別設定2~3種樣式18background-color&background-imagebackground-color：背景色，與前景色（color）一樣，可以設定顏色名或者顏色值background-image：背景圖，一個url值，引用背景圖所在路徑幾乎所有元素都可以設定背景元素的背景圖會被瀏覽器緩存19background-image：url（’.../img/aa.jpg’）;background-repeat&background-positionbackground-repeat：背景平鋪狀態，包含四種設定repeat：默認，平鋪no-repeat：不平鋪repeat-x：延x軸（水平方向）平鋪repeat-y：延y軸（垂直方向）平鋪background-position：背景圖起點位置，百分比、數值或位置名元素背景圖默認從元素的左上角開始，包含x和y兩個坐標background-position還可以拆分成background-positionX和background-positionY兩個屬性使用，但我們很少這樣做元素的背景起點可以是負值位置名包含：x軸（leftcenterright），y軸（topmiddlebottom）20background-attachmentbackground-attachment：背景圖是否固定scroll：默認，滾動fixed：不滾動background屬性不具備直接繼承性，但具備視覺繼承性，通常情況下，我們需要在一開始，將body或者html的背景