top、bottom、left、right
top、right、bottom、left應用於定位元素，position屬性設定後。
top、right、bottom、left的值設定為正值時，元素向內收縮，設定為負值時，向外擴張
偏移屬性定義了距離包含塊相應邊的偏移，而不是距離包含塊左上角的偏移。
calc()、border-sizing
父元素的width設定之後，當前元素width:100% 再進行margin、border、padding、font-size等設定會衝破父元素的盒模型，因此，解決這個問題用到了calc()屬性。（補充: width的長度是border+padding+element）
width：calc(100% - (border+padding)*2 )定位的方法有4種，它們分別是靜態（static），絕對定位（absolute），固定(fixed)，相對定位（relative）。
絕對定位（absolute）：將被賦予此定位方法的物件從文件流中拖出，使用left，right，top， bottom等屬性相對於其最接近的乙個具有定位設定的父級物件進行絕對定位（一般設定為relative），如果物件的父級沒有設定定位屬性，即還是遵循html定位規則的，則依據 body 物件左上角作為參考進行定位。絕對定位物件可層疊，層疊順序可通過 z-index 屬性控制，z-index值為無單位的整數，大的在最上面，可以有負值。
相對定位（relative）：物件不可層疊，依據left，right，top，bottom等屬性在正常文件流中偏移自身位置。同樣可以用z-index分層設計。
display: inline、block、inline-block
display:block
block元素會獨佔一行，多個block元素會各自新起一行。預設情況下，block元素寬度自動填滿其父元素寬度。
block元素可以設定width,height屬性。塊級元素即使設定了寬度,仍然是獨佔一行。
block元素可以設定margin和padding屬性。
display:inline
inline元素不會獨佔一行，多個相鄰的行內元素會排列在同一行裡，直到一行排列不下，才會新換一行，其寬度隨元素的內容而變化。
inline元素設定width,height屬性無效。
inline元素的margin和padding屬性，水平方向的padding-left, padding-right, margin-left, margin-right都產生邊距效果；但豎直方向的padding-top, padding-bottom, margin-top, margin-bottom不會產生邊距效果。
display:inline-block
簡單來說就是將物件呈現為inline物件，但是物件的內容作為block物件呈現。之後的內聯物件會被排列在同一行內。比如我們可以給乙個link（a元素）inline-block屬性值，使其既具有block的寬度高度特性又具有inline的同行特性
CSS定位問題
在看這篇文章是，希望大家對css盒式模型有所了解，不清楚的點這裡。一 定位概述 在說明定位問題前，我們先聊聊div這個元素。通常我們把p h1或div元素常常稱為塊級元素。這意味著這些元素顯示為一塊內容，即 塊框 塊框從上到下乙個接乙個地垂直排列。與之相反，strong和span等元素稱為行內元素，...
css定位問題
在進行頁面布局的時候，我們會用到定位，用於將元素放置在我們想要 ue原型圖或者ui設計稿 的位置，達到設計要求。定位的4個關鍵字，分別是static 靜態的，預設是這個屬性 fixed 固定的 absolute 絕對的 以及relative 相對的 不會脫離正常文件流的定位屬性有 static和re...
css定位z index問題
1.某些瀏覽器下元素層級遮蓋存在bug 2.某個元素z index設的太大，導致始終無法被遮蓋 3.js動態計算z index，導致元素覆蓋關係部可控 層級遮蓋bug出現的原因 ie6 7對z index的表現跟ie8及以上瀏覽器不一致。position值為非static時，如果不設定z index...