1、DIV CSS基礎(chǔ)教程DIV+CSS基礎(chǔ)教程第一節(jié)了解DIV+CSS一、什么是DIV+CSS DIV元素是html(超文本語言)中的一個(gè)元素，是標(biāo)簽，用來為HTML文檔內(nèi)大塊(block-level)的內(nèi)容提供結(jié)構(gòu)和背景的元素。DIV的起始標(biāo)簽和結(jié)束標(biāo)簽之間的所有內(nèi)容都是用來構(gòu)成這個(gè)塊的，其中所包含元素的特性由DIV標(biāo)簽的屬性來控制，或者是通過使用樣式表格式化這個(gè)塊來進(jìn)行控制。css是英語Cascading Style Sheets(層疊樣式表單)的縮寫，它是一種用來表現(xiàn)HTML或XML等文件式樣的計(jì)算機(jī)語言。DIV+CSS是網(wǎng)站標(biāo)準(zhǔn)(或稱WEB標(biāo)準(zhǔn))中常用術(shù)語之一，通常為了說明與HTML網(wǎng)頁

2、設(shè)計(jì)語言中的表格(table)定位方式的區(qū)別，因?yàn)閄HTML網(wǎng)站設(shè)計(jì)標(biāo)準(zhǔn)中，不再使用表格定位技術(shù)，而是采用DIV+CSS的方式實(shí)現(xiàn)各種定位。HTML語言自HTML4.01以來，不再發(fā)布新版本，原因就在于HTML語言正變得越來越復(fù)雜化、專用化。即標(biāo)記越來越多，甚至各個(gè)瀏覽器生產(chǎn)商也開發(fā)出只適合于其特定瀏覽器的HTML標(biāo)記，這顯然有礙于HTML網(wǎng)頁的兼容性。于是W3C組織進(jìn)而重新從SGML中獲取營養(yǎng)，隨后，發(fā)布了XML，XML是一種比HTML更加嚴(yán)格的標(biāo)記語言，全稱是可擴(kuò)展標(biāo)記語言。但是XML過于復(fù)雜，且當(dāng)前的大部分瀏覽器都不完全支持XML。于是XHTML這種語言就派上了用場(chǎng)，XHTML語言就是一

3、種可以將HTML語言標(biāo)準(zhǔn)化，用XHTML語言重寫后的HTML頁面可以應(yīng)用許多XML應(yīng)用技術(shù)。使得網(wǎng)頁更加容易擴(kuò)展，適合自動(dòng)數(shù)據(jù)交換，并且更加規(guī)整。二、DIV+CSS的優(yōu)勢(shì)1、符合W3C標(biāo)準(zhǔn)。這保證您的網(wǎng)站不會(huì)因?yàn)閷砭W(wǎng)絡(luò)應(yīng)用的升級(jí)而被淘汰。2、對(duì)瀏覽者和瀏覽器更具親和力。由于CSS富含豐富的樣式，使頁面更加靈活性，它可以根據(jù)不同的瀏覽器，而達(dá)到顯示效果的統(tǒng)一和不變形。這樣就支持瀏覽器的向后兼容，也就是無論未來的瀏覽器大戰(zhàn)，勝利的是什么，您的網(wǎng)站都能很好的兼容。3、使頁面載入得更快。頁面體積變小，瀏覽速度變快，由于將大部分頁面代碼寫在了CSS當(dāng)中，使得頁面體積容量變得更小。相對(duì)于表格嵌套的方式，

4、DIV+CSS將頁面獨(dú)立成更多的區(qū)域，在打開頁面的時(shí)候，逐層加載。而不像表格嵌套那樣將整個(gè)頁面圈在一個(gè)大表格里，使得加載速度很慢。4、保持視覺的一致性。以往表格嵌套的制作方法，會(huì)使得頁面與頁面，或者區(qū)域與區(qū)域之間的顯示效果會(huì)有偏差。而使用DIV+CSS的制作方法，將所有頁面，或所有區(qū)域統(tǒng)一用CSS文件控制，就避免了不同區(qū)域或不同頁面體現(xiàn)出的效果偏差。5、修改設(shè)計(jì)時(shí)更有效率。由于使用了DIV+CSS制作方法，使內(nèi)容和結(jié)構(gòu)分離，在修改頁面的時(shí)候更加容易省時(shí)。根據(jù)區(qū)域內(nèi)容標(biāo)記，到CSS里找到相應(yīng)的ID，使得修改頁面的時(shí)候更加方便，也不會(huì)破壞頁面其他部分的布局樣式，在團(tuán)隊(duì)開發(fā)中更容易分工合作而減少相互

