我們在css布局中,一般情況使用以下三種情況進行定位布局:
垂直布局:
標準流(normal flow)也叫常規流,文件流.在你使用div,span,p標籤進行布局時,預設就是使用標準流進行布局.
標準流是垂直布局,是由塊元素及其行內元素構成的.從上到下、從左到右按順序擺放好
預設情況下，互相
之間不存在層疊現象.
而在標準流中,常用到margin和padding元素對其定位,margin也可為負數.但是,用margin和padding定位時
通常會影響到標準流中其他元素的定位效果.
層疊布局:
position屬性
position可以對元素進行定位,常用取值有4個,
relative-相對定位
元素按照標準流進行布局
可以通過left、right、top、bottom的數值進行定位
定位參照物件是元素自己原來的位置
相對定位的優勢在於,可以在不影響其他元素位置的前提下,對當前元素進行位置上的微調.
fixed-固定定位
元素脫離標準流(簡稱脫標)
可以通過left、right、top、bottom的數值進行定位
不再受標準流的寬高影響,可層疊在標準流之上,
定位參照物件是視口(文件的可視區域)
畫布(用於渲染文件的區域)滾動時,固定保持不動
static-靜態定位
為預設值,元素按照標準流進行布局,left、right、top、bottom沒有任何作用!
absolute-絕對定位
元素脫離標準流(脫標)
可以通過left、right、top、bottom的數值進行定位
定位參照物件是最鄰近的定位祖先元素,如果找不到這樣的祖先元素,參照物件是body
脫標元素的特點
z-index屬性
用來設定定位元素的層疊順序(僅僅只對定位元素有效)
取值可為正負整數,0
比較原則
如果是兄弟關係
z-index
越大，層疊在越上面
z-index
相等，寫在後面的那個元素層疊在上面
如果不是兄弟關係
各自從元素自己以及祖先元素中，找出最鄰近的
2個定位元素進行比較
而且這2個定位元素必須有設定
z-index
的具體數值
水平布局
float
可以通過float屬性讓元素產生浮動效果，float的常用取值
元素一旦浮動後就會脫標,
朝著向左或向右方向移動
直到自己的邊界緊貼著包含塊（一般是父元素）或者其他浮動元素的邊界為止.
定位元素會層疊在浮動元素上面.
浮動元素不能與行內級內容層疊，行內級內容將會被浮動元素推出.
比如行內級元素、inline-block元素、塊級元素的文字內容
浮動存在的問題
由於浮動元素脫離了標準流，變成了脫標元素，所以不再向父元素匯報高度. 父
元素計算總高度時，就不會計算浮動
子元素的高度，導致了高度坍塌的問題.
那麼如何解決高度坍塌問題呢?我們需要用到清浮動
清浮動的目的
讓父元素計算
總高度的時候，把浮動子元素的高度算進去
而清浮動的方式有很多,但大多都有各式各樣的不足,這裡只介紹一種個人認為最為成熟的方式
.container::after
/* 為了適配以前的舊瀏覽器，還需要這麼寫 */
.container::after
最後,介紹下clear屬性
clear
的常用取值
left
：要求元素的頂部低於之前生成的所有
左浮動元素的底部
right
：要求元素的頂部低於之前生成的所有
右浮動元素的底部
both
：要求元素的頂部低於之前生成的所有浮動元素的底部
none
：預設值，無特殊要求
一般就只用在非浮動元素上，可以讓非浮動元素與浮動元素不層疊.
CSS常用布局實現方法
css 布局對我來說，既熟悉又陌生。我既能實現它，又沒有很好的了解它。所以想總結一下，梳理一下 css 中常用的一列，兩列，三列布局等的實現方法。本文小白，僅供參考。但也要了解下浮動，定位等。一 一列布局 1.居中定寬 這算是最簡單且最容易實現的布局了吧。列出最核心的 css body head,m...
CSS 常用布局
1.寬度100 自適應視窗寬度 content content 只是定義了寬度為100 背景為白色與body色加以區分 footer footer 2.寬度100 最小定寬780px content content 只是定義了寬度為100 背景為白色與body色加以區分 這個布局中我們使用了min ...
css常用布局
單列布局長這個樣子，主要有兩種 普通單欄，通欄的單欄布局 比較簡單，設定 定寬 水平居中即可 頭部 內容尾部 執行結果鏈結描述 瀏覽器寬度超過960px時，外margin出現。當收縮瀏覽器寬度，小於960px時，margin為0，出現滾動條。執行結果鏈結描述 在header 和footer上再包裹一...