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

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

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