CSS的position屬性經常被面試官拿出來考校同窗的前端基本功,分別回答幾個屬性值是static、absolute、relative、fixed、sticky並解答一些基本特性(直接百度獲得的)能夠算及格,想要進一步catch their eyes,須要更深刻的理解,這裏視角匯聚到absolute上,看看這個最具表明性的值能作多少文章。前端
絕對定位,top,right,bottom 和 left 屬性決定了該元素的最終位置,position:absolute經常和他們配套使用,完成對固定寬度元素的居中效果。面試
其實達到一重天,也足以知足一些面試官的胃口了,畢竟CSS雖然常考但不會做爲重中之重。不過若是你更進一步,讓面試官眼前一亮,你的競爭力就更加立體了。bash
咱們經常將絕對定位和top,right,bottom 和 left配套使用,你們都知道這種狀況下絕對定位元素是相對於第一個position不爲static的父元素定位的。因而慣性思惟,不管什麼時候,只要使用absolute,必定要將父元素設爲relative。這反而浪費了不少有趣好用的特性,不假思索的使用relative甚至會致使元素層疊順序受到潛移默化的影響(層疊問題這裏不深刻)。其實絕對定位元素在上下或左右方向沒有設置位置屬性時(未設置top、bottom或left、right)它的位置就是不設置absolute時在文檔中的位置,這點和relative挺像的,只不過仍然不佔據空間。因而乎這個相對特性能夠和margin配合,完成不少自適應的邊角位佈局,好比經典的右上角消息通知小圖標。這個特性甚至能夠和父元素的text-align:center配合完成水平居中,只要肯搗鼓,就會有驚喜。app
和麪試官聊到這些,其實已經彰顯了必定功底,不過還能夠接着擴展。佈局
絕對定位能使元素塊狀化,使得display的應用值變爲block,你們或許有所耳聞。一個元素被設爲絕對定位後,其display計算值就變爲了block,儘管其表現形式和inline-block相似——包裹內部元素且不超出包含塊的特性(網上有些說變爲inline-block的其實誤人子弟了)。按照以下方式在控制檯嘗試可驗證:spa
var span = document.createElement('span');
document.body.appendChild(span);
console.log('1.' + window.getComputedStyle(span).display);
span.style.position = 'absolute';
console.log('2.' + window.getComputedStyle(span).display);
輸出:
1.inline
2.block
複製代碼
到這還不完美,忽然提出應用值的概念,得防一手被追問應用值是什麼。其實CSS屬性有三個階段:指定值(specified value)->計算值(computed value)->應用值(used value)code
指定值其實就是咱們熟知的CSS賦值規則:繼承
1.在CSS文件中給屬性賦的值,優先使用。還涉及優先級比較,百度可知。ci
2.若是CSS文件中沒有給該屬性賦值,那麼它會嘗試從父元素那繼承一個值。文檔
3.若是上面的兩種途徑沒獲得有效值,則把CSS規範中針對這個元素的這個屬性的初始值(initial)做爲指定值。
計算值是對指定值進行計算後獲得的結果,計算值進行的計算一般爲將相對值轉換成絕對值(如 em 單位或百分比)。
應用值是由渲染引擎根據計算值得出實際的佈局尺寸,應用到渲染的頁面上的結果。能夠經過window.getComputedStyle方法得到應用值。
計算值和應用值的區別:對於不依賴於佈局的 CSS 屬性 (例如 display, font-size, line-height)計算值與應用值同樣,不然就會不同(例如height:auto,計算值爲auto,應用值爲實際高度,是實打實的像素,如100px)。
這樣,一整個小套路差很少成型了,其實absolute的東西不止這麼多,不過以上這些在面試官面前小小裝一波也足夠了。也歡迎小夥伴和我討論更多有特點的CSS用法和黑科技。