1.定位布局

- 定位流分類

1.1.靜態(tài)定位

1.2.相對定位

1.3.絕對定位

1.4.固定定位

1.5.粘滯定位

1.6.z-index

- 1.1.靜態(tài)定位（ Static positioning）

? 是所有元素的默認定位方式。意味著將一個元素定位在默認文檔流中。

? position: static;

- 1.2.什么是相對定位?（ Relative positioning ）

? 相對定位就是相對于自己以前在標準流中的位置來移動
? position: relative;
? 使用top,right,bottom,left來控制

- 相對定位注意點

• 相對定位是不脫離標準流的, 會繼續(xù)在標準流中占用一份空間
• 在相對定位中同一個方向上的定位屬性只能使用一個
• 由于相對定位是不脫離標準流的, 所以在相對定位中是區(qū)分塊級元素/行內(nèi)元素/行內(nèi)塊級元素
• 由于相對定位是不脫離標準流的, 并且相對定位的元素會占用標準流中的位置, 所以當給相對定位 的元素設置margin/padding等屬性的時會影響到標準流的布局

- 相對定位應用場景

• 用于對元素進行微調(diào)
• 配合后面學習的絕對定位來使用

- 1.3.什么是絕對定位?（Absolute positioning）

? 絕對定位就是相對于body來定位
? position: absolute;

- 絕對定位參考點

? 1.規(guī)律
? 默認情況下所有的絕對定位的元素, 無論有沒有祖先元素, 都會以body作為參考點

? 2.如果一個絕對定位的元素有祖先元素, 并且祖先元素也是定位流, 那么這個絕對定位的元素就會以定位流 的那個祖先元素作為參考點。
? 2.1只要是這個絕對定位元素的祖先元素都可以
? 2.2指的定位流是指絕對定位/相對定位/固定定位
? 2.3定位流中只有靜態(tài)定位不行

? 3.如果一個絕對定位的元素有祖先元素, 并且祖先元素也是定位流, 而且祖先元素中有多個元素都是定位流, 那么這個絕對定位的元素會以離它最近的那個定位流的祖先元素為參考點。

-絕對定位注意點

? 1.絕對定位的元素是脫離標準流的
? 2.絕對定位的元素是不區(qū)分塊級元素/行內(nèi)元素/行內(nèi)塊級元素
? 3.如果一個絕對定位的元素是以body作為參考點, 那么其實是以網(wǎng)頁首屏的寬度和高度作為參考點, 而不是以整個網(wǎng)頁的寬度和高度作為參考點
? 4.一個絕對定位的元素會忽略祖先元素的padding

- 絕對定位-子絕父相

? 相對定位弊端:
? 相對定位不會脫離標準流, 會繼續(xù)在標準流中占用一份空間, 所以不利于布局界面
? 絕對定位弊端:
? 默認情況下絕對定位的元素會以body作為參考點, 所以會隨著瀏覽器的寬度高度的變化而變化
? 子絕父相
? 子元素用絕對定位, 父元素用相對定位

-絕對定位水平居中

? 只需要設置絕對定位元素的left:50%;
? 然后再設置絕對定位元素的 margin-left: -元素寬度的一半px;

- 1.4.固定定位（Fixed positioning）

? 1.什么是固定定位?
? position: fixed;
? 固定定位和前面學習的背景關聯(lián)方式很像, 背景定位可以讓背景圖片不隨著滾動條的滾動而滾動, 而固定 定位可以讓某個盒子不隨著滾動條的滾動而滾動。

? 注意點:
? 1.固定定位的元素是脫離標準流的, 不會占用標準流中的空間
2.固定定位和絕對定位一樣不區(qū)分行內(nèi)/塊級/行內(nèi)塊級

- 1.5.粘滯定位（ Sticky positioning ）

? position: sticky;

? 結(jié)合了 position:relative 和 position:fixed 兩種定位功能于一體的特殊定位，適用于一些特殊場景。

? 元素定位表現(xiàn)為在跨越特定閾值前為相對定位，之后為固定定位。

? 設置了position: sticky的元素并不脫離文檔流，仍然保留元素原本在文檔流中的位置。

? 當元素在容器中被滾動超過指定的偏移值時，元素在容器內(nèi)固定在指定位置。

? 亦即如果設置了top: 50px，那么在sticky元素到達距離相對定位的元素頂部50px的位置時固定，不再向上

? 移動（此時相當于fixed定位）。

? 設置 position:sticky 同時給一個 (top,bottom,right,left) 之一即可

使用條件：

? 父元素不能overflow:hidden或者overflow:auto屬性。

? 必須指定top、bottom、left、right4個值之一，否則只會處于相對定位

? 父元素的高度不能低于sticky元素的高度

? sticky元素僅在其父元素內(nèi)生效

- 1.6.z-index

? 1.什么是z-index屬性?
? 默認情況下所有的元素都有一個默認的z-index屬性, 取值是0.
? z-index屬性的作用是專門用于控制定位流元素的覆蓋關系的

