掌握盒模型輕松DIV css網(wǎng)頁(yè)布局

1、掌握盒模型輕松DIV css網(wǎng)頁(yè)布局若是想諳練把握DIV和CSS的結(jié)構(gòu)體例，首先要對(duì)盒模子有足夠的體味。每個(gè)HTML元素都可以看作一個(gè)裝了工具的盒子，盒子里面的內(nèi)容到盒子的邊框之間的距離即填充（padding），盒子自己有邊框（border），而盒子邊框外和其他盒子之間，還有鴻溝（margin），如圖1所示。圖1 盒模子圖解填充、邊框和鴻溝都分為“上右下左”四個(gè)標(biāo)的目標(biāo)，既可以分袂界說(shuō)，也可以統(tǒng)必然義。CSS內(nèi)界說(shuō)的寬（width）和高（height），指的是填充以?xún)?nèi)的內(nèi)容規(guī)模，是以一個(gè)元素：現(xiàn)實(shí)寬度 = 左鴻溝 + 左邊框 + 左填充 + 內(nèi)容寬度（width） + 右填充 + 右邊框 +

2、右鴻溝現(xiàn)實(shí)高度 = 上鴻溝 + 上邊框 + 上填充 + 內(nèi)容高度（height） + 下填充 + 下邊框 + 下鴻溝例若有CSS界說(shuō)如下：#menu background: #9cf;margin: 20px;border: 10px solid #039;padding: 40px;width: 200px;則其現(xiàn)實(shí)寬度如圖2所示。本文來(lái)自：佳木中國(guó)() 詳細(xì)地址：/jc/wysj/divcss/20100902/12697.html圖2 元素總寬度的計(jì)較而對(duì)于Windows IE 5.x及更前的版本，把這個(gè)盒模子的界說(shuō)搞錯(cuò)了，它認(rèn)

3、為：寬度（width）= 元素內(nèi)容 + 填充 + 邊框這個(gè)確實(shí)很輕易搞錯(cuò)，良多對(duì)于盒模子界說(shuō)沒(méi)有深切體味的人也同樣輕易犯這個(gè)錯(cuò)誤。例如：#menu width: 200px;padding: 5px;border: 1px solid #ccc;那么，在IE5.5中div現(xiàn)實(shí)內(nèi)容的寬度將是200px-5px-1px-5px-1px=188px，而在Firefox、Opera及IE 6等瀏覽器內(nèi)寬度則是200px。這恰是良多新手發(fā)現(xiàn)自己界說(shuō)的頁(yè)面在分歧的瀏覽器內(nèi)看會(huì)發(fā)生錯(cuò)位的原因之一。是以就需要采納必然的填補(bǔ)法子，一般可以避免同時(shí)界說(shuō)元素的寬度和填充、邊框，而將一些界說(shuō)放到元素的子元素內(nèi)界說(shuō)。若

4、是必需同時(shí)界說(shuō)這幾個(gè)值，也可以利用一些手段來(lái)校正這個(gè)錯(cuò)誤，即俗稱(chēng)的css hack，其根基思惟就是為沒(méi)有錯(cuò)誤的瀏覽器供給一個(gè)準(zhǔn)確的寬度值，而對(duì)IE5.5等有問(wèn)題的瀏覽器供給另一個(gè)值。例如如下的寫(xiě)法：#menu padding: 5px;width:110px;voice-family: ;voice-family: inherit;width: 100px;界說(shuō)中第一個(gè)width:110px，是IE 5.5認(rèn)為的元素的寬度，100px+5px+5px。voice-family: “”;voice-family: inherit;是CSS2.0中的語(yǔ)音屬性，因?yàn)閃indows IE5.5不完全撐

5、持CSS2.0，不識(shí)別此屬性，是以跳到下一個(gè)選擇符?？墒瞧渌麨g覽器（包羅IE6）會(huì)繼續(xù)解讀下面的界說(shuō)，因?yàn)閏ss是“層疊”的，即對(duì)于統(tǒng)一個(gè)選擇符的不異的屬性，后面的界說(shuō)會(huì)籠蓋失蹤前面的界說(shuō)，是以，對(duì)于其他的瀏覽器，#menu的寬度為最后的100px。另一個(gè)常用的hack手法是利用!important（聲明），聲明加在CSS屬性界說(shuō)的后面，此條屬性的級(jí)別將釀成最高，即使后面有不異的界說(shuō)也不會(huì)籠蓋失蹤聲明過(guò)的界說(shuō)，不外IE不撐持!important。例若有如下css界說(shuō)：#box border: 1px solid #B51C8C;width:768px;而其批改體例如圖3所示。圖3 針對(duì)IE批改

6、CSS對(duì)于撐持!important的瀏覽器，將接管width:768px，而ie6固然不撐持!important，可是因?yàn)槠錈o(wú)法詮釋“ /*/（空注釋?zhuān)?，是以?huì)忽略后面的界說(shuō)，而ie 5.5卻會(huì)接管最后界說(shuō)的width:770px，是以達(dá)到批改的目標(biāo)。關(guān)于盒模子，還有以下幾點(diǎn)需要注重：對(duì)于塊級(jí)元素（display:block），未浮動(dòng)的垂直相鄰元素的上鴻溝和下鴻溝會(huì)被壓縮，例如：有上下2個(gè)元素，上元素的下鴻溝為5px，下面元素的上鴻溝為20px，則現(xiàn)實(shí)2個(gè)元素的間距為20px（2個(gè)鴻溝值中較大的值）。如圖4所示。 本文來(lái)自：佳木中國(guó)() 詳細(xì)地址：http:/www.

7、/jc/wysj/divcss/20100902/12697.html圖4 鴻溝的壓縮注1. 塊級(jí)元素（display: block）每個(gè)塊級(jí)元素都從一個(gè)新行起頭，而且厥后的元素也需另起一行起頭，題目、段落、表格、層、body等都是塊級(jí)元素。塊級(jí)元素只能作為其他塊級(jí)元素的子元素，而且需要必然的前提。內(nèi)聯(lián)元素，例如、等，界說(shuō)上下鴻溝不會(huì)影響到行高（line-height），內(nèi)聯(lián)元素距離上一行元素的距離由行高抉擇，而不是填充或鴻溝。注2. 內(nèi)聯(lián)元素（display: inline）內(nèi)聯(lián)元素不需要在新行內(nèi)顯示，而且也不強(qiáng)迫厥后的元素?fù)Q行，如a、em、span等都為內(nèi)聯(lián)元素。內(nèi)聯(lián)元素可覺(jué)得任何其他元素的子元素。浮動(dòng)元素（無(wú)論左或者右浮動(dòng)）鴻溝不壓縮，且若浮動(dòng)元素不聲明寬度，則其寬度趨向于0，即壓縮到其內(nèi)容能承受的最小寬度。若是盒中沒(méi)有內(nèi)容