利用DIV+CSS制作網(wǎng)頁(yè)過(guò)程中常用的基本概念及標(biāo)簽使用細(xì)節(jié)

時(shí)間：2022-05-29 15:36:01 | 來(lái)源：網(wǎng)絡(luò)營(yíng)銷

時(shí)間：2022-05-29 15:36:01 來(lái)源：網(wǎng)絡(luò)營(yíng)銷

CSS主要用于對(duì)HTML文件功能的補(bǔ)充及擴(kuò)展，其作用就是對(duì)HTML文件中各種排版進(jìn)行設(shè)置，達(dá)到對(duì)網(wǎng)頁(yè)中字體、顏色、背景、圖片等的控制，使網(wǎng)頁(yè)能夠完全依照設(shè)計(jì)者的想法來(lái)顯示。

CSS可以控制網(wǎng)頁(yè)的顯示，HTML標(biāo)簽中的屬性也可以控制其顯示，為什么還要有CSS呢？其中一個(gè)原因就是：以前幾乎一個(gè)人就可以完成一個(gè)網(wǎng)站的設(shè)置，非常的簡(jiǎn)單，現(xiàn)在不是了，一個(gè)網(wǎng)站需要很多的人一起工作才可以完成，如果每個(gè)人都按照自己的喜好制作網(wǎng)頁(yè)，那么開發(fā)出來(lái)的網(wǎng)頁(yè)的風(fēng)格就會(huì)不一樣，那么這些網(wǎng)頁(yè)很難放在同一個(gè)網(wǎng)站中了，CSS可以方便地設(shè)置所有網(wǎng)頁(yè)的風(fēng)格，然后交由不同部門、不同地方的人制作網(wǎng)頁(yè)。

CSS就是HTML中標(biāo)簽屬性獨(dú)立出來(lái)的東西，當(dāng)然CSS也有自己特有的東西，將HTML語(yǔ)言中內(nèi)容顯示的部分獨(dú)立的形成一個(gè)整體(CSS)，然后，我們編寫網(wǎng)頁(yè)的時(shí)候，使用HTML語(yǔ)言設(shè)置網(wǎng)頁(yè)內(nèi)容的結(jié)構(gòu)，使用CSS語(yǔ)言設(shè)置網(wǎng)頁(yè)內(nèi)容的顯示，從而達(dá)到使網(wǎng)頁(yè)編程的靈活性和復(fù)用性增強(qiáng)的目的。

注意，HTML語(yǔ)言仍具有網(wǎng)頁(yè)內(nèi)容顯示的功能，但是，我們?cè)诰唧w做網(wǎng)頁(yè)的時(shí)候，通常只用它對(duì)網(wǎng)頁(yè)內(nèi)容結(jié)構(gòu)控制的功能。

一、盒子模型

HTML中的所有元素，不論其元素是塊級(jí)元素，還是行集元素，在CSS看來(lái)都是一個(gè)盒子，這個(gè)就是盒子模型。

這里需要說(shuō)的是，我們最好把這個(gè)“盒子”理解成沒有高度的盒子，這樣有利于我們理解下面層的概念，當(dāng)然，你也可以把這個(gè)“盒子”理解成有高度的盒子，這樣的話，我們需要將下面“層”理解成有一定高度的層。

1、盒子內(nèi)部結(jié)構(gòu)

一個(gè)盒子實(shí)際所占的寬度是由“內(nèi)容+內(nèi)邊距+邊框+外邊距”組成，CSS中通過(guò)設(shè)置width和height來(lái)控件盒子大小。

2、邊框

當(dāng)有多條規(guī)則作用于一個(gè)邊框時(shí)，會(huì)產(chǎn)生沖突，后面的設(shè)置覆蓋前面的設(shè)置，這對(duì)于任何屬性是一樣的。

3、內(nèi)邊距

當(dāng)一個(gè)盒子設(shè)置背景圖象后，默認(rèn)情況下背景覆蓋的范圍是“padding+內(nèi)容“組成的范圍，并以padding左上角為基準(zhǔn)點(diǎn)平鋪圖像。

4、外邊距

body是一個(gè)特殊點(diǎn)，它的背景色會(huì)延伸到margin部分，而其它盒子的背景色只覆蓋“padding+內(nèi)容”(IE瀏覽器)或“padding+內(nèi)容+邊框”（FF瀏覽器）。

二、盒子的浮動(dòng)和定位

CSS盒子模型的每個(gè)屬性都包括四個(gè)部分：上、右、下、左；這四部分可同時(shí)設(shè)置，也可分別設(shè)置；而邊框有大小和顏色之分，我們又可以理解為生活中所見盒子的厚度以及這個(gè)盒子是用什么顏色材料做成的，邊界就是該盒子與其它東西要保留多大距離。

1、盒子之間的關(guān)系

（1）、標(biāo)準(zhǔn)流

就是不使用其它的與排列和定位相關(guān)的特殊CSS規(guī)則時(shí)，各種元素的規(guī)則。

（2）、塊級(jí)元素

它們總是以一個(gè)塊的形式表現(xiàn)出來(lái)，并且跟同級(jí)兄弟依次豎直排列，左右撐滿。

（3）、行內(nèi)元素

本身不占有獨(dú)立的區(qū)域，僅僅是在其它元素的基上指出了一定的范圍。

2、盒子在標(biāo)準(zhǔn)流中的定位

（1）、行內(nèi)元素之間的距離：為第一個(gè)元素的margin-right和第二元素的margin-left之和。

（2）、塊級(jí)元素之間的距離：是margin-top或margin-bottom之中的最大者。

3、浮動(dòng)和定位

一個(gè)塊級(jí)元素的范圍是由它里面的標(biāo)準(zhǔn)流內(nèi)容決定的，與里面的浮動(dòng)內(nèi)容無(wú)關(guān)，也即把其中的子元素浮動(dòng)后，它就不再屬于父塊，不再屬于標(biāo)準(zhǔn)流了（具體可查看億企邦《清除CSS浮動(dòng)的方法原理及優(yōu)缺點(diǎn)評(píng)定》的相關(guān)介紹）。

注意：兩個(gè)塊級(jí)原素中，第一個(gè)塊級(jí)元素浮動(dòng)時(shí)，后面的塊級(jí)元素的內(nèi)容會(huì)環(huán)繞它，但若是第二個(gè)塊級(jí)元素浮動(dòng)時(shí)，第一個(gè)元素是沒有任何變化的，即不會(huì)去環(huán)繞第二個(gè)浮動(dòng)的塊級(jí)元素的！多塊情況類似的。

（1）、相對(duì)定位結(jié)論

使用相對(duì)定位的盒子，會(huì)相對(duì)于它原來(lái)的位置，通過(guò)偏移指定的距離，到達(dá)新位置。

使用相對(duì)定位的盒子仍在標(biāo)準(zhǔn)流中，它對(duì)父塊和兄弟盒子沒有任何影響，它的原位置不會(huì)被其它塊補(bǔ)填。

（2）、絕對(duì)定位的結(jié)論

使用絕對(duì)定位的盒子會(huì)以它的“最近”的一個(gè)“已經(jīng)定位”的“祖先元素”為基準(zhǔn)進(jìn)行偏移，如果沒有已經(jīng)定位的祖先元素，那么會(huì)以瀏覽器窗口為基準(zhǔn)進(jìn)行定位。

絕對(duì)定位的盒子從標(biāo)準(zhǔn)流中脫離，這意味著它們對(duì)其后的兄弟的定位沒有影響，但是其兄弟盒子會(huì)填充它原來(lái)的位置，就像它不存在一樣。

4、margin的使用

當(dāng)塊的高度值小于子塊的高度加上margin的值時(shí)，此時(shí)IE會(huì)自動(dòng)擴(kuò)大，保持子元素的margin-bottom的空間以及父元素自身的padding-bottom。

而FF不會(huì)，它會(huì)保證父元素的height高度的完全吻合，而這時(shí)子元素將超過(guò)父元素范圍。

5、z-index的使用

z-index屬性用于調(diào)整定位時(shí)重疊塊的上下位置，z-index大的頁(yè)面位于其值小的上方，默認(rèn)值為0，當(dāng)兩個(gè)塊的z-index值一樣時(shí)，將保持原有的高低覆蓋關(guān)系。

6、display的使用

display的屬性改變一個(gè)元素是塊級(jí)（block）還是行內(nèi)(inline)元素，抑或不顯示此元素(none)。

三、塊級(jí)元素和行集元素

塊級(jí)元素在標(biāo)準(zhǔn)文檔流中是單獨(dú)的占一行的，而行集元素在標(biāo)準(zhǔn)文檔流中占得是行的一部分，但是當(dāng)他們完全脫離標(biāo)準(zhǔn)文檔流的時(shí)候，他們就不再具有該特性。