5、關(guān)聯(lián)性。6、搜索引擎更加友好。相對(duì)與傳統(tǒng)的table,采用DIV+CSS技術(shù)的網(wǎng)頁，由于將大部分的HTML代碼和內(nèi)容樣式寫入了CSS文件中，這就使得網(wǎng)頁中代碼更加簡潔，正文部分更為突出明顯，便于被搜索引擎采集收錄。三、CSS+DIV網(wǎng)站設(shè)計(jì)的缺陷盡管DIV+CSS具有一定的優(yōu)勢(shì)，不過現(xiàn)階段CSS+DIV網(wǎng)站建設(shè)存在的問題也比較明顯，主要表現(xiàn)在：1、對(duì)于CSS的高度依賴使得網(wǎng)頁設(shè)計(jì)變得比較復(fù)雜。相對(duì)于HTML4.0中的表格布局(table)，CSS+DIV盡管不是高不可及，但至少要比表格定位復(fù)雜的多，即使對(duì)于網(wǎng)站設(shè)計(jì)高手也很容易出現(xiàn)問題，更不要說初學(xué)者了，這在一定程度上影響了XHTML網(wǎng)站設(shè)計(jì)語

6、言的普及應(yīng)用。2、CSS文件異常將影響整個(gè)網(wǎng)站的正常瀏覽。CSS網(wǎng)站制作的設(shè)計(jì)元素通常放在一個(gè)或幾個(gè)外部文件中，這些文件有可能相當(dāng)復(fù)雜，甚至比較龐大，如果CSS文件調(diào)用出現(xiàn)異常，那么整個(gè)網(wǎng)站將變得慘不忍睹。3、對(duì)于CSS網(wǎng)站設(shè)計(jì)的瀏覽器兼容性問題比較突出。雖然說DIV+CSS解決了大部分瀏覽器兼容問題，但是也有在部分瀏覽器中使用出現(xiàn)異常，CSS+DIV還有待于各個(gè)瀏覽器廠商的進(jìn)一步支持。4、CSS+DIV對(duì)搜索引擎優(yōu)化與否取決于網(wǎng)頁設(shè)計(jì)的專業(yè)水平而不是CSS+DIV本身。CSS+DIV網(wǎng)頁設(shè)計(jì)并不能保證網(wǎng)頁對(duì)搜索引擎的優(yōu)化，甚至不能保證一定比HTML網(wǎng)站有更簡潔的代碼設(shè)計(jì)。因?yàn)閷?duì)于搜索引擎而言

7、，網(wǎng)站結(jié)構(gòu)、內(nèi)容、相關(guān)網(wǎng)站鏈接等因素始終是網(wǎng)站優(yōu)化最重要的指標(biāo)。如何更有效、更合理的運(yùn)用WEB2.0設(shè)計(jì)標(biāo)準(zhǔn)，這需要很長時(shí)間的學(xué)習(xí)和鍛煉。而如何將DIV+CSS運(yùn)用的更好，需要通過不斷的實(shí)踐和體檢，積累豐富的設(shè)計(jì)經(jīng)驗(yàn)，才能很好的掌握這門技術(shù)。第二節(jié)CSS布局標(biāo)簽一、什么時(shí)候應(yīng)該用DIV?DIV元素是一個(gè)標(biāo)簽，但多層嵌套的DIV會(huì)嚴(yán)重影響代碼的可閱讀性。什么時(shí)候應(yīng)該用DIV雖然沒有什么硬性的規(guī)定，但DIV更適用于大體框架的定位。例如我們要定義一塊頭部的區(qū)域，一般會(huì)這樣定義一個(gè)DIV：ul id=navbarli id=articlesArticles/li li id=topicsTopics/

8、li li id=aboutAbout/li li id=contactContact/li li id=contributeContribute/li li id=feedFeed/li/ul h1 id=mastheada href=/img src=/pix/alalogo.gifalt=A LIST Apart：For People Who Make Websites/h1 No.214這個(gè)例子定義了最上面的導(dǎo)航(ul部分)，左邊的logo和No.214的標(biāo)記.二、最常用的布局標(biāo)簽h1：這個(gè)標(biāo)簽表達(dá)的意思就如同它原先的作用一樣明顯(大標(biāo)題)。h2：使用最多的地方應(yīng)該不是布局上,而是副標(biāo)

