一、布局模型

網(wǎng)頁(yè)布局模型：個(gè)人理解，就是對(duì)html中各個(gè)元素進(jìn)行一個(gè)排列。而排列的方法可以分為三種：流動(dòng)模型、浮動(dòng)模型、層模型。

二、流動(dòng)模型

這是網(wǎng)頁(yè)默認(rèn)情況的布局模式。

特征：

1. 塊狀元素都會(huì)在所處的包含元素內(nèi)自上而下按順序垂直延伸分布，因?yàn)樵谀J(rèn)狀態(tài)下，塊狀元素的寬度都為100%。（獨(dú)占一行）
2. 內(nèi)聯(lián)元素都會(huì)在所處的包含元素內(nèi)從左到右水平分布顯示。（跟其他行內(nèi)元素處于同一行）

三、浮動(dòng)模型

用來(lái)解決塊級(jí)元素的霸道特征，比如想讓兩個(gè)塊級(jí)元素處于同一行，就可以使用浮動(dòng)模型；

具體表現(xiàn)形式：可以用css的float屬性，來(lái)控制元素浮動(dòng)。

四、層模型

類(lèi)似photoshop中的圖層編輯功能一樣，讓每個(gè)html元素能夠在網(wǎng)頁(yè)中精確定位。

具體操作：用css的position屬性來(lái)支持層模型。

層模型有三種形式：

1、絕對(duì)定位（position: absolute）

將元素從文檔流中拖出來(lái)，然后使用left、right、top、bottom屬性相對(duì)于其最接近的一個(gè)具有定位屬性的父包含塊進(jìn)行定位。

如果不存在這樣的包含塊，則相對(duì)于body元素，即相對(duì)于瀏覽器窗口。

2、相對(duì)定位（position：relative）

相對(duì)于之前的位置進(jìn)行偏移。移動(dòng)的方向和幅度由left、right、top、bottom屬性確定，偏移前的位置保留不動(dòng)。　

3、固定定位（position: fixed）

和absolute類(lèi)似，不過(guò)他是相對(duì)于視圖本身（屏幕內(nèi)的網(wǎng)頁(yè)窗口）。由于視圖本身是固定的，它不會(huì)隨瀏覽器窗口的滾動(dòng)條滾動(dòng)而變化，

除非你在屏幕中移動(dòng)瀏覽器窗口的屏幕位置，或改變?yōu)g覽器窗口的顯示大小，

因此固定定位的元素會(huì)始終位于瀏覽器窗口內(nèi)視圖的某個(gè)位置，不會(huì)受文檔流動(dòng)影響。

4、absolute和relative的組合使用

回顧上面 absolute的關(guān)鍵點(diǎn)：1、參照物：它的父元素 2、并且參照物必須是定位元素。

relative的關(guān)鍵點(diǎn)：1、參照物：自己本身

所以如果需要將子元素相對(duì)父元素絕對(duì)定位時(shí)，就可以利用relative將父元素變?yōu)槎ㄎ辉兀釉厥褂胊bsolute，就可以進(jìn)行絕對(duì)定位了。

五、顏色值

在網(wǎng)頁(yè)中的顏色設(shè)置是非常重要，有字體顏色（color）、背景顏色（background-color）、邊框顏色（border）等，設(shè)置顏色的方法也有很多種：

1、英文命令顏色

比如：p{color:red;} 將顏色設(shè)置為紅色。

2、RGB顏色

這個(gè)與 photoshop中的RGB顏色是一致的，由R(red)、G(green)、B(blue) 三種顏色的比例來(lái)配色。

 p{color:rgb(133,45,200);}

每一項(xiàng)的值可以是 0~255 之間的整數(shù)，也可以是 0%~100% 的百分?jǐn)?shù)。如：

 p{color:rgb(20%,33%,25%);}

3、十六進(jìn)制顏色

這種顏色設(shè)置方法是現(xiàn)在比較普遍使用的方法，其原理其實(shí)也是RGB設(shè)置，但是其每一項(xiàng)的值由 0-255 變成了十六進(jìn)制00-ff。

 p{color:#00ffff;}

六、長(zhǎng)度值
 目前比較常用到px（像素）、em、% 百分比，要注意其實(shí)這三種單位都是相對(duì)單位。　　
 1、像素
 像素指的是顯示器上的小點(diǎn)（CSS規(guī)范中假設(shè)“90像素=1英寸”）。實(shí)際情況是瀏覽器會(huì)使用顯示器的實(shí)際像素值有關(guān)，在目前大多數(shù)的設(shè)計(jì)者都傾向于使用像素（px）作為單位。
 2、em
 就是本元素給定字體的 font-size 值，如果元素的 font-size 為 14px ，那么 1em = 14px；如果 font-size 為 18px，那么 1em = 18px。如下代碼：

p{font-size:12px;text-indent:2em;}

上面代碼就是可以實(shí)現(xiàn)段落首行縮進(jìn) 24px（也就是兩個(gè)字體大小的距離）。

特殊情況：當(dāng)給 font-size 設(shè)置單位為 em 時(shí)，此時(shí)計(jì)算的標(biāo)準(zhǔn)以 它的父元素的 font-size 為基礎(chǔ)。

3、百分比

p{font-size:12px;line-height:130%}

設(shè)置行高（行間距）為字體的130%（12 * 1.3 = 15.6px）。

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com