CSS 布局模型,顏色值,長度值

2022-03-08 22:01:36 字數 2785 閱讀 7435

目錄

一、布局模型

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

二、流動模型

這是網頁預設情況的布局模式。

特徵:塊狀元素都會在所處的包含元素內自上而下按順序垂直延伸分布,因為在預設狀態下,塊狀元素的寬度都為100%。(獨佔一行)

內聯元素都會在所處的包含元素內從左到右水平分布顯示。(跟其他行內元素處於同一行)

三、浮動模型

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

具體表現形式:可以用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 將顏色設定為紅色。   

2、rgb顏色          

這個與photoshop中的rgb顏色是一致的,由r(red)g(green)b(blue)三種顏色的比例來配色。

p

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

p

3、十六進製制顏色

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

p

六、長度值

目前比較常用到px(畫素)em% 百分比,要注意其實這三種單位都是相對單位。

1、畫素

畫素指的是顯示器上的小點(css規範中假設「90畫素=1英吋」)。實際情況是瀏覽器會使用顯示器的實際畫素值有關,在目前大多數的設計者都傾向於使用畫素(px)作為單位。

2、em

就是本元素給定字型的 font-size 值,如果元素的 font-size 為 14px ,那麼 1em = 14px;如果 font-size 為 18px,那麼 1em = 18px。如下**:

p

上面**就是可以實現段落首行縮排 24px(也就是兩個字型大小的距離)。

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

3、百分比

p

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

CSS 顏色值 長度值

在網頁中的顏色設定是非常重要,有字型顏色 color 背景顏色 background color 邊框顏色 border 等,設定顏色的方法也有很多種 1 英文命令顏色 前面幾個小節中經常用到的就是這種設定方法 p2 rgb顏色 這個與 photoshop 中的 rgb 顏色是一致的,由 r red...

CSS中的 顏色值 長度值

p 這個與 photoshop 中的 rgb 顏色是一致的,由 r red g green b blue 三種顏色的比例來配色。p每一項的值可以是 0 255 之間的整數,也可以是 0 100 的百分數。如 p這種顏色設定方法是現在比較普遍使用的方法 其原理其實也是 rgb 設定,但是其每一項的值由...

CSS顏色 長度值 字型

顏色值 設定顏色的方法 1 英文命令顏色 p 2 rgb顏色 與 photoshop 中的 rgb 顏色是一致的,由 r red g green b blue 三種顏色的比例來配色。每一項的值可以是 0 255 之間的整數,也可以是 0 100 的百分數。示例 p 或 p 3 十六進製制顏色 使用比...