css5定位

css

  • 一.定位
    • 1.概念(定位=定位模式+邊位移)
    • 2.靜態位移static(不常用)
    • 3.相對定位relative(不脫標)(占位置)
    • 4.絕對定位absolute(脫標)(不占位置)
    • 5.固定定位fixed(脫標)(不占位置)(一個小算法)
    • 6.粘性定位sticky(不脫標)(占位置)
    • 7.總結
  • 二.子絕父相
  • 三.疊放次序(z-index)(定位的盒子才用)
  • 四.定位拓展
    • 1.絕對定位盒子居中
    • 2.定位的特殊性
    • 3.脫標的盒子不會觸動外邊距塌陷
    • 4.絕對(固定)定位會壓住盒子
  • 五.元素的顯示與隱藏
    • 1.display
    • 2.visibility
    • 3.overflow
    • 4.總結
  • 六.網頁布局總結

一.定位

1.概念(定位=定位模式+邊位移)

why
在這里插入圖片描述
定位模式
在這里插入圖片描述
邊位移
在這里插入圖片描述

2.靜態位移static(不常用)

相當于標準流,無邊位移
在這里插入圖片描述

3.相對定位relative(不脫標)(占位置)

在這里插入圖片描述

4.絕對定位absolute(脫標)(不占位置)

在這里插入圖片描述

5.固定定位fixed(脫標)(不占位置)(一個小算法)

在這里插入圖片描述
eg:
在這里插入圖片描述
在這里插入圖片描述

6.粘性定位sticky(不脫標)(占位置)

在這里插入圖片描述

7.總結

在這里插入圖片描述

二.子絕父相

在這里插入圖片描述

三.疊放次序(z-index)(定位的盒子才用)

在這里插入圖片描述

四.定位拓展

1.絕對定位盒子居中

eg:在這里插入圖片描述

在這里插入圖片描述

2.定位的特殊性

絕對定位和固定定位和浮動類似
不需要display即可有行內塊屬性

在這里插入圖片描述

3.脫標的盒子不會觸動外邊距塌陷

浮動的盒子也不會
只有標準流會

在這里插入圖片描述

4.絕對(固定)定位會壓住盒子

but
浮動不會
在這里插入圖片描述

五.元素的顯示與隱藏

1.display

在這里插入圖片描述

2.visibility

在這里插入圖片描述

3.overflow

在這里插入圖片描述

4.總結

在這里插入圖片描述

六.網頁布局總結

在這里插入圖片描述

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/710928.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/710928.shtml
英文地址,請注明出處:http://en.pswp.cn/news/710928.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

VScode 單步斷點調試Nodejs方法總結

目錄 方法一 方法二 方法三 方法一 使用vscode開發nodejs程序,能夠啟動單步調試模式,在指定代碼處添加斷點,像chrome、firefox瀏覽器上一樣進行JavaScript的調試。 新建一個nodejs的工程,編寫代碼后,配置代碼調試的步驟: 1、切換到代碼調試界面 2、界面提示,新建一…

mybatis-plus中service層的CRUD使用示例

mybatis-plus service層的CRUD使用示例 MyBatis-Plus 是 MyBatis 的增強工具,在 MyBatis 的基礎上提供了更便捷的 CRUD 操作、分頁查詢、代碼生成等功能。在 Service 層使用 MyBatis-Plus 進行 CRUD 操作,通常需要創建一個 Service 類來調用 MyBatis-Pl…

基于springboot實現在線考試系統項目【項目源碼+論文說明】

基于springboot實現在線考試系統演示 摘要 時代在變化,科技技術以無法預測的速度在達到新的高度,并且被應用于社會生活的各個領域,隨著生活的加快,也使很多潛在的點逐漸突顯出來,社會對于人才的要總是非常迫切的&…

VScode保存自動格式化

要在Visual Studio Code(VS Code)中關閉保存自動格式化功能,您可以按照以下步驟操作: 1.打開VS Code編輯器。 2.點擊左上角的“文件”菜單,然后選擇“首選項”。 3.在彈出的菜單中,選擇“設置”選項。…

IDEA-DeBug理論與實踐

文章目錄 01_Debug簡介和意義02_IDEA中的Debug步驟03_跳轉到當前代碼執行的行04_步過調試的使用05_步入調試的使用06_強制步入調試的使用07_步出調試的使用08_回退斷點調試的使用09_運行到光標處10_計算表達式11_條件斷點12_多線程調試 在軟件開發中,IDEA&#xff0…

THINKPHP 跨域報錯解決方案

報錯:has been blocked by CORS policy: Response to preflight request doesnt pass access control check: No Access-Control-Allow-Origin header is present on the requested resource. 環境:thinkphp6 nginx 今天和VUE配合調用接口的時候發現跨…

果園預售系統|基于Springboot的果園預售系統設計與實現(源碼+數據庫+文檔)

果園預售系統目錄 目錄 基于Springboot的果園預售系統設計與實現 一、前言 二、系統功能設計 三、系統功能設計 1 、果園管理 2、水果管理 3、果樹管理 4、公告管理 四、數據庫設計 1、實體ER圖 五、核心代碼 六、論文參考 七、最新計算機畢設選題推薦 八、源碼獲…

常見的4種Bug 出現原因和解決方案

