div+css布局教程-課件_第1頁
div+css布局教程-課件_第2頁
div+css布局教程-課件_第3頁
div+css布局教程-課件_第4頁
div+css布局教程-課件_第5頁
已閱讀5頁，還剩75頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

DIV+CSS布局教程

TheTutorialofcss+div

1PPT課件DIV+CSS布局教程Thediv+css布局教程目錄：1.CSS基礎知識2.網頁布局常用屬性3.網頁布局實例4.Web標準化思想與網頁重構

2PPT課件div+css布局教程2PPT課件一、CSS基礎知識

1.css簡介2.css語法

3.選擇器

4.實用小技巧div+css布局教程3PPT課件div+css布局教程3PPT課件1、css簡介CSS指層疊樣式表(CascadingStyleSheets)

CSS語言是一種標記語言,它不需要編譯,可以直接由瀏覽器執(zhí)行樣式通常存儲在樣式表中

外部樣式表通常存儲在CSS文件中外部樣式表可以極大提高工作效率

4PPT課件1、css簡介CSS指層疊樣式表(CascadingS2、css語法CSS語法由三部分構成：選擇器、屬性和值：P{color:#ff0000;background:#000000;}其中“p”,我們稱為選擇器，指明我們要給“p”定義樣式；樣式聲明寫在一對大括號“{}”中；Color和background稱為“屬性”，不通屬性之間用“；”分隔“#ff0000”和“#000000”是屬性的值5PPT課件2、css語法5PPT課件2、css語法幾點值得注意的地方：1、選擇器的分組可以對選擇器進行分組，這樣，被分組的選擇器就可以分享相同的聲明。用逗號將需要分組的選擇器分開。（有助于優(yōu)化樣式表，提高效率）例子：h1{color:green;}h2{color:green;}h3{color:green;}我們可以這樣寫：h1,h2,h3{color:green;}樣式太臃腫了，該減肥了!6PPT課件2、css語法樣式太臃腫了，該減肥了!6PPT課件2、css語法幾點值得注意的地方：2、繼承及其問題根據CSS，子元素從父元素繼承屬性。

例子：body{font-family:Verdana,sans-serif;}根據上面這條規(guī)則，站點的body元素將使用Verdana字體通過CSS繼承，子元素將繼承最高級元素（在本例中是body）所擁有的屬性（這些子元素諸如p,td,ul,ol,ul,li,dl,dt,和dd）如果你不希望“Verdana,sans-serif”字體被所有的子元素繼承，又該怎么做呢？比方說，你希望段落的字體是Times。我們可以這樣寫：p{font-family:Times,"TimesNewRoman",serif;}

7PPT課件2、css語法7PPT課件2、css語法幾點值得注意的地方：3、層疊次序當同一個HTML元素被不止一個樣式定義時，會使用哪個樣式呢？樣式表分為：瀏覽器缺省設置外部樣式表內部樣式表（位于<head>標簽內部）內聯(lián)樣式（在HTML元素內部）

優(yōu)先級為：內聯(lián)樣式（在HTML元素內部）擁有最高的優(yōu)先權，這意味著它將優(yōu)先于以下的樣式聲明：<head>標簽中的樣式聲明，外部樣式表中的樣式聲明，或者瀏覽器中的樣式聲明（缺省值）。8PPT課件2、css語法8PPT課件2、css語法幾點值得注意的地方：4、高效的CSS（1）使用外聯(lián)樣式代替內聯(lián)樣式和內部樣式表不推薦使用：<pstyle=“color:red”></p>或者是：<styletype=“text/css”>p{color:red;}</style>(2)使用組選擇器

h1,h2,h3{color:green;}(3)使用繼承不推薦使用：td{font-size:12px;}p{font-size:12px;}li{font-size:12px;}…應該這樣寫body{font-size:12px;}9PPT課件2、css語法9PPT課件2、css語法幾點值得注意的地方：（4）使用簡記屬性不推薦使用：margin-top:1px;margin-left:2px;margin-right:3px;margin-bottom:4px;應該這樣寫margin:1px3px4px2px;10PPT課件2、css語法10PPT課件3、選擇器1、CSS派生選擇器

ulli{font-weight:bold;}定義ul內li標簽的樣式Pspana{font-weight:bold;}定義段落下a標簽的樣式可以使用派生選擇器給一個元素內的子元素定義樣式。兩個元素之間用空格表示。11PPT課件3、選擇器1、CSS派生選擇器11PPT課件3、選擇器2、id選擇器id選擇器可以為標有特定id的HTML元素指定特定的樣式。id選擇器以“#”來定義。例子：#red{color:red;}#green{color:green;}注意：id屬性只能在每個HTML文檔中出現一次。

12PPT課件3、選擇器2、id選擇器12PPT課件3、選擇器2、類選擇器在CSS中，類選擇器以一個點號顯示：例子：.center{text-align:center}

注意：類名的第一個字符不能使用數字

13PPT課件3、選擇器2、類選擇器13PPT課件4、實用小技巧1、橋接樣式表方法在一些大型的項目中，由于樣式表文件過多，使用橋接樣式表可以便捷高效的管理這些樣式。14PPT課件4、實用小技巧1、橋接樣式表方法14PPT課件4、實用小技巧書寫方式為：@importurl(color.css);@imporpurl(type.css);引用的樣式表必須出現在其他規(guī)則之前,樣式表的頭部,這樣才能保證正常的效果.15PPT課件4、實用小技巧書寫方式為：15PPT課件4、實用小技巧2、關于ID和Class命名的規(guī)范總體思想：語義化的命名16PPT課件4、實用小技巧2、關于ID和Class命名的規(guī)范16PPT課4、實用小技巧個人推薦在開發(fā)過程中逐漸形成自己的命名規(guī)范，如header/footer/main/hd/bd/nav/box/mode等，使用連字符“-”如site-nav/quick-menu/secondaryContent/。

但回到具體情況，不同的項目也應該根據具體情況對命名方式作出選擇，不同方式的命名規(guī)則應該結合使用，大型網站，如淘寶，更適合使用語義命名結合的方式，對于頁面的樣式修改，能快速敏捷地做出相應調整，對于制作，能快速地拼湊，而大部分宣稱型的單頁，個人更推薦使用結構化的命名方式，頁面制作者能方便快速地完成頁面，而不用多把時間陷近命名的考慮中，17PPT課件4、實用小技巧個人推薦在開發(fā)過程中逐漸形成自己的命名規(guī)范，1二、網頁布局常用屬性

1.css盒子模型2.css定位和浮動div+css布局教程18PPT課件div+css布局教程18PPT課件1、css盒子模型19PPT課件1、css盒子模型19PPT課件1、css盒子模型在CSS中，width和height指的是內容區(qū)域的寬度和高度。增加內邊距、邊框和外邊距不會影響內容區(qū)域的尺寸，但是會增加元素框的尺寸。假設框的每個邊上有10個像素的外邊距和5個像素的內邊距。如果希望這個元素框達到100個像素，就需要將內容的寬度設置為70像素#box{width:70px;margin:10px;padding:5px;}20PPT課件1、css盒子模型在CSS中，width和heigh1、css盒子模型CSS盒子模型是在網頁布局中必須用到的，其中常用的屬性有：Margin（外邊距）,padding

(內邊距)分別有上下左右四個屬性，topbottomleftright例子：h1{margin:10px0px15px5px;}順序為上、右、下、左順時針旋轉

Padding屬性的寫法與margin一樣。21PPT課件1、css盒子模型CSS盒子模型是在網頁布局中必須用到的，其1、css盒子模型需要注意的地方：CSS外邊距合并外邊距合并指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者。22PPT課件1、css盒子模型需要注意的地方：CSS外邊距合并22PP1、css盒子模型當一個元素包含在另一個元素中時（假設沒有內邊距或邊框把外邊距分隔開），它們的上和/或下外邊距也會發(fā)生合并。請看下圖：23PPT課件1、css盒子模型當一個元素包含在另一個元素中時（假設沒有內2、css定位和浮動CSS為定位和浮動提供了一些屬性，利用這些屬性，可以建立列式布局，將布局的一部分與另一部分重疊，還可以完成多年來通常需要使用多個表格才能完成的任務。CSS的定位和浮動是控制布局的重要方法。通過定位和浮動能夠解決在表格時代往往需要代碼才能完成的布局。有效的減少了代碼量，使得頁面結構更加清晰，代碼更加精簡。24PPT課件2、css定位和浮動CSS為定位和浮動提供了一些屬性，利用2、css定位和浮動我們首先必須了解一個概念：“塊級元素”，“行內元素”常見的塊級元素有：div,ul,p,h1常見行內元素有：span,strong行內元素就是在一行內的元素，只能放在行內；塊級元素，就是一個四方塊，可以放在頁面上任何地方。塊級無素的顯著特點是：每個塊級元素都是從一個新行開始顯示，而且其后的無素也需另起一行進行顯示。（我們可以利用這個特性對不同的塊進行不同的排列，這樣就形成了網頁的布局。）

在網頁布局中，我們使用塊級元素進行版面的搭建，使用行內元素對塊級元素里面的內容進行修飾25PPT課件2、css定位和浮動我們首先必須了解一個概念：“塊級元素”，2、css定位和浮動例子：<div>ab<span>c</span>defg</div>這里的div為塊級元素，span為行內元素。我們可以把塊級元素比喻為一個大的容器，而行內元素就是其中的某一個小容器。了解了塊級元素與行內元素之后，我們就可以利用定位和浮動屬性對塊級元素進行排列布局了。26PPT課件2、css定位和浮動例子：<div>ab<span>c</s2、css定位和浮動1，定位div{position:relative;}//相對定位div{position:absolute;}//絕對定位CSS相對定位

概念：元素沒有脫離文檔流，還是普通流定位模型的一部分，會對文檔流中其它元素布局產生影響?？梢岳斫鉃椋涸O置為相對定位的元素框會偏移某個距離。元素仍然保持其未定位前的形狀，它原本所占的空間仍保留。27PPT課件2、css定位和浮動1，定位27PPT課件2、css定位和浮動1，定位例子：#box_relative{position:relative;left:30px;top:20px;}我們看見，框2脫離原來的位置，相對與原占位空間偏移了一定的距離。但是框2原本的占位空間沒有消失。所以相對定位不會對布局格式產生影響。（實例演示）28PPT課件2、css定位和浮動1，定位我們看見，框2脫離原來的位置，相2、css定位和浮動1，定位絕對定位概念：設置為絕對定位的元素框從文檔流完全刪除，并相對于其包含塊定位，包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會關閉，就好像該元素原來不存在一樣。元素定位后生成一個塊級框，而不論原來它在正常流中生成何種類型的框?？梢岳斫鉃椋航^對定位的元素的位置相對于最近的已設置相對定位的父元素，如果文檔中的元素沒有已設置為相對定位的父元素，那么它的位置相對于最初的包含塊（body的左上角）。29PPT課件2、css定位和浮動1，定位29PPT課件2、css定位和浮動1，定位絕對定位例子：#box_relative{position:absolute;left:30px;top:20px;}

絕對定位使元素的位置與文檔流無關，因此不占據空間。這一點與相對定位不同。（實例演示）30PPT課件2、css定位和浮動1，定位絕對定位使元素的位置與文檔流無關2、css定位和浮動1，定位絕對定位提示：因為絕對定位的框與文檔流無關，所以它們可以覆蓋頁面上的其它元素?？梢酝ㄟ^設置z-index屬性來控制這些框的堆放次序?？偨Y:相對定位的元素不會脫離文檔流，占用文檔流的空間.絕對定位的元素脫離文檔流，偏移不影響文檔流中的其它元素.絕對定位的元素以最近的定位祖先元素為參照物。

絕對定位應用——容器在瀏覽器中垂直居中31PPT課件2、css定位和浮動1，定位31PPT課件2、css定位和浮動2，浮動概念：浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。屬性：float：left;float:right;用法：請看下圖，當把框1向右浮動時，它脫離文檔流并且向右移動，直到它的右邊緣碰到包含框的右邊緣：

32PPT課件2、css定位和浮動2，浮動32PPT課件2、css定位和浮動2，浮動網頁布局中的應用：在網頁布局中，浮動是必須使用到的方法。我們常常利用浮動使指定的塊移動到我們需要的地方。比如兩列，或者三列的布局。比如橫向的菜單等等……實例：如何讓三列橫向排列。33PPT課件2、css定位和浮動2，浮動33PPT課件2、css定位和浮動2，浮動浮動的兄弟：清理浮動屬性：clear;clear屬性的值可以是left、right、both或none，它表示框的哪些邊不應該挨著浮動框。

為什么要用到清理浮動，我們來看一個例子。34PPT課件2、css定位和浮動2，浮動34PPT課件三、網頁布局實例

div+css布局教程QQformac頁面分析35PPT課件div+css布局教程QQformac35PPT課件四、web標準化思想與網頁重構

所謂web標準化，有兩層含義。一、就是W3C系列規(guī)范，html4.0，xhtml1.0，css2.1，ECMAScript，DOM,XML等等，作為一個頁面工程師，要學會熟讀標準，認識和了解標準。W3C標準就是讓頁面在不同的終端都可以運行，讓使用各種終端的用戶都能瀏覽你的頁面，也就是跨越平臺，獲得更大眾化的用戶的使用。

div+css布局教程36PPT課件div+css布局教程36PPT課件四、web標準化思想與網頁重構

二、結構，表現，行為三者的分離。結構是嚴格的語義化HTML文檔編寫，CSS是HTML頁面的視覺處理，行為是通過用戶行為的觸發(fā)去動態(tài)改變頁面，內容修改，功能的完成等等。分離不是簡單的文件的分離，而是嚴格的分工的分離，不要用table去布局，那是css的事情，不要用hx去調整字體大小，那也是CSS的事情。結構=內容+語義化的解釋內容。表現=頁面內容的呈現效果。行為=用戶觸發(fā)去改變內容和HTML和CSS。

div+css布局教程37PPT課件div+css布局教程37PPT課件四、web標準化思想與網頁重構

網頁重構，從語義化標簽開始??！所謂語義化標簽，就是讓頁面中每一個標簽都有存在的意義。各盡其用，比如h1定義標題，p用來定義段落，ul為無序列表,table的存在就是為了標記列表的數據。

所以并非在布局中無論什么情況都用div，html語言在設計的時候并不只有div一個標簽，我們之所以喜歡使用div布局，是因為div的屬性有助于方便的控制布局。

div+css布局教程38PPT課件div+css布局教程38PPT課件四、web標準化思想與網頁重構

所以網頁重構不等于div+css

重構小提示：1、減少使用div標簽;2、應該用div定義頁面的主要框架結構，比如頭部、內容、邊欄和底部等結構;3、內容應該使用語義化的html標簽，而不是div標簽;

div+css布局教程39PPT課件div+css布局教程39PPT課件謝謝大家！

希望大家在網頁重構這條并不平坦的道路上越走越遠

Thankyou!40PPT課件謝謝大家！

希望大家

DIV+CSS布局教程

TheTutorialofcss+div

41PPT課件DIV+CSS布局教程Thediv+css布局教程目錄：1.CSS基礎知識2.網頁布局常用屬性3.網頁布局實例4.Web標準化思想與網頁重構

42PPT課件div+css布局教程2PPT課件一、CSS基礎知識

1.css簡介2.css語法

3.選擇器

4.實用小技巧div+css布局教程43PPT課件div+css布局教程3PPT課件1、css簡介CSS指層疊樣式表(CascadingStyleSheets)

CSS語言是一種標記語言,它不需要編譯,可以直接由瀏覽器執(zhí)行樣式通常存儲在樣式表中

外部樣式表通常存儲在CSS文件中外部樣式表可以極大提高工作效率

44PPT課件1、css簡介CSS指層疊樣式表(CascadingS2、css語法CSS語法由三部分構成：選擇器、屬性和值：P{color:#ff0000;background:#000000;}其中“p”,我們稱為選擇器，指明我們要給“p”定義樣式；樣式聲明寫在一對大括號“{}”中；Color和background稱為“屬性”，不通屬性之間用“；”分隔“#ff0000”和“#000000”是屬性的值45PPT課件2、css語法5PPT課件2、css語法幾點值得注意的地方：1、選擇器的分組可以對選擇器進行分組，這樣，被分組的選擇器就可以分享相同的聲明。用逗號將需要分組的選擇器分開。（有助于優(yōu)化樣式表，提高效率）例子：h1{color:green;}h2{color:green;}h3{color:green;}我們可以這樣寫：h1,h2,h3{color:green;}樣式太臃腫了，該減肥了!46PPT課件2、css語法樣式太臃腫了，該減肥了!6PPT課件2、css語法幾點值得注意的地方：2、繼承及其問題根據CSS，子元素從父元素繼承屬性。

例子：body{font-family:Verdana,sans-serif;}根據上面這條規(guī)則，站點的body元素將使用Verdana字體通過CSS繼承，子元素將繼承最高級元素（在本例中是body）所擁有的屬性（這些子元素諸如p,td,ul,ol,ul,li,dl,dt,和dd）如果你不希望“Verdana,sans-serif”字體被所有的子元素繼承，又該怎么做呢？比方說，你希望段落的字體是Times。我們可以這樣寫：p{font-family:Times,"TimesNewRoman",serif;}

47PPT課件2、css語法7PPT課件2、css語法幾點值得注意的地方：3、層疊次序當同一個HTML元素被不止一個樣式定義時，會使用哪個樣式呢？樣式表分為：瀏覽器缺省設置外部樣式表內部樣式表（位于<head>標簽內部）內聯(lián)樣式（在HTML元素內部）

優(yōu)先級為：內聯(lián)樣式（在HTML元素內部）擁有最高的優(yōu)先權，這意味著它將優(yōu)先于以下的樣式聲明：<head>標簽中的樣式聲明，外部樣式表中的樣式聲明，或者瀏覽器中的樣式聲明（缺省值）。48PPT課件2、css語法8PPT課件2、css語法幾點值得注意的地方：4、高效的CSS（1）使用外聯(lián)樣式代替內聯(lián)樣式和內部樣式表不推薦使用：<pstyle=“color:red”></p>或者是：<styletype=“text/css”>p{color:red;}</style>(2)使用組選擇器

h1,h2,h3{color:green;}(3)使用繼承不推薦使用：td{font-size:12px;}p{font-size:12px;}li{font-size:12px;}…應該這樣寫body{font-size:12px;}49PPT課件2、css語法9PPT課件2、css語法幾點值得注意的地方：（4）使用簡記屬性不推薦使用：margin-top:1px;margin-left:2px;margin-right:3px;margin-bottom:4px;應該這樣寫margin:1px3px4px2px;50PPT課件2、css語法10PPT課件3、選擇器1、CSS派生選擇器

ulli{font-weight:bold;}定義ul內li標簽的樣式Pspana{font-weight:bold;}定義段落下a標簽的樣式可以使用派生選擇器給一個元素內的子元素定義樣式。兩個元素之間用空格表示。51PPT課件3、選擇器1、CSS派生選擇器11PPT課件3、選擇器2、id選擇器id選擇器可以為標有特定id的HTML元素指定特定的樣式。id選擇器以“#”來定義。例子：#red{color:red;}#green{color:green;}注意：id屬性只能在每個HTML文檔中出現一次。

52PPT課件3、選擇器2、id選擇器12PPT課件3、選擇器2、類選擇器在CSS中，類選擇器以一個點號顯示：例子：.center{text-align:center}

注意：類名的第一個字符不能使用數字

53PPT課件3、選擇器2、類選擇器13PPT課件4、實用小技巧1、橋接樣式表方法在一些大型的項目中，由于樣式表文件過多，使用橋接樣式表可以便捷高效的管理這些樣式。54PPT課件4、實用小技巧1、橋接樣式表方法14PPT課件4、實用小技巧書寫方式為：@importurl(color.css);@imporpurl(type.css);引用的樣式表必須出現在其他規(guī)則之前,樣式表的頭部,這樣才能保證正常的效果.55PPT課件4、實用小技巧書寫方式為：15PPT課件4、實用小技巧2、關于ID和Class命名的規(guī)范總體思想：語義化的命名56PPT課件4、實用小技巧2、關于ID和Class命名的規(guī)范16PPT課4、實用小技巧個人推薦在開發(fā)過程中逐漸形成自己的命名規(guī)范，如header/footer/main/hd/bd/nav/box/mode等，使用連字符“-”如site-nav/quick-menu/secondaryContent/。

但回到具體情況，不同的項目也應該根據具體情況對命名方式作出選擇，不同方式的命名規(guī)則應該結合使用，大型網站，如淘寶，更適合使用語義命名結合的方式，對于頁面的樣式修改，能快速敏捷地做出相應調整，對于制作，能快速地拼湊，而大部分宣稱型的單頁，個人更推薦使用結構化的命名方式，頁面制作者能方便快速地完成頁面，而不用多把時間陷近命名的考慮中，57PPT課件4、實用小技巧個人推薦在開發(fā)過程中逐漸形成自己的命名規(guī)范，1二、網頁布局常用屬性

1.css盒子模型2.css定位和浮動div+css布局教程58PPT課件div+css布局教程18PPT課件1、css盒子模型59PPT課件1、css盒子模型19PPT課件1、css盒子模型在CSS中，width和height指的是內容區(qū)域的寬度和高度。增加內邊距、邊框和外邊距不會影響內容區(qū)域的尺寸，但是會增加元素框的尺寸。假設框的每個邊上有10個像素的外邊距和5個像素的內邊距。如果希望這個元素框達到100個像素，就需要將內容的寬度設置為70像素#box{width:70px;margin:10px;padding:5px;}60PPT課件1、css盒子模型在CSS中，width和heigh1、css盒子模型CSS盒子模型是在網頁布局中必須用到的，其中常用的屬性有：Margin（外邊距）,padding

(內邊距)分別有上下左右四個屬性，topbottomleftright例子：h1{margin:10px0px15px5px;}順序為上、右、下、左順時針旋轉

Padding屬性的寫法與margin一樣。61PPT課件1、css盒子模型CSS盒子模型是在網頁布局中必須用到的，其1、css盒子模型需要注意的地方：CSS外邊距合并外邊距合并指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者。62PPT課件1、css盒子模型需要注意的地方：CSS外邊距合并22PP1、css盒子模型當一個元素包含在另一個元素中時（假設沒有內邊距或邊框把外邊距分隔開），它們的上和/或下外邊距也會發(fā)生合并。請看下圖：63PPT課件1、css盒子模型當一個元素包含在另一個元素中時（假設沒有內2、css定位和浮動CSS為定位和浮動提供了一些屬性，利用這些屬性，可以建立列式布局，將布局的一部分與另一部分重疊，還可以完成多年來通常需要使用多個表格才能完成的任務。CSS的定位和浮動是控制布局的重要方法。通過定位和浮動能夠解決在表格時代往往需要代碼才能完成的布局。有效的減少了代碼量，使得頁面結構更加清晰，代碼更加精簡。64PPT課件2、css定位和浮動CSS為定位和浮動提供了一些屬性，利用2、css定位和浮動我們首先必須了解一個概念：“塊級元素”，“行內元素”常見的塊級元素有：div,ul,p,h1常見行內元素有：span,strong行內元素就是在一行內的元素，只能放在行內；塊級元素，就是一個四方塊，可以放在頁面上任何地方。塊級無素的顯著特點是：每個塊級元素都是從一個新行開始顯示，而且其后的無素也需另起一行進行顯示。（我們可以利用這個特性對不同的塊進行不同的排列，這樣就形成了網頁的布局。）

在網頁布局中，我們使用塊級元素進行版面的搭建，使用行內元素對塊級元素里面的內容進行修飾65PPT課件2、css定位和浮動我們首先必須了解一個概念：“塊級元素”，2、css定位和浮動例子：<div>ab<span>c</span>defg</div>這里的div為塊級元素，span為行內元素。我們可以把塊級元素比喻為一個大的容器，而行內元素就是其中的某一個小容器。了解了塊級元素與行內元素之后，我們就可以利用定位和浮動屬性對塊級元素進行排列布局了。66PPT課件2、css定位和浮動例子：<div>ab<span>c</s2、css定位和浮動1，定位div{position:relative;}//相對定位div{position:absolute;}//絕對定位CSS相對定位

概念：元素沒有脫離文檔流，還是普通流定位模型的一部分，會對文檔流中其它元素布局產生影響。可以理解為：設置為相對定位的元素框會偏移某個距離。元素仍然保持其未定位前的形狀，它原本所占的空間仍保留。67PPT課件2、css定位和浮動1，定位27PPT課件2、css定位和浮動1，定位例子：#box_relative{position:relative;left:30px;top:20px;}我們看見，框2脫離原來的位置，相對與原占位空間偏移了一定的距離。但是框2原本的占位空間沒有消失。所以相對定位不會對布局格式產生影響。（實例演示）68PPT課件2、css定位和浮動1，定位我們看見，框2脫離原來的位置，相2、css定位和浮動1，定位絕對定位概念：設置為絕對定位的元素框從文檔流完全刪除，并相對于其包含塊定位，包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會關閉，就好像該元素原來不存在一樣。元素定位后生成一個塊級框，而不論原來它在正常流中生成何種類型的框?？梢岳斫鉃椋航^對定位的元素的位置相對于最近的已設置相對定位的父元素，如果文檔中的元素沒有已設置為相對定位的父元素，那么它的位置相對于最初的包含塊（body的左上角）。69PPT課件2、css定位和浮動1，定位29PPT課件2、css定位和浮動1，定位絕對定位例子：#box_relative{position:absolute;left:30px;top:20px;}

絕對定位使元素的位置與文檔流無關，因此不占據空間。這一點與相對定位不同。（實例演示）70PPT課件2、css定位和浮動1，定位絕對定位使元素的位置與文檔流無關2、css定位和浮動1，定位絕對定位提示：因為絕對定位的框與文檔流無關，所以它們可以覆蓋頁面上的其它元素?？梢酝ㄟ^設置z-index屬性來控制這些框的堆放次序?？偨Y:相對定位的元素不會脫離文檔流，占用文檔流的空間.絕對定位的元素脫離文檔流，偏移不影響文檔流中的其它元素.絕對定位的元素以最近的定位祖先元素為參照物。

絕對定位應用——容器在瀏覽器中垂直居中71PPT課件2、css定位和浮動1，定位31PPT課件2、css定位和浮動2，浮動概念：浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。屬性：float：left;float:right;用法：請看下圖，當把框1向右浮動時，它脫離文檔流并且向右移動，直到它的右邊緣碰到包含框的右邊緣：

72PPT課件2、css定位和浮動2，浮動32PPT課件2、css定位和浮動2，浮動網頁布局中的應用：在

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論