如果，說浮動， 關鍵在乙個 「浮」 字上面， 那麼 我們的定位，關鍵在於乙個 「位」 上。
定位是難點，一定要學好
那麼定位，最常運用的場景再那裡呢？
如果用標準流或者浮動，實現會比較複雜或者難以實現，此時我們用定位來做，just soso！
元素的定位屬性主要包括定位模式和邊偏移兩部分。
1、邊偏移
邊偏移屬性
描述top
頂端偏移量，定義元素相對於其父元素上邊線的距離
bottom
底部偏移量，定義元素相對於其父元素下邊線的距離
left
左側偏移量，定義元素相對於其父元素左邊線的距離
right
右側偏移量，定義元素相對於其父元素右邊線的距離
也就說，以後定位要和這邊偏移搭配使用了， 比如 top: 100px; left: 30px; 等等
2、定位模式(定位的分類)
在css中，position屬性用於定義元素的定位模式，其基本語法格式如下：
選擇器position屬性的常用值值描述
static
自動定位（預設定位方式）
relative
相對定位，相對於其原文件流的位置進行定位
absolute
絕對定位，相對於其上乙個已經定位的父元素進行定位
fixed
固定定位，相對於瀏覽器視窗進行定位
靜態定位是所有元素的預設定位方式，當position屬性的取值為static時，可以將元素定位於靜態位置。 所謂靜態位置就是各個元素在html文件流中預設的位置。
白話：網頁中所有元素都是靜態定位，也就是標準流的特性
在靜態定位下，沒有偏移量
ps ：沒啥好講的
相對定位不脫標（不脫離標準流）
相對定位是將元素相對於它在標準流中的位置進行定位，當position屬性的取值為relative時，可以將元素定位於相對位置。
注意： 1.元素相對定位後，雖然可以用便偏移量改變位置，但是在文件流中的位置仍保留。
2.每次移動的位置，都是以自己的左上角為基點移動
浮動：多個塊級元素一行顯示
相對定位：主要價值就是移動位置
絕對定位完全脫標
當position屬性的取值為absolute時，可以將元素的定位模式設定為絕對定位。
若所有父元素都沒有定位，以瀏覽器為準對齊(document文件)。
絕對定位是將元素依據最近的已經定位（絕對、固定或相對定位）的父元素（祖先）進行定位。
非常重要，是我們的口訣
首先，絕對定位是將元素依據最近的已經定位絕對，固定，相對的父元素(祖先)進行定位。
也就是說,子級絕對定位，父級只要是定位(除static靜態定位)就可以，也就是說，子絕父絕也行
那麼，為何父級要求時相對定位呢？
子級絕對定位，父級就用相對定位(最優解),因為子級時絕對定位不佔位置，就可放在父級的任何位置
因為父盒子在布局時，需要占有位置，因此父級要相對定位
都是乙個意思。
最普通的布局叫標準流
普通的盒子是左右margin 改為 auto就可， 但是對於絕對定位就無效了
水平居中的演算法:
1.left 50% ，父盒子的一半大小
2.再有外邊距負的一半值即可
它以瀏覽器視窗作為參照物來定義網頁元素。當position屬性的取值為fixed時，即可將元素的定位模式設定為固定定位。
固定定位是一種特殊的絕對定位
當對多個元素同時設定定位時，定位元素之間有可能會發生重疊。
1.預設值是0，取值越大，定位元素越居上
2.取值相同，看書寫順序
3.數字沒有單位
4.只有定位才有該屬性，浮動，標準流，靜態定位都沒有該屬性
定位模式
是否脫標（脫離標準流）
是否使用偏移量
移動位置基準
靜態static
不脫標，正常模式
不可以正常
相對定位relative
不脫標，占有位置
可以相對與自己移動
絕對定位absolute
脫標，不佔位置
可以相對於定位父級移動
固定定位fixed
脫標，不佔位置
可以相對於瀏覽器移動
跟 浮動一樣， 元素新增了 絕對定位和固定定位之後， 元素模式也會發生轉換， 都轉換為 行內塊模式，
在css中有三個顯示和隱藏的單詞比較常見，我們要區分開，他們分別是 display visibility 和 overflow。
display 設定或檢索物件是否及如何顯示。
none 隱藏功能
block 除了轉換成塊級元素外，還有顯示元素功能
特點：隱藏之後，不保留位置
設定或檢索是否顯示物件。
visible : 物件可視
hidden : 物件隱藏
特點：隱藏之後，繼續保留位置
檢索或設定當物件的內容超過其指定高度及寬度時如何管理內容。
/*overflow: visible;*/ /*預設值,超出顯示*/
/*overflow: auto;*/ /*自動 超出顯示滾動條,不超出不顯示滾動條*/
/*overflow: scroll;*/ /*一直顯示滾動條*/
overflow: hidden; /*不顯示超出的內容,超出的內容隱藏*/
設定或檢索在物件上移動的滑鼠指標採用何種系統預定義的游標形狀。
cursor : default 小白 | pointer 小手 | move 移動 | text 文字>
style
="cursor
:default
">
我是小白li
>
style
="cursor
:pointer
">
我是小手li
>
style
="cursor
:move
">
我是移動li
>
style
="cursor
:text
">
我是文字li
>
ul>
是繪製於元素周圍的一條線，位於邊框邊緣的外圍，可起到突出元素的作用。
outline
: outline-color ||outline-style || outline-width
最直接的寫法是 ： outline: 0;
type
="text"
style
="outline
: 0;
"/>
右下角可以拖拽：
右下角不可以拖拽：
style
="resize
: none;
">
textarea
>
以前我們還講過讓文字居中對齊，是 text-align: center;
但是我們從來沒有講過有垂直居中的屬性， 我們的媽媽一直很擔心我們的垂直居中怎麼做。
vertical-align 垂直對齊， 這個看上去很美好的乙個屬性， 實際有著不可捉摸的脾氣，否則我們也不會這麼晚來講解。
vertical-align
: baseline |top |middle |bottom
vertical-align 不影響塊級元素中的內容對齊，它只針對於 行內元素或者行內塊元素，特別是行內塊元素， 通常用來控制和表單等。
所以我們知道，我們可以通過vertical-align 控制和文字的垂直關係了。 預設的會和文字基線對齊。
解決的方法就是：
給img vertical-align:middle | top等等。 讓不要和基線對齊。
給img 新增 display：block; 轉換為塊級元素就不會存在問題了。
normal 使用瀏覽器預設的換行規則。
break-all 允許在單詞內換行。
keep-all 只能在半形空格或連字元處換行。
text-overflow : clip | ellipsis
設定或檢索是否使用乙個省略標記（…）標示物件內文字的溢位
clip : 不顯示省略標記（…），而是簡單的裁切
ellipsis : 當物件內文字溢位時顯示省略標記（…）
CSS 相對 絕對定位 張鑫旭部落格
我對position absolute屬 性化的認識 absolute是乙個善良的有個性的，我行我素 喜歡凌駕一切之上的魔鬼。這傢伙，不喜歡也算不上討厭，但是知道沒事最好少招惹，免有後患。先給大家講個故事吧。曾經有兩個魔鬼兄弟，乙個叫浮動，乙個叫絕對定位，它們總是一起在空中飛行戲耍的。但是，不幸的是...
css 定位連線 css絕對定位
定位的四種模式 static,relative,absolute,fixed 定位的四個位置 left,right,top,bottom 定位屬性 position,有四種狀態值 1.static 靜態定位,按元素在文件流中的順序排列,這是預設值,四個位置無效 2.relative 相對定位,元素相...
CSS定位 浮動定位
css定位機制 浮動定位 float屬性 進行浮動定位 left，right clear屬性 清除浮動 left，right，both float屬性 1.概述 div實現橫向多列布局 float屬性 left 左浮動 right 右浮動 none 不浮動 下圖為 的實現 float屬性用途 在 混...