css包含3種基本的布局模型，用英文概括為：flow、layer 和 float。
在網頁中，元素有三種布局模型：
1、流動模型（flow）
2、浮動模型 (float)
3、層模型（layer）
流動模型：流動（flow）是預設的網頁布局模式
流動布局模型具有2個比較典型的特徵：
1、塊狀元素都會在所處的包含元素內自上而下按順序垂直延伸分布，因為在預設狀態下，塊狀元素的寬度都為100%。實際上，塊狀元素都會以行的形式佔據位置。
2、在流動模型下，內聯元素都會在所處的包含元素內從左到右水平分布顯示。
浮動模型：實現讓兩個塊狀元素併排顯示，任何元素在預設情況下是不能浮動的，但可以用 css 定義為浮動。
例如：
float
:left;(float
:right;)
層模型有三種形式：
1、絕對定位(position: absolute)
2、相對定位(position: relative)
3、固定定位(position: fixed)
絕對定位：設定position:absolute(表示絕對定位)，這條語句的作用將元素從文件流中拖出來，然後使用left、right、top、bottom屬性相對於其最接近的乙個具有定位屬性的父包含塊進行絕對定位。如果不存在這樣的包含塊，則相對於body元素，即相對於瀏覽器視窗。(使用position:absolute可以實現被設定元素相對於瀏覽器（body）設定定位)
相對定位：設定position:relative（表示相對定位），它通過left、right、top、bottom屬性確定元素在正常文件流中的偏移位置。相對定位完成的過程是首先按static(float)方式生成乙個元素(並且元素像層一樣浮動了起來)，然後相對於以前的位置移動，移動的方向和幅度由left、right、top、bottom屬性確定，偏移前的位置保留不動。
absolute表裡如一，移動了就是移動了。relative只是表面顯示移動了，但實際還在文件流中原有位置，別的元素無法佔據。
固定定位：fixed：表示固定定位，與absolute定位型別類似，但它的相對移動的座標是檢視（螢幕內的網頁視窗）本身。由於檢視本身是固定的，它不會隨瀏覽器視窗的滾動條滾動而變化，除非你在螢幕中移動瀏覽器視窗的螢幕位置，或改變瀏覽器視窗的顯示大小，因此固定定位的元素會始終位於瀏覽器視窗內檢視的某個位置，不會受文件流動影響。
relative和absolute組合使用：實現相對於其他元素的定位
例如：
**重點內容**
1、**參照定位的元素必須是相對定位元素的前輩元素**：
id="box1">
id="box2">相對參照元素進行定位div>
div>
從上面**可以看出box1是box2的父元素（父元素當然也是前輩元素了）。
2、**參照定位的元素必須加入position:relative**;
#box1
3、**定位元素加入position:absolute，便可以使用top、bottom、left、right來進行偏移定位了**。
#box2
HTML CSS學習筆記
利用標籤中style屬性來改變每個標籤的顯示樣式 適用於單個標籤的樣式修改。不靈活 this is p tag 內嵌形式 可用於同類標籤的樣式統一修改 依然不夠靈活 表示後面的所有table中的文字預設顏色如我所設定。前提是已經存在乙個定義好的css檔案，網頁的一部分樣式需要用到，那麼可以採用這種方...
html css學習筆記
本人正經職業位android 開發，無奈現在社會壓力太大，對做人的要求越來越高，只掌握一門技術根本不好意思說自己是一名程式設計師，更無法在這個社會生存。本人只好順應時代發展的需要，不斷提高自己的綜合水平，提高對自身的要求，選擇了去學習html和css等前端的有關知識，新手入門，記錄一些學習過程中的筆...
html css學習筆記
1.html結構標準 2.css樣式標準 3.js行為標準1.ie 2.谷歌 3.火狐 4.蘋果 5.歐朋 注意 其他瀏覽器都用別人瀏覽器技術，只是更換了 doctype html 描述當前檔案的版本資訊，如果沒有詳細說明就是5.0版本 html html檔案 head 網頁的頭部 meta cha...