CSS--布局模型，颜色值，长度值
目錄
- 布局模型
- 流動模型（Flow）
- 浮動模型 (Float)
- 層模型（Layer）
- 顏色值
- 長度值
?一、布局模型
? ? ? ?網(wǎng)頁布局模型：個人理解，就是對html中各個元素進行一個排列。而排列的方法可以分為三種：流動模型、浮動模型、層模型。
二、流動模型
? ? ? 這是網(wǎng)頁默認情況的布局模式。
? ? ? 特征：
三、浮動模型
? ? ? 用來解決塊級元素的霸道特征，比如想讓兩個塊級元素處于同一行，就可以使用浮動模型；
? ? ? 具體表現(xiàn)形式：可以用css的float屬性，來控制元素浮動。
四、層模型
? ? ?? 類似photoshop中的圖層編輯功能一樣，讓每個html元素能夠在網(wǎng)頁中精確定位。
? ? ? 具體操作：用css的position屬性來支持層模型。
? ? ? 層模型有三種形式：
? ? ? 1、絕對定位（position: absolute）
? ? ? ? ? ? 將元素從文檔流中拖出來，然后使用left、right、top、bottom屬性相對于其最接近的一個具有定位屬性的父包含塊進行定位。
? ? ? ? ? ? 如果不存在這樣的包含塊，則相對于body元素，即相對于瀏覽器窗口。? ? ? ? ? ? ?
? ? ? ?2、相對定位（position：relative）
? ? ? ? ? ? 相對于之前的位置進行偏移。移動的方向和幅度由left、right、top、bottom屬性確定，偏移前的位置保留不動。
? ? ? ?3、固定定位（position: fixed）
? ? ? ? ? ? 和absolute類似，不過他是相對于視圖本身（屏幕內(nèi)的網(wǎng)頁窗口）。由于視圖本身是固定的，它不會隨瀏覽器窗口的滾動條滾動而變化，
? ? ? ? ? ? 除非你在屏幕中移動瀏覽器窗口的屏幕位置，或改變?yōu)g覽器窗口的顯示大小，
? ? ? ? ? ? 因此固定定位的元素會始終位于瀏覽器窗口內(nèi)視圖的某個位置，不會受文檔流動影響。
? ? ? ?4、absolute和relative的組合使用
? ? ? ? ? ? 回顧上面?absolute的關(guān)鍵點：1、參照物：它的父元素 ? 2、并且參照物必須是定位元素。
? ? ? ? ? ? relative的關(guān)鍵點：1、參照物：自己本身
? ? ? ? ? ? 所以如果需要將子元素相對父元素絕對定位時，就可以利用relative將父元素變?yōu)槎ㄎ辉?#xff0c;子元素使用absolute，就可以進行絕對定位了。
?五、顏色值
? ? ??在網(wǎng)頁中的顏色設(shè)置是非常重要，有字體顏色（color）、背景顏色（background-color）、邊框顏色（border）等，設(shè)置顏色的方法也有很多種：
? ? ? 1、英文命令顏色
? ? ? ? ? 比如：p{color:red;} 將顏色設(shè)置為紅色。 ??
? ? ? 2、RGB顏色? ? ? ? ??
? ? ? ? ? ?這個與?photoshop中的RGB顏色是一致的，由R(red)、G(green)、B(blue)?三種顏色的比例來配色。
p{color:rgb(133,45,200);}? ? ? ? ? 每一項的值可以是 0~255 之間的整數(shù)，也可以是 0%~100% 的百分數(shù)。如：
p{color:rgb(20%,33%,25%);}? ? ?3、十六進制顏色
? ? ? ? ?這種顏色設(shè)置方法是現(xiàn)在比較普遍使用的方法，其原理其實也是RGB設(shè)置，但是其每一項的值由?0-255?變成了十六進制00-ff。? ? ? ? ?
p{color:#00ffff;} 六、長度值目前比較常用到px（像素）、em、% 百分比，要注意其實這三種單位都是相對單位。
1、像素
? ? ? ?像素指的是顯示器上的小點（CSS規(guī)范中假設(shè)“90像素=1英寸”）。實際情況是瀏覽器會使用顯示器的實際像素值有關(guān)，在目前大多數(shù)的設(shè)計者都傾向于使用像素（px）作為單位。
? 2、em
? ? ??就是本元素給定字體的 font-size 值，如果元素的 font-size 為 14px ，那么 1em = 14px；如果 font-size 為 18px，那么 1em = 18px。如下代碼： p{font-size:12px;text-indent:2em;}
? ? ? ? ?上面代碼就是可以實現(xiàn)段落首行縮進 24px（也就是兩個字體大小的距離）。
? ? ? ? ?特殊情況：當(dāng)給 font-size 設(shè)置單位為?em?時，此時計算的標準以 它的父元素的 font-size 為基礎(chǔ)。
? ? ? ? ?3、百分比? ? ? ? ??
p{font-size:12px;line-height:130%}? ? ? ??設(shè)置行高（行間距）為字體的130%（12 * 1.3 = 15.6px）。
轉(zhuǎn)載于:https://www.cnblogs.com/lanleiming/p/5312994.html
總結(jié)
以上是生活随笔為你收集整理的CSS--布局模型，颜色值，长度值的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