9、題,但有些地方需要定義欄目樣式的話,用這個(gè)標(biāo)簽比較合適,欄目內(nèi)容就使用p Ul：這個(gè)標(biāo)簽很多情況是用來定義導(dǎo)航部分的，當(dāng)然也可以用ol來代替，但導(dǎo)航連接沒有什么順序之分,所以還是用ul來的比較確切。b：這個(gè)已經(jīng)不再推薦使用的標(biāo)簽，但因?yàn)槎绦?，在布局上卻能帶來不少的方便，有些時(shí)候(比如細(xì)小地方的布局定義)還是不錯(cuò)的選擇。CSS放入網(wǎng)頁的方式，可以在HTML文件內(nèi)直接宣告樣式，也可以在外部連接套用。外部連接套用時(shí)，所有的CSS樣式都存在另外一個(gè)文件中，文件名稱為.css。第三節(jié)頁面布局設(shè)計(jì)在網(wǎng)頁制作設(shè)計(jì)中，第一步就是構(gòu)思，可以用PhotoShop或FireWorks等圖片處理軟件將需要制作的頁面布

10、局簡單的構(gòu)畫出來，然后根據(jù)布局圖設(shè)計(jì)。一般來說，頁面包括：頂部部分，其中又包括了LOGO、MENU和一幅Banner圖片；內(nèi)容部分，又可分為側(cè)邊欄、主體內(nèi)容；底部，包括一些版權(quán)信息?？梢悦麨椋喉敳繉親eader、內(nèi)容層PageBody、側(cè)邊欄層SideBar、主體內(nèi)容層MainBody、底部層Footer。層的嵌套關(guān)系DIV結(jié)構(gòu)設(shè)計(jì)為：body#Header#PageBody#Sidebar#MainBody#Footer接下來就可以書寫HTML代碼和CSS了。第四節(jié)寫入整體層結(jié)構(gòu)與CSS新建一個(gè)文件夾，命名為DIV+CSS布局練習(xí)，在文件夾下新建兩個(gè)空的記事本文檔。將一個(gè)記事本文檔命名為i

11、ndex.htm，輸入以下內(nèi)容：！DOCTYPE html PUBLIC-/W3C/DTD XHTML 1.0 Transitional/ENhtml xmlns=head meta http-equiv=Content-Typecontent=text/html；charset=gb2312/title無標(biāo)題文檔/title link href=css.cssrel=stylesheettype=text/css/head body/body/html這是XHTML的基本結(jié)構(gòu)。下面，我們?cè)赽ody/body標(biāo)簽對(duì)中寫入DIV的基本結(jié)構(gòu)，為了使以后閱讀代碼更簡易，我們添加相關(guān)注釋：div id

12、=containercolor=#aaaaaa！-頁面層容器-/colordiv id=Headercolor=#aaaaaa！-頁面頭部-/color/div div id=PageBodycolor=#aaaaaa！-頁面主體-/colordiv id=Sidebarcolor=#aaaaaa！-側(cè)邊欄-/color/div div id=MainBodycolor=#aaaaaa！-主體內(nèi)容-/color/div/div div id=Footercolor=#aaaaaa！-頁面底部-/color/div/div將另一個(gè)記事本文檔命名為css.css，寫入CSS信息，代碼如下：body

13、font：12px Tahoma；margin：0px；text-align：center；background：#FFF；#containerwidth：100%#Headerwidth：800px；margin：0 auto；height：100px；background：#FFCC99#PageBodywidth：800px；margin：0 auto；height：400px；background：#CCFF00#Footerwidth：800px；margin：0 auto；height：50px；background：#00FFFF把以上文件保存，用瀏覽器打開，這時(shí)我們已經(jīng)可以看到

14、基礎(chǔ)結(jié)構(gòu)了，這個(gè)就是頁面的框架了。溫馨提示：1、請(qǐng)養(yǎng)成良好的注釋習(xí)慣，這是非常重要的；2、body是一個(gè)HTML元素，頁面中所有的內(nèi)容都應(yīng)該寫在這標(biāo)簽對(duì)之內(nèi)；3、一些常用的CSS代碼的含義：font：12px Tahoma；這里使用了縮寫，說明字體為12像素大小，字體為Tahoma格式。完整的代碼是：font-size：12px；font-family：Tahoma；margin：0px；使用了縮寫，完整的是：margin-top：0px；margin-right：0px；margin-bottom：0px；margin-left：0px，也可以寫成margin：0px 0px 0px 0px