塊級(jí)元素和行集元素之間是可以相互改變的，通過(guò)display屬性，當(dāng)屬性值為block時(shí)，就可以轉(zhuǎn)換為塊級(jí)元素，當(dāng)屬性屬性值為inline時(shí)，就可以轉(zhuǎn)換為行集(內(nèi)聯(lián))元素。

四、層的概念

HTML文檔內(nèi)容的布局和顯示不僅僅在一個(gè)平面上，而是可以在多個(gè)平面上進(jìn)行布局和顯示，各個(gè)平面（層）之間的布局有的并沒有完全的斷離關(guān)系，有的就完全脫離了關(guān)系，當(dāng)然，其顯示效果我們可以通過(guò)z-index屬性進(jìn)行設(shè)置，最后，我們從最外的那個(gè)層面看到的重疊效果就是最終顯示的效果。

五、文字與圖像

我們都知道，在網(wǎng)頁(yè)上利用HTML定位文字和圖像是一件“令人心痛”的事情，我們必須使用表格標(biāo)簽和隱式GIF圖像，即使這樣也不能保證定位的精確，因?yàn)闉g覽器和操作平臺(tái)的不同會(huì)使顯示的結(jié)果發(fā)生變化（比如文字與圖片無(wú)法在同一行對(duì)齊顯示，具體的解決方法可查看億企邦《如何利用CSS代碼使圖片和文字在同一行顯示且對(duì)齊》的相關(guān)介紹）。

1、文字大小(font-size)

1em表示的長(zhǎng)度是其父元素中字母m的標(biāo)準(zhǔn)寬度，1ex則表示父元素中字母x的標(biāo)準(zhǔn)高度，當(dāng)父元素變化時(shí)，使用這兩個(gè)單位的子元素的大小會(huì)同比例變化。

2、行高(line-height)

（1）、表示兩行文字之間基線的距離，也就是每行文字高度，如果加上下劃線，下劃線就是基線。

（2）、行高的值既可以使用像素等為行高單位，也可以不加任何單位，只寫數(shù)字，此時(shí)行高表示行高與字體大小的比值，如字體大小12px，Line-height：1.5。

實(shí)際大小為line-height:1.5*12px=18px;

3、字母大小寫轉(zhuǎn)換（text-transform）

text-transform主要用于定義文本的大小寫狀態(tài)，不過(guò)，此屬性對(duì)中文無(wú)意義。

具體的語(yǔ)法有：

capitalize: 首字母大寫

uppercase: 大寫

lowercase: 小寫

none: 正常無(wú)變化

inherit: 繼承

4、文字裝飾效果（text-decoration）

text-decoration屬性規(guī)定添加到文本的修飾，這個(gè)屬性允許對(duì)文本設(shè)置某種效果，如加下劃線，如果后代元素沒有自己的裝飾，祖先元素上設(shè)置的裝飾會(huì)“延伸”到后代元素中。

text-decoration的值有underline，overline，line-height，blink等。

5、文字對(duì)齊與首段縮進(jìn)

（1）、段落水平對(duì)齊:text-align

（2）、段首縮進(jìn)text-indent：對(duì)中文網(wǎng)頁(yè),設(shè)置為”2em”即可。

6、段落的垂直對(duì)齊（vertical-align）

在目前瀏覽器中，只能用表格單元格中的對(duì)象豎直方向的對(duì)齊設(shè)置，而對(duì)于一般的塊級(jí)元素，如div，不起作用。

7、圖像樣式

（1）、background-position：屬性確定背景圖像的位置，如果設(shè)置兩個(gè)值，它們分別用于確定水平位置和豎直位置。如果只設(shè)置一個(gè)值，那么缺省的值為center。

而且它與平鋪相關(guān)，實(shí)際上指定了平鋪的起始點(diǎn)，除了使用top,left,bottom,right,center外，還以可相對(duì)數(shù)值和絕對(duì)數(shù)值來(lái)作為它的屬性值，如5%,18px等。

數(shù)值表示的是距離左邊的距離和距頂邊的距離。

（2）、background-attachment:fixed可以固定背景圖片，當(dāng)拉動(dòng)滾動(dòng)條時(shí)，只有文字移動(dòng)，而圖片不動(dòng)。

（3）、圖像的水平（橫向?qū)R方式）：不能直接設(shè)置圖片的text-align屬性，而是由其父像素的該屬性實(shí)現(xiàn)的，但是對(duì)縱向?qū)R是可以通過(guò)圖像的vertical-align屬性設(shè)置的，這點(diǎn)正好與文字的對(duì)齊方式相反的。

