PHP教程課件：DIV+CSS標(biāo)準(zhǔn)化網(wǎng)頁布局

DIV+CSS標(biāo)準(zhǔn)化網(wǎng)頁布局概述業(yè)界對(duì)DIV+CSS的標(biāo)準(zhǔn)化設(shè)計(jì)關(guān)注DIV+CSS標(biāo)準(zhǔn)化的影響下，網(wǎng)頁設(shè)計(jì)人員已經(jīng)把這一要求作為行業(yè)標(biāo)準(zhǔn)傳統(tǒng)的網(wǎng)頁布局是使用網(wǎng)格DIVDIV全稱division意為“區(qū)分”使用DIV的方法跟使用其他tag的方法一樣。如果單獨(dú)使用DIV而不加任何CSS，那么它在網(wǎng)頁中的效果和使用<P></P>是一樣的。DIV本身就是容器性質(zhì)的，你不但可以內(nèi)嵌table還可以內(nèi)嵌文本和其它的HTML代碼注意：<div>標(biāo)簽可以用來組合其它的HTML元素，但不能嵌套在段落元素中，例如，<p>aa<div>bb</div>cc</p>的結(jié)果是不確定的。什么是DIV+CSSDIV+CSS布局

這個(gè)布局中，div承載的是內(nèi)容，而css承載的是樣式。內(nèi)容和樣式的分離對(duì)于所見即所得的傳統(tǒng)TABLE編輯方式確實(shí)是一個(gè)很大的沖擊，尤其是設(shè)計(jì)人員很難接受設(shè)計(jì)一個(gè)他們不能立即看到的樣式。不過隨著學(xué)習(xí)，會(huì)發(fā)現(xiàn)div+css的好處實(shí)在是太明顯了

SPANSPAN的用法與DIV一樣<div>這是DIV標(biāo)記</div><span>這是SPAN標(biāo)記</span>DIV與SPAN的區(qū)別DIV是塊元素，使用會(huì)產(chǎn)生分行SPAN是一個(gè)行內(nèi)元素，使用不會(huì)產(chǎn)生分行盒子模型每個(gè)HTML元素都可以看作一個(gè)裝了東西的盒子，盒子具有寬度（width）和高度（height），盒子里面的內(nèi)容到盒子的邊框之間的距離即填充（padding），盒子本身有邊框（border），而盒子邊框外和其他盒子之間，還有邊界（margin）。

邊緣margin

(margin-top、margin-right、margin-bottom、margin-left)：外邊距順序依次是上、右、下、左例如，{margin:2em4em}、{margin-left:-200px}padding

(padding-top、padding-right、padding-bottom、padding-left)：內(nèi)邊距指文本邊框與文本之間的距離，順序依次是上、右、下、左float:left;clear:left;width:600px;height:400px;padding-top:1px;padding-right:2px;padding-bottom:3px;padding-left:4px;margin:5px;總寬度的計(jì)算布局display設(shè)置值：block、inline、list-item、nonefloat設(shè)置值：left、right、noneclear設(shè)置值：left、right、none、bothvisibility設(shè)置值：inherit、visible、hiddenclip設(shè)置值：clip:rect(top、right、bottom、left)overflow設(shè)置值：visible、hidden、scroll、auto位置位置屬性就是指定元素的位置，它是CSS-P（CascadingStyleSheetsPositioning）中的內(nèi)容，CSS-P是CSS的一個(gè)擴(kuò)展，它可用來控制任何網(wǎng)頁元素在游覽器文檔窗口中的位置。position設(shè)置值：absolute、relative、staticleftrighttopbottomz-indexposition:absolute;visibility:visible;z-index:5;overflow:scroll;clip:rect(1px2px3px4px);left:auto;top:5px;right:5px;bottom:5px;height:400px;width:600px;布局中的主要樣式fontline-heightcolormarginpaddingbordertext-alignbackgroundwidth:heightfloat:cleardisplay布局練習(xí)一列固定寬度一列寬度自適應(yīng)一列固定寬度居中二列固定寬度二列寬度自適應(yīng)兩列右列寬度自適應(yīng)兩列固定寬度居中三列浮動(dòng)中間列寬度自適應(yīng)高度自適應(yīng)CSS排版-DIV分塊設(shè)計(jì)DIV塊位置DIV+CSS標(biāo)準(zhǔn)的優(yōu)點(diǎn)結(jié)構(gòu)化HTML，提高易用性結(jié)構(gòu)清晰，表現(xiàn)和內(nèi)容相分離。更好的控制頁面布局。結(jié)構(gòu)的重構(gòu)性強(qiáng)，縮短改版時(shí)間。大大縮減頁面代碼，提高頁面瀏覽速度，縮減帶寬成本結(jié)構(gòu)清晰，容易被搜索引擎搜索到這個(gè)應(yīng)用最經(jīng)典的例子就是各大blog程序了。都是采用div+css構(gòu)架。內(nèi)容和樣式的分離導(dǎo)致我們?cè)谥貥?gòu)頁