15、，順序是上/右/下/左，還可以書寫為margin：0(縮寫)；這個(gè)樣式說明body部分對(duì)上右下左邊距為0像素，如果使用auto則是自動(dòng)調(diào)整邊距，另外還有以下幾種寫法：margin：0pxd auto；說明上下邊距為0px，左右為自動(dòng)調(diào)整；以后使用到的padding屬性和margin有許多相似之處，他們的參數(shù)是一樣的，只不過各自表示的含義不相同，margin是外部距離，而padding則是內(nèi)部距離。text-align：center文字對(duì)齊方式，可以設(shè)置為左、右、中，這里設(shè)置為居中對(duì)齊。background：#FFF設(shè)置背景色為白色，這里顏色使用了縮寫，完整的應(yīng)該是background：#FFF

16、FFF。background可以用來給指定的層填充背景色、背景圖片，以后會(huì)用到這個(gè)格式：background：#ccc：url(bg.gif)top left no-repeat；表示使用#CCC(灰度色)填充整個(gè)層，使用bg.gif做為背景圖片，top left表示圖片位于當(dāng)前層的左上端，no-repeat表示僅顯示圖片大小而不填充滿整個(gè)層。top/right/bottom/left/center用于定位背景圖片，分別表示上/右/下/左/中；還可以使用background：url(bg.gif)20px 100px；表示X座標(biāo)為20像素，Y座標(biāo)為100像素的精確定位；repeat/no-re

17、peat/repeat-x/repeat-y分別表示填充滿整個(gè)層/不填充/沿X軸填充/沿Y軸填充。height/width/color分別表示高度(px)、寬度(px)、字體顏色(HTML色系表)。4、可以看到，整個(gè)頁面是居中顯示的，因?yàn)槲覀冊(cè)?container中使用了以下屬性：margin：0 auto；這個(gè)表示上下邊距為0，左右為自動(dòng)，因此該層就會(huì)自動(dòng)居中了。如果要讓頁面居左，則取消掉auto值就可以了，因?yàn)槟J(rèn)就是居左顯示的。第五節(jié)頁面頂部制作當(dāng)我們寫好了頁面大致的DIV結(jié)構(gòu)后，我們就可以開始細(xì)致地對(duì)每一個(gè)部分進(jìn)行制作了。我們把css.css中的樣式全部清除掉，重新寫入以下樣式代碼：b

18、odyfont：12px Tahoma；margin：0px；text-align：center；background：#FFF；a：link,a：visitedfont-size：12px；text-decoration：none；a：hover#containerwidth：800px；margin：10px auto以上樣式說明如下：a：link,a：visitedfont-size：12px；text-decoration：none；a：hover這兩項(xiàng)分別是控制頁面中超鏈接的樣式。#containerwidth：800px；margin：10px auto指定整個(gè)頁面的顯示區(qū)域。wi

19、dth：800px指定寬度為800像素，這里根據(jù)實(shí)際所需設(shè)定。margin：10px auto，則是頁面上、下邊距為10個(gè)像素，并且居中顯示。接下來，開始制作TOP部分，TOP部分包括了LOGO、菜單和Banner，首先在FW下對(duì)設(shè)計(jì)好的圖片進(jìn)行切片，第一部分為LOGO部分，由于LOGO圖片并沒有太多的顏色，這里我于是將這一部分保存為GIF格式(這樣能使頁面載入的速度更快，當(dāng)然使用此格式之前必須確定圖片并沒有使用太多的顏色)，調(diào)色板選擇為精確，選擇Alpha透明度，色版為白色(此處顏色應(yīng)與背景色相同)，導(dǎo)出為logo.gif，圖像寬度為800px。第二部分為Banner部分，因?yàn)锽anner部