某項目定期進行線上Bug分析大會,主要針對近期出現的Bug和事故進行分析其出現的原因。經過一段時間的數據分析和匯總,找到了在開發過程中,較為常見的Bug以及其出現的原因。 通過分析原因,進一步找到解決方案,從而有利于…

2024.02.29作業

1. TCP模型 server #include "test.h"#define SER_IP "192.168.191.128" #define SER_PORT 9999int main(int argc, char const *argv[]) {int sfd -1;sfd socket(AF_INET, SOCK_STREAM, 0);if (-1 sfd){perror("socket error");return -1;…

Java底層自學大綱_數據結構和算法篇

數據結構和算法專題_自學大綱所屬類別學習主題建議課時(h) A 數據結構和算法001 數據結構和算法基礎,時間復雜度Ot和空間復雜度Os2.5 A 數據結構和算法002 數學知識回顧-指數、對數、級數、模運算、復雜度2.5 A 數據結構和算法003 高數知識…

算法沉淀——動態規劃之兩個數組的 dp(上)(leetcode真題剖析)

算法沉淀——動態規劃之兩個數組的 dp 01.最長公共子序列02.不相交的線03.不同的子序列04.通配符匹配 01.最長公共子序列 題目鏈接:https://leetcode.cn/problems/longest-common-subsequence/ 給定兩個字符串 text1 和 text2,返回這兩個字符串的最長 …

0201sherlock(福爾摩斯)-通過名稱尋找媒體賬號(地址)-github-開源項目學習

文章目錄 一 項目簡介二 項目安裝和演示1 安裝2 演示 三 源碼分析1 項目結構2 主程序源代碼分析 四 添加自定義網址結語 一 項目簡介 二 項目安裝和演示 1 安裝 # clone the repo $ git clone https://github.com/sherlock-project/sherlock.git# change the working direct…

前端訪問線上的html 怎么給html 的js中傳遞 訪問路徑

1.需求 我想在項目中訪問一個html 文件 這個html 文件中 跳轉的又是另一個地址 。這個需求是為了讓實現公眾號H5 的重定向登錄 主要是 一個oem 系統 他有多個公眾號 但是每個公眾號 都有對應不用的域名 2.動態域名 <!DOCTYPE html> <html lang"zh">&…

opencv--使用直方圖找谷底進行確定分割閾值

直方圖原理就不說了&#xff0c;大家自行百度 直方圖可以幫助分析圖像中的灰度變化&#xff0c;進而幫助確定最優二值化的灰度閾值&#xff08;threshold level&#xff09;。如果物體與背景的灰度值對比明顯&#xff0c;此時灰度直方圖就會包含雙峰&#xff08;bimodal histo…

Python web框架fastapi數據庫操作ORM(一)

文章目錄 Fastapi ORM操作1、創建模型2、創建數據庫連接配置文件3、啟動項目4、根據模型類創建數據庫表1. 初始化配置&#xff0c;只需要使用一次2. 初始化數據庫&#xff0c;一般情況下只用一次3. 更新模型并進行遷移4. 重新執行遷移&#xff0c;寫入數據庫5. 回到上一個版本6…

Oracle 11g升級19c 后部分查詢功能很慢

*Oracle 11g升級19c 后部分查詢功能很慢 今天生產突然有個查詢非常慢&#xff0c;日志顯示執行了50秒左右&#xff0c;但是從日志中拿出SQL在PLSQL執行&#xff0c;發現用時不到1秒&#xff0c;查看SQL,懷疑是下面幾種原因導致 1、使用函數不當 UNIT.UNIT_CODE LIKE CONCAT(‘…

狀態碼轉文字!!!(表格數字轉文字)

1、應用場景&#xff1a;在我們的數據庫表中經常會有status這個字段&#xff0c;這個字段經常表示此類商品的狀態&#xff0c;例如&#xff1a;0->刪除&#xff0c;1->上架&#xff0c;0->下架&#xff0c;等等。 2、我們返回給前端數據時&#xff0c;如果在頁面顯示0…

python 線程、進程區別與事例

線程&#xff1a;簡單來說&#xff0c;一個進程中包含多個線程&#xff0c;比如打開一個 QQ&#xff08;進程&#xff09;&#xff0c;然后你一邊聊 QQ&#xff08;一個線程&#xff09;&#xff0c;一邊用 QQ 傳送文件&#xff08;一個線程&#xff09;&#xff0c;等等。在一…

Linux中如何執行腳本

要執行一個保存在文件中的腳本&#xff0c;可以按照以下步驟進行&#xff1a; 1. 創建腳本文件&#xff1a; 首先&#xff0c;使用文本編輯器&#xff08;如 ?vi?、?nano?等&#xff09;創建一個新的腳本文件&#xff0c;并將需要執行的命令寫入到文件中。例如&#xff0…

【Unity】在Unity中導出WebGL并讀取Excel數據的實現方法

在游戲開發中&#xff0c;數據的處理和導出是至關重要的環節之一。Unity作為一款強大的游戲開發引擎&#xff0c;提供了豐富的工具和功能來處理和導出數據&#xff0c;包括將游戲導出為WebGL應用&#xff0c;并讀取外部數據文件&#xff0c;比如Excel表格。本文將介紹如何在Uni…