? 2.默認情況下定位流的元素會蓋住標準流的元素
? 3.默認情況下定位流的元素后面編寫的會蓋住前面編寫的
? 4.如果定位流的元素設置了z-index屬性, 那么誰的z-index屬性比較大, 誰就會顯示在上面
? 注意點:
? 1.從父現(xiàn)象
? 1.1如果兩個元素的父元素都沒有設置z-index屬性, 那么誰的z-index屬性比較大誰就顯示在上 面。
? 1.2如果兩個元素的父元素設置了z-index屬性, 那么子元素的z-index屬性就會失效, 也就是說 誰的父元素的z-index屬性比較大誰就會顯示在上面。

1.盒子背景樣式 background-color 背景顏色 background-image 背景圖片 background-repeat 設置背景圖片平鋪方式 background-size 設置背景圖片尺寸大小
background-position 設置背景圖片位置 bgckground-attachment 設置背景圖片關聯(lián)方式
簡寫background:color image repeat attachment position;
2.CSS布局機制 浮動：可以讓塊級元素水平排版 特性：脫離文檔流，飄在文檔流上方，原先位置不保留 高度塌陷： 父元素高度由子元素撐起，給子元素設置浮動，父元素發(fā)生高度塌陷 解決方案：
1.給父元素設置高度
2.給父元素清除浮動 使用偽元素清除浮動
::after{
display:block;
content:“”;
clear:both;
}
3.在父元素最后設置一個空的一個標簽 給空標簽清浮動 外邊距合并：
1.兄弟元素外邊距合并
原因：一個兄弟設置上外邊距，另一個兄弟設置了下外邊距
解決：1.只給其中一個兄弟元素設置外邊距
2.給下方兄弟元素開啟BFC 設置一個display:inline-block
3.給其中一個兄弟元素設置父元素 給父元素開啟BFC
3.父子元素外邊距合并
原因：父子元素同時設置了同一方向外邊距
解決：1.給父元素設置內(nèi)邊距，不給子元素設置外邊距
2.給父元素設置一個border屬性
3.給父元素開啟BFC overflow:hidden BFC(Block Formatting Context)塊級格式化上下文 ************ 相當于是元素的一種屬性，有了這種屬性，容器就成為獨立的渲染區(qū)域， 容器內(nèi)的元素不會影響容器外的元素
1.觸發(fā)BFC
1.html
2.float不為none
3.position為absolute和fixed
4.display:inline-block
5.overflow不為visible auto hidden
2.作用：
1.避免外邊距重疊
2.清除浮動(給父元素清除浮動、給兄弟元素清(會改變兄弟元素位置))
4.兩列布局(左側(cè)定寬右側(cè)自適應)
5.三列布局（左右定寬 中間自適應） CSS布局機制 定位position 1.脫不脫離文檔流 2.參照點定位
1.靜態(tài)定位 默認所有元素在瀏覽器都是靜態(tài)定位
position:static
2.相對定位 position:relative
特點：1.不脫離文檔流 2.參照自身在瀏覽器位置定位
3.絕對定位 position:absolute
特點:1.脫離文檔流 原先位置不保留 飄在文檔流上方
2.無論有沒有父元素或者祖先元素 參照瀏覽器視口區(qū)域定位
3.給父元素或者祖先元素設置定位 參照父元素或者祖先元素定位
4.固定定位 position:fixed
特點：1.脫離文檔流 原先位置不保留 飄在文檔流上方
2.參照瀏覽器視口區(qū)域定位
5.粘滯定位 position:sticky
特點：1.不脫離文檔流
2.沒有達到指定閾值之前是相對定位 達到閾值后是固定定位 z-index 更改元素堆疊順序
兄弟元素同時開啟定位流 誰的z-index較大 誰的優(yōu)先級高
父子元素同時開啟定位流：
1.如果兩個同時設置 無論父元素z-index值多大 子元素優(yōu)先級高
2.只給父元素設置 無論z-index值多大 子元素優(yōu)先級高
3.只給子元素設置 同時z-index<0 父元素優(yōu)先級高
CSS水平垂直居中方案：
1.通過margin擠壓 給子元素設置margin 左右margin=父width-子width/2
上下margin=父height-子height/2
2.通過padding擠壓 給父元素設置 給父元素設置border-box
3.子絕父相 配合屬性設置為0 top left bottom right 全部為0 margin:auto
4.子絕父相 top:50% left:50% margin-left:-width/2 margin-top:-height/2
代碼版本控制工具 gitee 碼云 個人使用：
1.初始化本地git倉庫 (首次)
git init
2.新建遠程倉庫 (首次)
全局配置用戶名和郵箱(只需要配置一次)
git config --global user.name “”
git config --global user.email “@qq.com”
3.將本地git倉庫和遠程倉庫進行綁定(首次)
git remote add origin xxx.git
查看綁定遠程倉庫 git remote -v
4.git add ./git add * 跟蹤文件有無修改
5.git status 查看提交狀態(tài)
6.git commit -m ‘[xxxxxx]’ 將暫存區(qū)文件提交到本地倉庫
7.git push origin master 將文件提交遠程倉庫 后續(xù)使用 git add . 提交文件到暫存區(qū) git commit -m ‘[xxx]’ 將暫存區(qū)文件提交到本地倉庫 git push origin master 將文件提交到遠程倉庫
邀請大家加入遠程倉庫
1.克隆我的遠程倉庫
git clone xxxx.git
2.上傳到遠程倉庫文章來源地址http://www.zghlxwxcb.cn/news/detail-734329.html

到了這里，關于08-flex布局的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！