20、分是一個(gè)細(xì)致的圖片，如果使用GIF格式顏色會(huì)有太大的損失，所以必須使用JPEG格式，將文件導(dǎo)出為banner.jpg。然后我們?cè)赾ss.css中再寫入以下樣式：#headerbackground：url(logo.gif)no-repeat這個(gè)樣式給頁面頭部分加入一個(gè)背景圖片LOGO，并且不作填充。這里，我們沒有指定header層的高度，因?yàn)閔eader層中還有菜單和banner項(xiàng)，所以層的高度暫時(shí)是未知的，而層的屬性又可以讓層根據(jù)內(nèi)容自動(dòng)設(shè)定調(diào)整，因此我們并不需要指定高度。下面我們制作菜單，代碼如下：div id=menuul li ahref=#首頁/a/li li class=menuD

21、iv/li li ahref=#博客/a/li li class=menuDiv/li li ahref=#設(shè)計(jì)/a/li li class=menuDiv/li li ahref=#相冊(cè)/a/li li class=menuDiv/li li ahref=#論壇/a/li li class=menuDiv/li li ahref=#關(guān)于/a/li/ul/div div id=banner/div以上ul/ul、li/li這兩個(gè)HTML元素主要的作用就是在HTML中以列表的形式來顯示一些信息。對(duì)菜單使用列表li形式，可以在以后方便對(duì)菜單定制樣式。li class=menuDiv/li這一段代碼

22、是可以方便地對(duì)菜單選項(xiàng)之間插入一些分隔樣式，例如預(yù)覽圖中的豎線分隔。需要分清楚的是，當(dāng)在HTML中定義為id=divID時(shí)，在CSS對(duì)應(yīng)的設(shè)置語法則是#divID存，如果在HTML中定義為class=divID時(shí)，則在CSS中對(duì)應(yīng)的設(shè)置語法是.divID。如果id=divID這個(gè)層中包括了一個(gè)img/img，則這個(gè)img在CSS中對(duì)應(yīng)的設(shè)置語法應(yīng)該是#divIDx img，同樣，如果是包含在class=divID這個(gè)層中時(shí)，則設(shè)置語法應(yīng)該是.divID img。另外，HTML中的一切元素都是可以定義的，例如table、tr、td、th、form、img、input.等等，如果你要在CSS中設(shè)置

23、它們，則直接寫入元素的名稱加上一對(duì)大括號(hào)就可以了。所有的CSS代碼都應(yīng)該寫在大括號(hào)中。然后我們?cè)赾ss.css中再寫入以下樣式：#menu ullist-style：none；margin：0px；#menu ul lifloat：left；第一個(gè)樣式list-style：none，這一句是取消列表前點(diǎn)，因?yàn)槲覀儾恍枰@些點(diǎn)。margin：0px，這一句是刪除UL的縮進(jìn)，這樣做可以使所有的列表內(nèi)容都不縮進(jìn)。第二個(gè)樣式使用了浮動(dòng)屬性(float)，float：left是讓內(nèi)容都在同一行顯示。我們?cè)?menu ul li再加入代碼margin：0 10px，改成：#menu ul lifloat：

24、left；margin：0 10pxmargin：0 10px的作用是讓列表內(nèi)容之間產(chǎn)生一個(gè)20像素的距離(左：10px，右：10px)。明白了這些，我們?cè)賮砉潭ú藛蔚奈恢?，把代碼改成如下：#menupadding：20px 20px 00#menu ulfloat：right；list-style：none；margin：0px；#menu ul lifloat：left；margin：0 10px這樣，位置就確定了。下面在菜單間加入豎線，對(duì)留好的空的li class=menuDiv/li，再添加以下代碼：.menuDivwidth：1px；height：28px；background：#9

25、99保存預(yù)覽一下，豎線已經(jīng)出來。不過，菜單選項(xiàng)的文字卻在頂部，我們?cè)傩薷某梢韵麓a：#menu ul lifloat：left；margin：0 10px；display：block；line-height：28px效果基本上已經(jīng)實(shí)現(xiàn)了，剩下的就是修改菜單的超鏈接樣式，在css.css中添加以下代碼：#menu ul li a：link,#menu ul li a：visitedfont-weight：bold；color：#666#menu ul li a：hover第六節(jié)頁面頂部的完整代碼下面給出本例頁面頂部的完整代碼，供學(xué)習(xí)參考：index.htm的內(nèi)容：！DOCTYPE html PU

26、BLIC-/W3C/DTD XHTML 1.0 Transitional/ENhtml xmlns=head meta http-equiv=Content-Typecontent=text/html；charset=gb2312/title無標(biāo)題文檔/title link href=css.cssrel=stylesheettype=text/cssmedia=all/head body div id=containerdiv id=headerdiv id=menuul li ahref=#首頁/a/li li class=menuDiv/li li ahref=#博客/a/li li c