六、鏈接與導(dǎo)航

在利用div+css制作網(wǎng)頁(yè)的過(guò)程中，還有一類的我們經(jīng)常會(huì)用到的，那就是鏈接與導(dǎo)航。

1、偽類

（1）、偽類的聲明順序

a:link,a:visited{text-decoration:none;}

a:hover{text-decoration:underline;}

億企邦提醒大家一點(diǎn)：上面的聲明順序不能變，如果變了，將不會(huì)效果。

（2）、a:link與a設(shè)置的都是相同的，二者通常情況下是沒有區(qū)別的，但實(shí)際工作中，經(jīng)常作用a,a:visited｛｝;

2、按鈕超鏈接

對(duì)于普通超鏈接和點(diǎn)擊過(guò)的鏈接設(shè)置相同，并且利用邊框的樣式模擬按鈕效果，而鼠標(biāo)指針經(jīng)過(guò)時(shí)的超鏈接，相應(yīng)地改變文字顏色、背景色、位置和邊框，從而模擬出“按下去“的特效。

3、高度(width)和寬度(height)屬性

FF瀏覽器不支持a元素的高度(width)和寬度(height)屬性！

4、項(xiàng)目符號(hào)

（1）、list-style-type：屬性設(shè)置ull或ol標(biāo)記符號(hào)樣式。

（2）、list-style-image：屬性設(shè)置項(xiàng)目符號(hào)顯示為圖片，但由于瀏覽器間的差異，一般不使用此屬性，而是將list-style-type屬性值設(shè)置為none，然后設(shè)置li標(biāo)記的background實(shí)現(xiàn)。

5、簡(jiǎn)單菜單導(dǎo)航

雖然把鏈接設(shè)為塊級(jí)元素，但是只有在鼠標(biāo)經(jīng)過(guò)文字時(shí)（IE6），才能觸發(fā)鼠標(biāo)經(jīng)過(guò)效果，而不是鼠標(biāo)進(jìn)入矩形區(qū)域就可觸發(fā)。

IE7修改了此錯(cuò)誤，解決方法是：在”#navigation li a”中增加一條CSS規(guī)則：height:1em;

七、CSS+DIV布局

使用css+div布局網(wǎng)頁(yè)，就是指通過(guò)在網(wǎng)頁(yè)中插入div標(biāo)簽并定義相應(yīng)的css規(guī)則進(jìn)行網(wǎng)頁(yè)布局。

1、固定寬度版式

（1）、第一種方法

body{text-align:center;}
　　#containter{position:relative;margin:1 auto;widht:760px;text-align:left;}

（2）第二種方法

body{margin:0px;}
　　#contaniner{position:relative;left:50%;width:760px;margin-left:-330px;}

2、左中右版式

（1）、左右塊用絕對(duì)定位，并且固定塊寬度，而中間塊不設(shè)置寬度，自動(dòng)調(diào)整寬度，但是必須將它的padding-left和padding-right分別設(shè)置為左右塊寬度（具體可查看億企邦《CSS常用代碼使用技巧大全》的相關(guān)介紹）。

（2）、塊的背景色問(wèn)題：由于左右塊背景色沒有延伸到頁(yè)面底端，億企邦建議的解決方法是：當(dāng)有頁(yè)腳時(shí)，把一整個(gè)塊內(nèi)容塊（左、中、右三塊）放到一個(gè)塊中（這里放不放無(wú)所謂，主要是好管理），然后將body背景色設(shè)置為與右塊相同的顏色，再制做一副圖片，寬度與left相同，顏色與left背景色相同的塊，做#container的背景圖片，再設(shè)置向下重復(fù)即可。

八、文檔流

文檔流就是文檔里的內(nèi)容連續(xù)的讀入到程序進(jìn)程中，然后，經(jīng)過(guò)處理，再連續(xù)從程序進(jìn)程中讀出，輸出到顯示器上，當(dāng)然，在其讀入和讀出時(shí)都是有一定的順序的，不是亂來(lái)的，這里需要注意，之所以用“流”字，主要是因?yàn)閿?shù)據(jù)在讀入和讀出的傳送過(guò)程中，和水的流動(dòng)非常相似，所以，用了這么一個(gè)“流”字，改字描述數(shù)據(jù)的傳送過(guò)程非常形象，但是該字卻沒有強(qiáng)調(diào)其讀入讀出的順序性。

