CSS基礎知識之position

xiaowugui666 發布于2019-08-30 12:56 / 1717人閱讀

摘要：最近在慕課網學習了網頁布局基礎和固定層效果，都是由聲音甜美的婧享人生老師所錄制，視頻詳細講解了中的用法，在此把學習筆記分享給大家。

最近在慕課網學習了網頁布局基礎和固定層效果，都是由聲音甜美的婧享人生老師所錄制，視頻詳細講解了CSS中position的用法，在此把學習筆記分享給大家。

CSS定位機制

標準文檔流（Normal flow）

浮動定位（Floats）

絕對定位（Absolute positioning）

標準文檔流

從上到下，從左到右，輸出文檔內容

由塊級元素和行級元素組成

塊級元素

從左到右撐滿頁面，獨占一行

觸碰到頁面邊緣時，會自動換行

常見的標簽有：div、ul、li、di、dt、p

行級元素

能在同一行內顯示

不會改變HTML文檔結構

常見的標簽有：input、span、label、strong、img

盒子模型

邊框（border）

外邊距（margin）

內邊距（padding）

盒子中的內容（content）

盒子模型尺寸=邊框+外邊距+內邊距+盒子中內容的尺寸

盒子3D模型

第一層：border

第二層：content + padding

第三層：background-image

第四層：background-color

第五層：margin

浮動定位

三個屬性：left（左浮動）、right（右浮動）、none（不浮動）

元素會左移、或右移、直到碰到容器為止

雖然脫離了標準文檔流，但情況有些特殊，詳情見CSS基礎知識之float

清除浮動的常用方法

clear屬性，常用clear:both;（當父包含塊縮成一條時無效）

同時設置width:100%（或固定寬度）+overflow:hidden;

相對定位

相對于自身原有位置進行偏移

仍處于標準文檔流中

隨即擁有偏移屬性和z-index屬性

絕對定位

建立了以包含塊為基準的定位

完全脫離了標準文檔流

隨即擁有偏移屬性和z-index屬性

絕對定位-偏移參考基準

未設置偏移量時，無論是否存在已定位的祖先元素，都保持在元素初始位置

已設置偏移量時，無已定位祖先元素，以為偏移參考基準

已設置偏移量時，有已定位祖先元素，以距其最近的已定位祖先元素為偏移參考基準

絕對定位-常見問題

沒有設置寬度時，元素的寬度根據內容進行調節

左右布局時，柱子層的高度，一定要大于絕對定位元素的高度

固定定位（也屬于絕對定位）

位置固定，不會隨滾動條變化

被他遮蓋的元素，可以從其下層穿過

固定定位-偏移參考基準

未設置偏移量時，無已定位祖先元素，以瀏覽器窗口為基準定位

未設置偏移量時，有已定位祖先元素，以祖先元素為基準定位

已設置偏移量時，無論是否存在已定位的祖先元素，均以瀏覽器窗口為基準定位

歡迎來到石佳劼的博客，如有疑問，請在「原文」評論區留言，我會盡量為您解答。

GPU云服務器云服務器 position，css position屬性，css 之基礎篇黑客基礎之DOS

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/115187.html

天坑，CSS之定位Position（六分之五）

摘要：下文稱位置屬性即為。注意，不會脫離文檔流，具體見下面的圖示。直譯為修正，簡單粗暴，直接相對瀏覽器窗口顯示區域定位。 Position定位個人覺得position這個屬性真的算是CSS的見面殺了。尤其是absolute，當年可是被虐的不輕。當然了，現在愛上了這個屬性，誰用誰知道。 position屬性 position是CSS的一個屬性，地位較高，也是我們重點要說的一個屬性。對應了四...

anRui 2019-08-02 10:56 評論0 收藏0
天坑，CSS之定位Position（六分之五）

摘要：下文稱位置屬性即為。注意，不會脫離文檔流，具體見下面的圖示。直譯為修正，簡單粗暴，直接相對瀏覽器窗口顯示區域定位。 Position定位個人覺得position這個屬性真的算是CSS的見面殺了。尤其是absolute，當年可是被虐的不輕。當然了，現在愛上了這個屬性，誰用誰知道。 position屬性 position是CSS的一個屬性，地位較高，也是我們重點要說的一個屬性。對應了四...

xuweijian 2019-08-30 15:54 評論0 收藏0
前端之CSS

摘要：不管你是滾動頁面還是背景設置的元素，它都會保持在相同的位置。當滾動元素時，背景會隨之滾動。目錄一.css三種引用方式 1.行間式 2.內聯式 3.外聯式 4.三種方式的優先級二.樣式與長度顏色 1.基本樣式 2.長度...

raise_yang 2019-04-23 13:22 評論0 收藏0
CSS基礎知識之float

摘要：前段時間寫過一篇基礎知識之，當時對的理解不太準確，被慕課網多名讀者指出原文已修正，如有誤導實在抱歉。浮動的基礎知識浮動有個屬性左浮動右浮動不浮動繼承。浮動元素脫離了標準文檔流，文字和行級元素會環繞該元素，塊級元素則不受影響。前段時間寫過一篇CSS基礎知識之position，當時對float的理解不太準確，被慕課網多名讀者指出（原文已修正，如有誤導實在抱歉）。現對float進行更深入的...

wuyangchun 2019-08-30 13:06 評論0 收藏0