揭開CSS的絕對定位真實的面紗(一)

2021-07-29 07:01:58 字數 901 閱讀 6909

二. 絕對定位

絕對定位比相對定位更靈活。

絕對定位的盒子,是脫離標準文件流的。所以,所有的標準文件流的性質,絕對定位之後都不遵守了。

絕對定位之後,標籤就不區分所謂的行內元素、塊級元素了,不需要display:block;就可以設定寬、高了:

**如下:

1  span

絕對定位要有乙個參考點,絕對定位的參考點,如果用top描述,那麼定位參考點就是頁面的左上角,而不是瀏覽器的左上角:

如果用bottom描述,那麼就是瀏覽器首屏視窗尺寸,對應的頁面的左下角

絕對定位之後,所有標準流的規則,都不適用了。所以margin:0 auto;失效。

5margin-left: -300px;   → 寬度的一半

非常簡單,當做公式記憶下來。就是left:50%; margin-left:負的寬度的一半。

揭開CSS的絕對定位真實的面紗(二)

乙個絕對定位的元素,如果父輩元素中出現了也定位了的元素,那麼將以父輩這個元素,為參考點。需要注意一下幾點 1.要聽最近的已經定位的祖先元素的,不一定是父親,可能是爺爺 1 相對定位 2 沒有定位 3 絕對定位,將以box1為參考,因為box2沒有定位,box1就是最近的父輩元素 4 5 1 相對定位...

揭開Socket程式設計的面紗

對tcp ip udp socket程式設計這些詞你不會很陌生吧?隨著網路技術的發展,這些詞充斥著我們的耳朵。那麼我想問 1.什麼是tcp ip udp?2.socket在 呢?3.socket是什麼呢?4.你會使用它們嗎?什麼是tcp ip udp?tcp ip transmission cont...

揭開Socket程式設計的面紗

對tcp ip udp socket程式設計這些詞你不會很陌生吧?隨著網路技術的發展,這些詞充斥著我們的耳朵。那麼我想問 1.什麼是tcp ip udp?2.socket在 呢?3.socket是什麼呢?4.你會使用它們嗎?什麼是tcp ip udp?tcp ip transmission cont...