在這里我們不需要太多的關(guān)心文檔的輸入流，應(yīng)該多了解些文檔的輸出流，因?yàn)槌绦蜻M(jìn)程輸出各個(gè)層的先后順序的不同，就會(huì)導(dǎo)致最終我們看到層的重疊效果的不同。

根據(jù)文檔流對(duì)層的一些控制的不同，我們可以把文檔流分為常規(guī)流、絕對(duì)定位流和浮動(dòng)流，現(xiàn)在我們可以把這個(gè)流當(dāng)成層的意思。

常規(guī)流：最原始的那一層，最初該層包含所有的元素，其它層的元素都是從這個(gè)層里面弄走的，當(dāng)然，弄走人家的東西，你得給人家一個(gè)說(shuō)法；

絕對(duì)定位流：該層弄走原始層元素時(shí)，給人家說(shuō)，我弄走的東西就完全是我的了，以后你這關(guān)于它的任何東西都不能存在；

浮動(dòng)流：該層還算厚道，不像絕對(duì)定位流那樣，說(shuō)弄走人家東西，就連個(gè)毛也不給人家留，浮動(dòng)流在弄走人家東西的時(shí)候，會(huì)告訴常規(guī)層，你們可以給它留個(gè)墓地或者把它原來(lái)的家留著，要是留墓地（夠它住就行）的話，墓地的位置由我來(lái)定，“好處”就是它的真身會(huì)在墓地的上方，要是留它原來(lái)的家的話，它的真身可以任意的漂流，具體你們留墓地還是流家，會(huì)告訴你們的。

九、經(jīng)驗(yàn)心得

DIV是HTML中的塊標(biāo)記，就是把一些HTML標(biāo)簽作為一個(gè)塊，CSS可以通過(guò)DIV標(biāo)簽，使被操作的對(duì)象的顆粒度可以靈活的改變，span標(biāo)簽是行內(nèi)標(biāo)簽，div可以通過(guò)設(shè)置達(dá)到span的效果，但是，span很難達(dá)到div的一些效果（具體可查看億企邦《如何規(guī)范大型網(wǎng)站的HTML代碼》的相關(guān)介紹）。

1、在項(xiàng)目列表中，當(dāng)把<li>標(biāo)記設(shè)置了float：left屬性時(shí)，再為<li>指定寬度，那么當(dāng)<li>標(biāo)記超過(guò)父標(biāo)記的寬度時(shí)就會(huì)自動(dòng)換行。

2、為了減少差異，一般盡量在布局的塊，如<ul>、<li>、<div>、<p>等的屬性margin 、padding的值要么根據(jù)需要設(shè)置為相應(yīng)的值，要么設(shè)置為0；

3、經(jīng)常用圖片來(lái)代替塊里的標(biāo)題文字，先把標(biāo)題文字隱藏，再把代替圖片設(shè)置為塊的背景圖片，若是要豎直方向的圖片，一般是這樣設(shè)置。

若是橫向的圖片，一般可以把包含標(biāo)題文字隱藏，再設(shè)置相應(yīng)父元素的寬度和高度及外邊距和內(nèi)邊距，之后設(shè)置父元素的背景圖片為代替圖片。

例：<h3><span>這是測(cè)試</span></h3>

H3 span{display:none;}
　　H3{width:170px;height:60px;margin:0px;padding:0px;}
　　H3{bacground:url(1.jpg) no-repeat;}

4、假如有兩個(gè)塊，第一個(gè)設(shè)置為浮動(dòng)后，不論方向，那么第二個(gè)塊的內(nèi)容會(huì)環(huán)繞第一個(gè)塊，但若是設(shè)置二個(gè)塊浮動(dòng)后，對(duì)第一個(gè)塊卻沒任何影響，即第一個(gè)塊的內(nèi)容是不會(huì)環(huán)繞第二個(gè)塊，保持在原來(lái)的位置不變。

億企邦點(diǎn)評(píng)：

行集元素作為盒子被使用的時(shí)候，其本質(zhì)還是在常規(guī)流上，但該元素的上方會(huì)形成一個(gè)突起，這樣我們從上方看的時(shí)候會(huì)出現(xiàn)一些覆蓋的現(xiàn)象；塊集元素作為盒子被使用的時(shí)候，它作用于整體，不會(huì)出現(xiàn)什么突起，什么覆蓋的現(xiàn)象發(fā)生；絕對(duì)定位流和浮動(dòng)流，是在重新定位元素位置（float和position屬性設(shè)置）的時(shí)候出現(xiàn)的。