27、lass=menuDiv/li li ahref=#設(shè)計(jì)/a/li li class=menuDiv/li li ahref=#相冊(cè)/a/li li class=menuDiv/li li ahref=#論壇/a/li li class=menuDiv/li li ahref=#關(guān)于/a/li/ul/div div id=banner/div/div/div/body/html css.css的代碼：bodyfont：12px Tahoma；margin：0px；text-align：center；background：#FFF；a：link,a：visitedfont-size：12px；t

28、ext-decoration：none；a：hover#containerwidth：800px；height：600px；margin：10px auto#headerbackground：url(logo.gif)no-repeat#menupadding：20px 20px 00#menu ulfloat：right；list-style：none；margin：0px；#menu ul lifloat：left；display：block；line-height：30px；margin：0 10px#menu ul li a：link,#menu ul li a：visitedfont

29、-weight：bold；color：#666#menu ul li a：hover.menuDivwidth：1px；height：28px；background：#999#bannerbackground：url(banner.jpg)0 30px no-repeat；width：730px；margin：auto；height：240px；border-bottom：5px solid#EFEFEF；clear：both#pagebodywidth：800px；margin：0 auto；height：400px；background：#CCFF00#footerwidth：800px；

30、margin：0 auto；height：50px；background：#00FFFF第七節(jié)Div+CSS的border和clear屬性如果你曾用過table制作網(wǎng)頁，你就應(yīng)該知道，如果要在表格中繪制一條虛線該如何做，那需要制作一個(gè)很小的圖片來填充，其實(shí)我們還有更簡單的辦法，只要在td/td中加入這么一段就可以了，你可以試試：div style=border-bottom：1px dashed#ccc/div其實(shí)利用dashed、solid、dotted.等可以制作出許多效果來，實(shí)線、虛線、雙線、陰影線等等。div id=banner/div以上代碼便可以實(shí)現(xiàn)banner，在css.css中

31、加入以下樣式：#bannerbackground：url(banner.jpg)0 30px no-repeat；width：730px；margin：auto；height：240px；border-bottom：5px solid#EFEFEF；clear：both通過border很容易就繪制出一條實(shí)線了，并且減少了圖片下載所占用的網(wǎng)絡(luò)資源，使得頁面載入速度變得更快。再看看clear：both，表示清除左、右所有的浮動(dòng)，在接下來的布局中我們還會(huì)用這個(gè)屬性：clear：left/right。在這里添加clear：both是由于之前的ul、li元素設(shè)置了浮動(dòng)，如果不清除則會(huì)影響banner層位

32、置的設(shè)定。div id=pagebody！-頁面主體-div id=sidebar！-側(cè)邊欄-/div div id=mainbody！-主體內(nèi)容-/div/div以上是頁面主體部分，我們?cè)赾ss.css中添加以下樣式：#pagebodywidth：730px；margin：8px auto；#sidebarwidth：160px；text-align：left；float：left；clear：left；overflow：hidden；#mainbodywidth：570px；text-align：left；float：right；clear：right；overflow：hidden為了可

33、以查看到效果，建議在#sidebar和#mainbody中加入以下代碼，預(yù)覽完成后可以刪除這段代碼：border：1px solid#E00；height：200px保存預(yù)覽效果，可以發(fā)現(xiàn)這兩個(gè)層完美的浮動(dòng)，在達(dá)到了我們布局的要求，而兩個(gè)層的實(shí)際寬度應(yīng)該160+2(border)+570+2=734px，已經(jīng)超出了父層的寬度，由于clear的原因，這兩個(gè)層才不會(huì)出現(xiàn)錯(cuò)位的情況，這樣可以使我們布局的頁面不會(huì)因?yàn)閮?nèi)容太長(例如圖片)而導(dǎo)致錯(cuò)位。而之后添加的overflow：hidden則可以使內(nèi)容太長(例如圖片)的部份自動(dòng)被隱藏。通常我們會(huì)看到一些網(wǎng)頁在載入時(shí)，由于圖片太大，導(dǎo)致布局被撐開，直到頁面下載完成才恢復(fù)正常，通過添加overflow：hidden就可以解決這個(gè)問題。CSS中每一個(gè)屬性運(yùn)用