[html+css]HTML+CSS基礎課程:CSS布局模型

CSS包含3種基本的布局模型,分別是Flow、Layer和Float.
在網頁中,元素有三種布局模型:流動模型(Flow)、浮動模型(Float)和層模型(Layer)

流動模型

流動(Flow)是默認的網頁布局模式。
也就是說網頁在默認狀態下的HTML網頁元素都是根據流動模型來分布網頁內容的。
典型特征
1.塊狀元素都處在所處的包含元素內自上而下按順序垂直延伸分布,因為在默認狀態下,塊狀元素的寬度都為100%
2.在流動模型下,內聯元素都會在所處的包含元素內從左到右水平分布顯示。

浮動模型

通過CSS設置塊狀元素的float屬性,可以將多個塊狀元素顯示在同一行。如float:left;

層模型

通過CSS設置position屬性,來實現層布局模型。
層模型有三種形式:絕對定位(absolute)、相對定位(relative)和固定定位(fixed)。

一、絕對定位 position:absolute

將元素從文檔流中拖出來,然后使用left、rigth、top、bottom屬性相對于其最接近的一個具有定位屬性的父包含塊進行絕對定位。如果不存在這樣的包含塊,則相對于body元素,即相對于瀏覽器窗口。

二、相對定位 position:relative

通過left、rigth、top、bottom屬性確定元素在正常文檔流中的偏移位置。相對定位完成的過程是首先按static(float)方式生成一個元素(并且元素像層一樣浮動了起來),然后相對于以前的位置移動,移動的方向和幅度由left、right、top、bottom屬性確定,偏移前的位置保留不動。

三、固定定位 position:fixed

fixed:表示固定定位,與absolute定位類型類似,但它的相對移動的坐標是視圖(屏幕內的網頁窗口)本身。由于視圖本身是固定的,它不會隨瀏覽器窗口的滾動條滾動而變化,除非你在屏幕中移動瀏覽器窗口的屏幕位置,或改變瀏覽器窗口的顯示大小,因此固定定位的元素會始終位于瀏覽器窗口內視圖的某個位置,不會受文檔流動影響,這與background-attachment:fixed?屬性功能相同。

relative與absolute組合使用
1、參照定位的元素必須是相對定位元素的前輩元素
2、參照定位的元素必須加入position:relative;
3、定位元素加入position:absolute,便可以使用top、bottom、left、right來進行偏移定位了

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,792評論 1 92
  • CSS格式化排版 1、字體 我們可以使用css樣式為網頁中的文字設置字體、字號、顏色等樣式屬性。下面我們來看一個例...
    張文靖同學閱讀 1,301評論 0 3
  • 本文主要是起筆記的作用,內容來自慕課網. 認識CSS樣式 CSS全稱為“層疊樣式表 (Cascading Styl...
    0o凍僵的企鵝o0閱讀 2,662評論 0 30
  • Html 標簽 斜體 粗體 單獨的樣式 引用文本 長文本引用 換行 空格 分割線 地址信息 單行代碼 多行代碼 無...
    SunnySky_閱讀 563評論 0 5
  • 2011-11-16 23:18 希望 窗外的燈紅酒綠吹入眼眶 反射到鏡片上的卻是黯然消淡 眼神依舊 仍是強勁有力...
    戈壁黃沙閱讀 172評論 0 1