DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> 後端程序員前端之路06--布局模型,顏色值,長度值
後端程序員前端之路06--布局模型,顏色值,長度值
編輯:CSS詳解     

一、布局模型

       網頁布局模型:個人理解,就是對html中各個元素進行一個排列。而排列的方法可以分為三種:流動模型、浮動模型、層模型。

二、流動模型

      這是網頁默認情況的布局模式。

      特征:

  1. 塊狀元素都會在所處的包含元素內自上而下按順序垂直延伸分布,因為在默認狀態下,塊狀元素的寬度都為100%。(獨占一行)
  2. 內聯元素都會在所處的包含元素內從左到右水平分布顯示。(跟其他行內元素處於同一行)

三、浮動模型

      用來解決塊級元素的霸道特征,比如想讓兩個塊級元素處於同一行,就可以使用浮動模型;

      具體表現形式:可以用css的float屬性,來控制元素浮動。

四、層模型

       類似photoshop中的圖層編輯功能一樣,讓每個html元素能夠在網頁中精確定位。

      具體操作:用css的position屬性來支持層模型。

      層模型有三種形式:

      1、絕對定位(position: absolute)

            將元素從文檔流中拖出來,然後使用left、right、top、bottom屬性相對於其最接近的一個具有定位屬性的父包含塊進行定位。

            如果不存在這樣的包含塊,則相對於body元素,即相對於浏覽器窗口。             

       2、相對定位(position:relative)

            相對於之前的位置進行偏移。移動的方向和幅度由left、right、top、bottom屬性確定,偏移前的位置保留不動。 

       3、固定定位(position: fixed)

            和absolute類似,不過他是相對於視圖本身(屏幕內的網頁窗口)。由於視圖本身是固定的,它不會隨浏覽器窗口的滾動條滾動而變化,

            除非你在屏幕中移動浏覽器窗口的屏幕位置,或改變浏覽器窗口的顯示大小,

            因此固定定位的元素會始終位於浏覽器窗口內視圖的某個位置,不會受文檔流動影響。

       4、absolute和relative的組合使用

            回顧上面 absolute的關鍵點:1、參照物:它的父元素   2、並且參照物必須是定位元素。

            relative的關鍵點:1、參照物:自己本身

            所以如果需要將子元素相對父元素絕對定位時,就可以利用relative將父元素變為定位元素,子元素使用absolute,就可以進行絕對定位了。

 五、顏色值

      在網頁中的顏色設置是非常重要,有字體顏色(color)、背景顏色(background-color)、邊框顏色(border)等,設置顏色的方法也有很多種:

      1、英文命令顏色

          比如:p{color:red;} 將顏色設置為紅色。   

      2、RGB顏色          

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

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

          每一項的值可以是 0~255 之間的整數,也可以是 0%~100% 的百分數。如:

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

     3、十六進制顏色

         這種顏色設置方法是現在比較普遍使用的方法,其原理其實也是RGB設置,但是其每一項的值由 0-255 變成了十六進制00-ff。         



	
     p{color:#00ffff;}

六、長度值
    目前比較常用到px(像素)、em、% 百分比,要注意其實這三種單位都是相對單位。  
     1、像素
       像素指的是顯示器上的小點(CSS規范中假設“90像素=1英寸”)。實際情況是浏覽器會使用顯示器的實際像素值有關,在目前大多數的設計者都傾向於使用像素(px)作為單位。
    2、em
      就是本元素給定字體的 font-size 值,如果元素的 font-size 為 14px ,那麼 1em = 14px;如果 font-size 為 18px,那麼 1em = 18px。如下代碼:
p{font-size:12px;text-indent:2em;}

         上面代碼就是可以實現段落首行縮進 24px(也就是兩個字體大小的距離)。

         特殊情況:當給 font-size 設置單位為 em 時,此時計算的標准以 它的父元素的 font-size 為基礎。

         3、百分比          

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

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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved