標籤（空格分隔）： 前端學習
參考css布局模型
在網頁中，元素有三種布局模型
流動模型(flow)
預設的網頁布局模式。其有兩個特徵：
浮動模型(float)
任何元素在預設情況下是不可浮動的，但是可以用css定義為浮動。
層模型(layer)
層模型三種形式：
相對定位
設定position: relative,通過left,right,top,bottom屬性確定元素在正常文件流中的偏移位置
相對於以前的位置位移，偏移前的位置保留不動。在使用相對定位時，就算元素被偏移了，但是他任然佔據著它沒偏移前的空間。
ps:類似於標準盒子模型中的margin
絕對定位
設定position: absolute，使元素從文件流中脫離，然後使用top,right,bottom,left屬性相對於其最近的乙個具有定位屬性的父包含塊進行絕對定位。如果不存在這樣的包含塊，則相對於body元素，即相對於瀏覽器視口
被設定了絕對定位的元素，在文件流中不佔據空間。
可以通過z-index來設定它們的堆疊順序
因為設定了絕對定位的元素已經脫離了正常的文件布局流，所以普通文件流中元素的布局就當絕對定位的元素不存在一樣，任然在文件流中的其他元素將忽略該元素並填補他原先的空間
浮動元素的定位還是基於正常的文件流的，只是將浮動元素從文件流中抽出並盡可能遠的移動至左側或右側，文字內容會圍繞在浮動元素周圍，它只是改變了文件流的顯示，而沒有脫離文件流。
固定定位
設定position: fixed，fixed和absolute類似，但是它的相對移動的座標是檢視(螢幕內的網頁視窗)本身。由於檢視本身是固定的，它不會隨瀏覽器視窗滾動條滾動而變化，除非你在螢幕中移動瀏覽器視窗的螢幕位置或者改變瀏覽器視窗的顯示大小。
相對定位可以和絕對定位混著使用，原則是：只要父div定義了定位屬性，子div就會跟著父div的位置去再定位
拓展：z-index：
CSS3布局模型
布局模型與盒模型一樣都是 css3 最基本 最核心的概念。但布局模型是建立在盒模型基礎之上，又不同於我們常說的 css3 布局樣式或 css3 布局模板。如果說布局模型是本，那麼 css3 布局模板就是末了，是外在的表現形式。css3包含3種基本的布局模型，用英文概括為 flow layer 和 f...
掌握css3布局
在傳統的浮動 定位基礎之上，css3提供了一系列新的布局方式，包括彈性盒模型 多列 查詢等，利用這些布局方式我們可以靈活地應對複雜網頁布局，本文通過屬性詳解 實戰案例的方式向您展示這些新興布局方式的強大之處。1.彈性盒模型 彈性盒布局模型 flexible box layout 是 css3 規範中...
css3 布局 文字
它主要應用在文字的多列布局方面，這種布局在報紙和雜誌上都使用了幾十年了，但要在web頁面上實現這樣的效果還是有相當大的難度，慶幸的是，css3的多列布局可以輕鬆實現 語法 columns 多列布局columns屬性引數主要就兩個屬性引數 列寬和列數。引數 引數說明 主要用來定義多列中每列的寬度 主要...