關於CSS的定位機制Ⅰ
㈠概念
對於盒子模型來說，也就是頁面元素，這些盒子究竟在頁面的什么位置，怎樣排列它，那么找到它的位置，確定它的位置，這個就是定位機制所決定的。
㈡分類
文檔流， 浮動定位，層定位
㈢三種類型定位的功能
⑴文檔流定位（normal flow） 默認
我們不需要額外的設置，每種元素它們在當前的網頁上面呈現出來的狀態都不同，文檔流定位就相當於我們平常寫字一樣，都是從上到下，從左到右，只是有的元素會單獨占一行，有的元素跟其他元素在一行上顯示。
⑵浮動定位（float）
改變默認的文檔流定位的情況，用div區域做出兩個盒子希望它水平的並排排列，這時候要讓它脫離文檔流，讓它浮動起來。一個向左浮動，一個向右浮動。這樣就形成了這種並排排列的感覺。當我們要對一個大盒子里面拆分成若干列的時候，通常采用這樣的浮動定位。
⑶層定位（layer） 設置一個position屬性
希望當前網頁元素向圖層一樣前后層疊在一起，有一個疊加的效果，擺在上面的層可以遮蔽掉下面的層，此時選擇層定位的方式。
㈣文檔流定位
Ⅰ元素分類---block
⑴元素的特點
1.獨占一行
2.元素的height，width，margin，padding都可以設置
⑵常見的block元素
<div>,<p>,<h1>....<h6>,<ol>,<ul>,<table>,<form>
⑶元素的轉換類型：display屬性
例如：a{display：block；} inline元素a轉換為block元素，從而使a元素具有塊狀元素的特點。
Ⅱ 元素分類—inline
⑴元素的特點
1.不單獨占一行，即寬度夠用的情況下，所有的inline類型的元素都在一行顯示
2.width，height不可設置
3.width就是它包含的文字或圖片的寬度，不可改變
⑵常見的inline元素
<span>,<a>
⑶將元素顯示為inline元素
例如：div{display：inline；}
⑷inline元素之間有一個間距的問題
方法：將inline轉換成block等其他類型的元素來進行顯示。
Ⅲ 元素的分類—inline-block
⑴元素的特點
①不單獨占用一行
②元素的height，width，margin，padding都可以設置
⑵常見的inline-block元素：<img>
⑶將元素顯示為inline-block元素
例如：display：inline-block；
Ⅳ 元素類型轉換：display屬性
⑴display：none 元素不會被顯示
⑵display：block 顯示為block元素
⑶display：inline 顯示為inline元素
⑷display：inline-block 顯示為inline-block元素
小結：如下圖所示
希望有所幫助。