這是div+css的ppt，包括了Div+css的概述，DIV+CSS布局，SPAN和DIV的區(qū)別，CSS概述，用CSS定義樣式，盒子模型，普通流定位機(jī)制等內(nèi)容，歡迎點(diǎn)擊下載。

div+css的ppt是由紅軟PPT免費(fèi)下載網(wǎng)推薦的一款課件PPT類型的PowerPoint.

DIV+CSS Div+css的概述 業(yè)界對(duì)DIV+CSS的標(biāo)準(zhǔn)化設(shè)計(jì)關(guān)注 DIV+CSS標(biāo)準(zhǔn)化的影響下，網(wǎng)頁(yè)設(shè)計(jì)人員已經(jīng)把這一要求作為行業(yè)標(biāo)準(zhǔn) 傳統(tǒng)的網(wǎng)頁(yè)布局是使用網(wǎng)格 DIV+CSS布局 DIV+CSS布局這個(gè)布局中，div承載的是內(nèi)容，而css承載的是樣式。內(nèi)容和樣式的分離對(duì)于所見(jiàn)即所得的傳統(tǒng)TABLE編輯方式確實(shí)是一個(gè)很大的沖擊，尤其是設(shè)計(jì)人員很難接受設(shè)計(jì)一個(gè)他們不能立即看到的樣式。不過(guò)隨著學(xué)習(xí)，會(huì)發(fā)現(xiàn)div+css的好處實(shí)在是太明顯了 DIV的概念 　1. DIV 全稱 division 意為“區(qū)分”使用 DIV 的方法跟使用其他 tag 的方法一樣。 2. 如果單獨(dú)使用 DIV 而不加任何 CSS，那么它在網(wǎng)頁(yè)中的效果和使用 是一樣的。 3. DIV本身就是容器性質(zhì)的，你不但可以內(nèi)嵌table還可以內(nèi)嵌文本和其它的HTML代碼 4. 注意： 標(biāo)簽可以用來(lái)組合其它的HTML元素，但不能嵌套在段落元素中，例如， aa bb cc 的結(jié)果是不確定的。 SPAN 和 DIV 的區(qū)別 SPAN 和 DIV 的區(qū)別在于: DIV(division)是一個(gè)塊級(jí)元素，可以包含段落、標(biāo)題、表格，乃至諸如章節(jié)、摘要和備注等。 是行級(jí)容器標(biāo)簽，不可以包含圖片、標(biāo)題、段落等，只能包含文字內(nèi)容 另外，由于SPAN 是行級(jí)元素，SPAN 的前后是不會(huì)換行的，它沒(méi)有結(jié)構(gòu)的意義，純粹是應(yīng)用樣式，當(dāng)其他行內(nèi)元素都不合適時(shí)，可以使用SPAN。 CSS概述 為網(wǎng)頁(yè)添加CSS 用CSS定義樣式 用CSS定義樣式 用CSS定義樣式 用CSS定義樣式 用CSS定義樣式 盒子模型 每個(gè)HTML元素都可以看作一個(gè)裝了東西的盒子，盒子具有寬度（width）和高度（height），盒子里面的內(nèi)容到盒子的邊框之間的距離即填充（padding），盒子本身有邊框（border），而盒子邊框外和其他盒子之間，還有邊界（margin）。 盒子模型 盒子模型 布局中的主要樣式 font line-height color margin padding border text-align background width: height float: clear display CSS定位與顯示 CSS的定位與顯示屬性可以把一個(gè)HTML元素定位在網(wǎng)頁(yè)中的任何位置 定位與布局密切相關(guān) CSS中有三種基本的定位機(jī)制 普通流：顯示的位置由元素在HTML文件中的位置決定 浮動(dòng)：可以左右移動(dòng)，直到碰到包含框或其它浮動(dòng)框 絕對(duì)定位：可以直接將元素定位在頁(yè)面上的任何位置 層疊順序 進(jìn)行CSS定位時(shí)，有可能發(fā)生多個(gè)元素的重疊 需要設(shè)置元素在Z軸上的層疊順序 與定位相關(guān)的屬性主要有14個(gè) 普通流定位機(jī)制 按照元素的類型和在HTML源文件中的出現(xiàn)順序進(jìn)行定位（ 從左到右從上到下 ） 就是block元素（如p、h、div）（塊級(jí)框）從上到下一個(gè)接一個(gè)的排列 行級(jí)元素（如span、strong元素）在行中水平布置 除非特殊的指定，否則所有的框都在普通流中定位 相對(duì)定位 相對(duì)于元素在普通文本流中的初始位置 如果一個(gè)元素進(jìn)行相對(duì)定位，它將以它所在的位置(即它在普通流中的位置)為初始點(diǎn)，然后，可以通過(guò)設(shè)置垂直或水平位置，讓這個(gè)元素“相對(duì)于”它的初始點(diǎn)進(jìn)行移動(dòng) 絕對(duì)定位 可以把某個(gè)元素精確的定位在某個(gè)地方 絕對(duì)定位使元素的位置與文檔流無(wú)關(guān)，因此不占據(jù)普通流中的空間，普通文檔流中其他元素的布局就像絕對(duì)定位的元素不存在時(shí)一樣 絕對(duì)定位的元素的位置是相對(duì)于最近的父元素而言的 固定定位 是絕對(duì)定位的一個(gè)特殊情況 與絕對(duì)定位相似，唯一不同的是絕對(duì)定位是相對(duì)于父元素的某一個(gè)位置，而固定定位則是固定在瀏覽器的視框位置 這樣當(dāng)窗口滾動(dòng)時(shí)，固定定位的元素不會(huì)隨之滾動(dòng)，總是出現(xiàn)在屏幕的固定位置 浮動(dòng)（float） 浮動(dòng)框可以左右移動(dòng)，直到它的外邊緣碰到包含框或另一浮動(dòng)框的邊緣 當(dāng)元素浮動(dòng)時(shí)，它將不再處于普通文檔流中，相當(dāng)于浮在文檔之上，不占據(jù)空間，但是會(huì)縮短行框，產(chǎn)生文字環(huán)繞的效果 浮動(dòng)（float） 假如某個(gè)div元素A是浮動(dòng)的，如果A元素上一個(gè)元素也是浮動(dòng)的，那么A元素會(huì)跟隨在上一個(gè)元素的后邊(如果一行放不下這兩個(gè)元素，那么A元素會(huì)被擠到下一行)；如果A元素上一個(gè)元素是標(biāo)準(zhǔn)流中的元素，那么A的相對(duì)垂直位置不會(huì)改變，也就是說(shuō)A的頂部總是和上一個(gè)元素的底部對(duì)齊。 div的順序是HTML代碼中div的順序決定的。 靠近頁(yè)面邊緣的一端是前，遠(yuǎn)離頁(yè)面邊緣的一端是后。 Clear屬性 元素浮動(dòng)之前，也就是在標(biāo)準(zhǔn)流中，是豎向排列的，而浮動(dòng)之后可以理解為橫向排列 如果要為浮動(dòng)元素留出空間，使其它的元素不在其兩側(cè)顯示，可以對(duì)其周圍的元素使用清理屬性 clear : none | left |right | both 添加了clear屬性的元素，通過(guò)自動(dòng)增加空白邊，達(dá)到留出空間的效果 清除浮動(dòng)可以理解為打破橫向排列。 Clear屬性 假如頁(yè)面中只有兩個(gè)元素div1、div2，它們都是左浮動(dòng)，場(chǎng)景如下： Clear屬性 其實(shí)這種理解是不正確的，這樣做沒(méi)有任何效果 對(duì)于CSS的清除浮動(dòng)(clear)，一定要牢記：這個(gè)規(guī)則只能影響使用清除的元素本身，不能影響其他元素。 要想讓div2下移，就必須在div2的CSS樣式中使用浮動(dòng)，而不能在div1元素的CSS樣式中使用清除浮動(dòng)，本例中div2的左邊有浮動(dòng)元素div1，因此只要在div2的CSS樣式中使用clear:left;來(lái)指定div2元素左邊不允許出現(xiàn)浮動(dòng)元素，這樣div2就被迫下移一行 Z-index屬性 Z-index－設(shè)置層疊順序 當(dāng)定位多個(gè)元素并將它們相互重疊時(shí)，可以使用該屬性設(shè)置元素在Z軸的層疊順序 z-index : number 屬性值越大表示在越上層epI紅軟基地