css常見的三種布局模式有：流動模型（flow）、浮動模型 (float)、層模型（layer）（1）塊狀元素自上而下占行：塊狀元素都會在所處的包含元素內自上而下按順序垂直延伸分布，因為在預設狀態下，塊狀元素的寬度都為100%。實際上，塊狀元素都會以行的形式佔據位置。
（2）行內元素從左到右：在流動模型下，內聯元素都會在所處的包含元素內從左到右水平分布顯示。一，布局模型與盒模型一樣都是 css 最基本、 最核心的概念。在網頁中，元素有三種布局模型：
1，流動模型（flow）
2，浮動模型 (float)
3，層模型（layer）
二，流動布局模型
流動布局模型具有兩個比較典型的特徵：
（1）塊狀元素都會在所處的包含元素內自上而下按順序垂直延伸分布，因為在預設狀態下，塊狀元素的寬度都為100%。實際上，塊狀元素都會以行的形式佔據位置。
（2）在流動模型下，內聯元素都會在所處的包含元素內從左到右水平分布顯示。
三，浮動布局模型
任何元素在預設情況下是不能浮動的，但可以用 css 定義為浮動，如 div、p、table、img 等元素都可以被定義為浮動。例：實現兩個 div 元素一行顯示
div
="div1">
="div2">
四，層模型
（一）層模型有三種形式：
1、絕對定位(position: absolute)
2、相對定位(position: relative)
3、固定定位(position: fixed)
（二）絕對定位
設定position:absolute(表示絕對定位)，這條語句的作用將元素從文件流中拖出來，然後使用left、right、top、bottom屬性相對於其最接近的乙個具有定位屬性的父包含塊進行絕對定位。如果不存在這樣的包含塊，則相對於body元素，即相對於瀏覽器視窗。例：如下面**可以實現div元素相對於瀏覽器視窗向右移動100px，向下移動50px。
div
="div1">
如果想為元素設定層模型中的相對定位，需要設定position:relative（表示相對定位），它通過left、right、top、bottom屬性確定元素在正常文件流中的偏移位置。相對定位完成的過程是首先按static(float)方式生成乙個元素(並且元素像層一樣浮動了起來)，然後相對於以前的位置移動，移動的方向和幅度由left、right、top、bottom屬性確定，偏移前的位置保留不動。
那麼問題來了，什麼叫做「偏移前的位置保留不動」。例如下**，我們為後新增新增乙個p標籤
#div1
="div1">
>測試什麼叫做偏移前的位置保持不動
當我們將的位置實現相對於以前位置向下移動50px，向右移動100px之後再來觀察標籤的位置；
#div1
="div1">
>測試什麼叫做偏移前的位置保持不動
發現什麼了吧！！！
這就是「偏移前的位置保持不動」。
（三）固定定位
fixed：表示固定定位，與absolute定位型別類似，但它的相對移動的座標是檢視（螢幕內的網頁視窗）本身。由於檢視本身是固定的，它不會隨瀏覽器視窗的滾動條滾動而變化，除非你在螢幕中移動瀏覽器視窗的螢幕位置，或改變瀏覽器視窗的顯示大小，因此固定定位的元素會始終位於瀏覽器視窗內檢視的某個位置，不會受文件流動影響，這與background-attachment:fixed;屬性功能相同。以下**可以實現相對於瀏覽器檢視向右移動100px，向下移動50px。並且拖動滾動條時位置固定不變。
三種方式搞定CSS的雙列布局
左邊一列固定，右邊一列自動填滿 left float left 和固定寬度 width 300px right margin left 300px left,right left right style left 固定列 左邊div right 自適應列 右邊div body left float ...
實現CSS布局的三種機制和常見頁面的三種布局
css提供三種機制來設定盒子的擺放位置，分別是普通流 浮動 定位，其中，1.普通流 標準流 2.浮動 概念 元素的浮動是指設定了浮動屬性的元素會脫離標準普通流的控制，移動到其父元素中指定位置的過程。與兄弟盒子的關係 注 當元素新增浮動後，會具有行內塊級元素的特性 元素的大小取決於 內容的大小和元素內...
三種方法實現CSS三欄布局
本文由雲 社群發表 本文會分別介紹三種css實現三欄布局的方法，可在瀏覽器中開啟檢視效果 實現方法 需要左欄向左浮動，右欄向右浮動，中間設左右margin來撐開距離 doctype html en utf 8 css實現三欄布局1 title text css body left middle ri...